简易ajax生成分页插件

所属分类:导航-分页

 59317  381  查看评论 (58)
分享到微信朋友圈
X
简易ajax生成分页插件 ie兼容8

使用方法

1.插件依赖jquery,使用前需要先引入jquery库

2.可定制生成分页的样式及ajax获取数据后处理dom元素的方法,例如:

$("#pager").zPager({
	url:'pageData.json',
	htmlBox: $('#wraper'),
	btnShow: false,
	dataRender: function(data){
		//ajax获取每页data数据后,可用此方法生成数据列表
		//此方法有默认function,也可以不写 具体参考demo
		console.log(data+'---ajax获取到的json格式的data数据');
	}
});

3.部分参数配置说明:

$.fn.zPager.defaults = {
		totalData: 10, //数据总条数
		pageData: 4, //每页数据条数
		pageCount: 0, //总页数
		current: 1, //当前页码数
		pageStep: 10, //当前可见最多页码个数
		minPage: 5, //最小页码数,页码小于此数值则不显示上下分页按钮
		active: 'current', //当前页码样式
		prevBtn: 'pg-prev', //上一页按钮
		nextBtn: 'pg-next', //下一页按钮
		btnBool: true, //是否显示上一页下一页
		firstBtn: 'pg-first', //第一页按钮
		lastBtn: 'pg-last', //最后一页按钮
		btnShow: true, //是否显示第一页和最后一页按钮
		disabled: true, //按钮失效样式
		ajaxSetData: true, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
		url: '', //ajax路由
		htmlBox: '' //ajax数据写入容器
	}

注:请参照demo使用,qq联系方式:936172012

相关插件-分页

jQuery前端分页插件pageGroup.js

一款非常简洁漂亮方便调用的jQuery前端分页,没有多余的JS和文件,页面多可隐藏
  分页
 60176  376

超实用的angular.js无刷新分页完整案例

超实用的angular.js无刷新分页完整案例(需要放到服务器下运行!)
  分页
 41333  388

实用的分页插件zxf_page.js

基于jquery的分页插件
  分页
 46544  389

jQuery长文本分页插件textify

jQuery实现的长文本分页特效,textify是一个jQuery插件,可以自动创建一个有吸引力的和现代的你的内容布局,避免让用户不再枯燥的文本。
  分页
 33031  359

讨论这个项目(58)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    劳资意大利炮呢。 0
    2018/6/6 11:44:56
    这个插件不能绑定点击事件吗?在线等,挺急的!!!! 回复
    ... 0
    2018/3/21 16:33:38
    如果我想用其他样式修饰查出来的内容,那还得重写z-pager.js 回复
    ╃叶落瑾年 0
    2017/12/20 17:38:47

    我想知道。。因为一页内容太长,所以要在内容上下都加上页码。。。那么翻页后怎么实现上下页码效果一致

    回复
    罄?一瞥 0
    2017/12/18 10:06:10

    请问ajax的入参只能在jquery.z-pager.js文件里修改吗?能不能直接在$.fn.zPager.defaults这个方法里面配置呢?

        陪??拘歌、0
        2017/12/18 16:19:50
        请问你的问题解决了吗,求回答
        心健-设计0
        2018/2/3 7:59:21

        我觉得最好在原来的里面改。后期更新可以直接升级

        自渡0
        2018/7/22 9:34:34
        不能
    回复
    罄?一瞥 0
    2017/12/18 9:46:02

    请问怎么修改ajax的请求参数 比如把page参数 改成 pageNo?

        节欲40
        2017/12/18 16:53:55

        是的

        ??1
        2018/1/13 20:20:56

        ajax里面有一个date参数就是用来传值的里面传值形式比如说: "pageNO":1,根后台的参数名称一致就可以了

    回复
    丶风不语 0
    2017/11/17 10:43:19

    dataRender方法进不去是怎么回事

    回复
    Angular 0
    2017/10/23 12:02:36

    就是分页到第5个的时候后面出现"...",然后最大宽度为270px

    回复
    Angular 0
    2017/10/23 11:58:34

    如何改成这个样子?请求大佬们给个建议。谢谢!

    回复
    越努力,越幸运。 0
    2017/9/27 14:57:13

    为什么ajax获取后的数据不能给parms重新赋值。打印的数据:

    {total: 10, rows: Array(0)}
        越努力,越幸运。0
        2017/9/27 14:58:22
        {total: 10, rows: Array(0)}rows:Array(4)0:{id: "9", mid: "1", …}1:{id: "8", mid: "1", …}2:{id: "7", mid: "1",  …}3:{id: "6", mid: "1",  …}length:4__proto__:Array(0)total:"13"__proto__:Object
    回复
    空瓶子 0
    2017/8/17 19:19:23

    请问ajax里的rows是指什么呢?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复