[js开源组件开发]ajax分页组件

ajax分页组件

我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的。这个组件主要完成分页的工作。

这张图里显示的是这个分页控件的两种基本形态,样式可以自己定制,包括文案内容。

这个分页控件的demo演示地址是: http://www.lovewebgames.com/jsmodule/paging.html

同时,它还是开源的,它的git 地址是:https://github.com/tianxiangbing/paging

paging

分页控件paging 例子见DEMO

使用方法案例:

<div id="pageTool"></div>
$(‘#pageTool‘).Paging({pagesize:10,count:100});

或者

var p = new Paging();
p.init({target:‘#pageTool‘,pagesize:10,count:100});

  


属性和方法

pagesize:

每页的条数

current:

当前页码,默认为1

prevTpl

上一页的模板,默认“上一页”

nextTpl

下一页的模板,默认“下一页”

firstTpl

首页的模板,默认“首页”

lastTpl

末页的模板,默认“末页”

ellipseTpl

省略号的模板,默认“...”

toolbar: bool

是否显示工具栏,默认为false

pageSizeList:[]

当显示工具栏时有效,可设置每页条数,默认为[5,10,15,20]

changePagesize:function(ps)

修改每页的条数,参数为int

go:function(p)

跳转至某一页,默认到current

render:function(ops)

重新渲染,ops:{count:int,pagesize:int,current:int,pagecount:int}

  

时间: 2024-10-11 17:12:12

[js开源组件开发]ajax分页组件的相关文章

[js开源组件开发]table表格组件

table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tianxiangbing/table 如上图所示,功能基本包括常用表格中遇到的分页.搜索.删除.AJAX操作.由于是用的HANDLEBARS渲染的,所以样式可能很好的控制,要加新的功能也较容易. 调用例子 html <div class="form"> 名称: <input t

[js开源组件开发]tip提示组件

tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件.效果如下图所示: 大概就是这样了,不复杂的东西,也很实用. 它的DEMO实例请点击这里http://lovewebgames.com/jsmodule/tip.html 它的源码托管在github 请点击这里https://github.com/tianxiangbing/tip <table s

FineReport——JS二次开发(分页预览)

BS访问某个cpt模板,报表servlet将会将cpt文件解析成对应的html,报表内容最终转换为一个table,位于id=content-container的div中. 在模板和html页面中,他们定义的方法可以相互调用,不过得先获取到对象: 由于分页预览只是展现,在这种查看方式下FR没有现成单元格获取方法,可以用jquery语法获取指定单元格,如: $("tr[tridx=行号]","div.content-container").children().eq(列

[js开源组件开发]query组件,获取url参数和form表单json格式

query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……,最近项目紧,几个小组,只有我一个前端,公司对前端的定位不清晰,导致前端人员过少的情况.所以还得促进公司前端人员增长,不然再这么玩下去,我要被玩死了,一个公司,不可能靠一个资深前端来支撑二三十个开发的需求,这是不现实的,特别是现在的页面不再是复制粘贴的前况下.我默默耕芸,所以这次我整理了这一个月里所有

[js开源组件开发]数字或金额千分位格式化组件

数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和数字的千分位和小数点控制的组件,它的作用主要是在输入框时限制输入的内容为数字.也可以用于普通标签的数字格式化,效果如下图: demo演示地址请点击 http://www.lovewebgames.com/jsmodule/format-number.html 源码github托管地址请点击https://gi

Vue.js的表格分页组件

转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件

基于Vue.js的表格分页组件

BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯. 如需高大上的组件,可以移步Vue官方组件库:https://github.com/vuejs/awesome-vue#libraries--plugins BootPage是一款支

Angular4.+ ngx-bootstrap Pagination 自定义分页组件

Angular4 随笔(二)  --自定义分页组件 1.简介 本组件主要是实现了分页组件显示功能,通过使用 ngx-bootstrap Pagination分页组件实现. 基本逻辑: 1.创建一个分页组件,如:ng g component  pager 2.父组件调用子组件,并向子组件传入基础配置信息 3.分页组件接收父组件传参,并在模板上进行配置,在html模板上定义点击事件,调用分页子组件自身一个方法 4.分页组件定义发射器,当页码发生变化时,发射通知 5.父组件模板调用分页组件处,监听分页

[js开源组件开发]network异步请求ajax的扩展

network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loading效果.所以我做network这个组件来扩展$.ajax,希望全中国的人民们喜欢. 这里使用到了上篇[js开源组件开发]loading加载效果 一个loading效果,但为了让它独立运行,所以没有进行引用,而是直接做了一个loading方法在里面.它的具体效果图如下: 它的实例DEMO地址请点击这里