jQueryBsgrid数据表格搭配layui.laypage分页工具栏

开发工具与关键技术：Layui、Bsgrid、jQuery
作者：张俊辉
撰写时间：2019年1月18日

初始化Bsgrid数据表格，参数设置如下所示，并在请求完数据后执行分页方法。

var borrowList;
$(function () {
	borrowList = $.fn.bsgrid.init("borrowList", {
	    url: "SelectBorrow",
	    autoLoad: false,//自动加载
	    pageSize: 7,//初始化每一页显示数据条数
	    stripeRows: true,//隔行换色
	    rowHoverColor: true,//鼠标滑过变色
	    showPageToolbar: false,//是否显示分页工具栏  
	    complete: function () {//Ajax请求完成后执行方法,     
	        var totalRows = borrowList.getTotalRows();//获取总行数
	        var curPage = borrowList.getCurPage();//获取当前页码
	        var test = 'test1';//分页工具条容器id
	        var gridObj = borrowList//jQueryBsgrid数据表格插件初始化方法
	        var pageSize = borrowList.getPageSize()//获取分页大小
	        test1(totalRows, curPage, test, gridObj, pageSize)//Layui分页工具栏生成方法
	    }
	});
}

分页方法是使用贤心大大的Layui.laypage分页功能，如下：

//分页工具栏
function test1(totalRows, curPage, test, gridObj, pageSize) {
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        //额度列表工具栏
        laypage.render({
            elem: '' + test + ''//存放分页的容器
            , count: totalRows//数据总数
            , limit: pageSize//	每页显示的条数
            , curr: curPage//	起始页
            , layout: ['prev', 'page', 'next', 'skip', 'count']//	自定义排版:count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、 、skip（快捷跳页区域
            , jump: function (obj, first) {
                if (!first) {
                    gridObj.gotoPage(obj.curr)
                }
            }
        });
    });
}

效果图如下：