laypage ajax,laypage.js分页插件使用方法详解

本文实例为大家分享了laypage.js分页插件的使用方法，供大家参考，具体内容如下

1、引用依赖

a.layui.js

b.layui.css

c.laypage.js

2、HTML代码部分

3、js代码部分

$(function(){

//加载菜单列表数据

menuPageData();

});

function menuPageData() {

//以下将以jquery.ajax为例，演示一个异步分页

$.getJSON('../../menu/page/1', {

rows : 10 //每页显示的数据条数

},

function (res) { //从第1页开始请求。返回的json格式可以任意定义

laypage({

cont: 'page-nav', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：

pages: res.pageCount, //通过后台拿到的总页数

curr: 1, //初始化当前页

skin: '#5a98de',//皮肤颜色

groups: 5, //连续显示分页数

skip: true, //是否开启跳页

count:res.total, //数据总数

limit: 10, //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数

limits:[10, 20, 30, 40, 50], //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框

first: '首页', //若不显示，设置false即可

last: '尾页', //若不显示，设置false即可

prev: '上一页', //若不显示，设置false即可

next: '下一页', //若不显示，设置false即可

jump: function (e) { //触发分页后的回调

$.getJSON('../../menu/page/' + e.curr, {

rows : 10 //每页显示的数据条数

}, function (res) {

console.log(res.rows);

var data = res.rows;

$("#total-text").html(res.total);

/*解析表格分页数据*/

analysisTableData(data);

});

}

});

});

}

4、效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。