一.背景

在使用thinkPHP框架做项目的时候，我们经常会遇到列表内容分页的问题。thinkPHP框架有自己的分页功能，但也有缺陷。这个缺陷就是每次将每个页面的数据返回到页面时，都需要重新加载页面需要的JS、CSS等资源。如果页面中js太多，会增加流量压力。因此，我们使用laypage插件。每次使用ajax request获取每个页面的数据，都不需要重复加载页面。

第二，分页过程

如下图所示：

流程描述：

1)调查App.php的函数，它调用fetch函数。fetch函数呈现list.html。2)list.html调用获取总页数的函数，获取总页数。3)获取第一页数据。4)初始化laypage分页插件。5)点击页码触发分页查询。

第三，与分页功能相关的代码

1.App.php控制器代码

//fetch render page公共函数index(){ return $ this-fetch(' list ')；}//根据传入的页码，查询数据公共函数getpage(){ span style=' color 3360 # ff 0000；'//获取从页面传入的页码/span $ now page=input(' page ')；//每页显示10条数据，$ limits=10$ app=new appInfo()；$ page _ info=$ app-limit($ now page * $ limits)，$ limits)-select()；//ajax分页输出$ info=['pageinfo'=$ page _ info，' nowpage'=$ nowpage，' now page '=$ now page]；返回JSON($ info)；}//获取所有页面公共函数getallpage(){ try { $ count=appinfo :3360 count()；$ limits=10//计算总页数$ all page=ceil($ count/$ limits)；$ info=[' all page '=$ all page]；}catch (Exception $e){ abort(500，$e-getMessage()，[' result '=topsegwerr 3360: topsec _ GW _ ERR _ NO _ UNKNOWN])；}返回JSON($ info)；} 2.list.html的html代码

Div class=' box-body '表id=' table 1 ' class=' table table-bordered table-striped '第一个应用程序名称/第一个应用程序类型/第一个应用程序映像/第一个创建日期/第一个修改日期/第一个操作/第一个/第一个/第一个/第一个表体id=' table _ body '/t body tfoot/t foot/table Div id=' result '/Div class=' button id=' add _ app ' type=' button ' class=' btnbtn-primary-col-xs-offset div div id=' content '/div div class=' box-body ' button id=' add _ img ' type=' button ' class=' btnbtn-primary col-xs-offset-5 ' span class=' fa-tasks white '/span add pictures/button/div！ -/- /.盒体- /div3 3，list.html jQuery代码

//页数：总页数。用于初始化laypage分页控件//页面索引：初始化当前页。显示第一页//当前页面：当前页数//getPageData:获取每页数据的函数//url:获取每页数据的方法的路径。由控制器和函数名组成函数jsonPage(pageCount，pageIndex，currentPage，getPageData，URL){ var lay page index=lay page({ cont : ' result '，//容器。值支持编号名、原生数字正射影像图对象，jquery对象skin: '#3c8dbc '，pages: pageCount，//通过后台拿到的总页数curr:页面索引，//初始化当前页prev: '上一页', //若不显示，设置错误的即可' next: '下一页', //若不显示，设置错误的即可skip: true，//是否开启跳页jump:函数(obj，first) { //触发分页后的回调//getpage数据(1)；if(！第一){ //点击跳页触发函数自身，并传递当前页：obj.curr getPageData(url，obj。curr)；current page=obj . curr } } })；} /url:获取总页数据的方法的路径。由控制器和函数名组成函数GetAllPage(URL){ var tmp；$.ajax({ type: 'GET '，dataType: 'json '，async: false，url: PUBLIC_BASE url，success:函数(JSON){ var data=eval(JSON)；tmp=数据。所有页面；}，错误：函数(JSON){ } })；返回tmp} //data:每页的数据。由JSON对象组成函数实例化（数据){ //begin $ .每一美元。每个(data.pageinfo，function (index，item) { $('#table_body ').追加($('tr class='table_tr'/').追加($('td/').html(item.name)).追加($('td/').html(item.desc)).追加($('td/').html(' img src=' item。appimg ' '/').追加($('td/').html(item.create_time)).追加($('td/').html(item.update_time)).追加($('td /').追加($('a class='黄色id=' view '项。id ' I class=' fa-fa-eye fa-fw '/I查看丨/a ').追加($(' a class=' green ' id=' edit ' item。id ' I class=' fa fa-edit fa-fw '/I编辑丨/a ').追加($(' a class=' red ' id=' delete '项。id ' I class=' fa fa-remove fa-fw '/I删除丨/a ').追加($('a class='blue' id='禁止项目。id ' I class=' fa fa-ban fa-fw '/I禁用/a '))))；$(“# view”项。id ).单击(function(){ FillMainContent('/application/application？模型=视图id=' item。id)；})$(“# edit”项。id ).单击(function(){ FillMainContent('/application/application？model=editid=' item。id)；})$(“# delete”项。id ).单击(function(){ deleteApp(item。id))；警报('删除成功');})$(' #禁止item.id ).单击(function(){ deleteApp(item。id))；警报('删除成功');getpage数据(当前页面)；}) });//end $ .每个} //获取每页的数据curr:页码curl:获取数据的路径函数getPageData(url，curr){ curr=curr-1；$.ajax({ type: 'GET '、dataType: 'json '、data: {page:curr}、url: PUBLIC_BASE url、success:函数(json) { $('#table_body ').empty()；定义变量数据=eval(JSON)；console.log(数据);实例化（数据);}，错误：函数(JSON){ var data=eval(JSON)；console.log(数据);} });} span style=' color : # ff 0000 '//调用函数实现分页/span //获取总页数，用于初始化分页控件总页数页数=GetAllPage('/application/GetAllPage ')；//获取第一页数据getpage数据('/application/getpage '，1)；//初始化分页控件并分页jsonPage(pageCount，pageIndex，currentPage，getPageData，'/application/getpage ')；四、参考资源

http://laypage.layui.com/

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