3、list.html中的jQuery代码
//pageCount:总页数。用于初始化laypage分页控件。 //pageIndex:初始化当前页。显示第一页。 //currentPage:当前页数。 //getPageData:获取每页数据的函数。 //url:获取每页数据的方法的路径。由控制器和函数名组成。 function jsonPage(pageCount, pageIndex,currentPage, getPageData,url) { var laypageindex = laypage({ cont: 'result', //容器。值支持id名、原生dom对象,jquery对象。 skin: '#3c8dbc', pages: pageCount, //通过后台拿到的总页数 curr: pageIndex, //初始化当前页 prev: '上一页', //若不显示,设置false即可 next: '下一页', //若不显示,设置false即可 skip: true, //是否开启跳页 jump: function (obj, first) { //触发分页后的回调 //getPageData(1); if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr getPageData(url,obj.curr); currentPage = obj.curr; } } }); } /url:获取总页数据的方法的路径。由控制器和函数名组成。 function getAllpage(url){ var tmp ; $.ajax({ type: "GET", dataType: "json", async: false, url: PUBLIC_BASE+url, success: function(json) { var data = eval(json); tmp=data.allpage; }, error: function(json) { } }); return tmp; } //data:每页的数据。由JSON对象组成。 function instantiation(data) { //begin $.each $.each(data.pageinfo, function (index, item) { $("#table_body").append($('') .append($(" ").html(item.name)) .append($(" ").html(item.desc)) .append($(" ").html("")) .append($(" ").html(item.create_time)) .append($(" ").html(item.update_time)) .append( $(" ") .append($("查看丨 ")) .append($("编辑丨 ")) .append($("删除丨 ")) .append($("禁用")) ) ); $("#view"+item.id).click(function() { fillMainContent("/application/application?model=view&id="+item.id); }) $("#edit"+item.id).click(function() { fillMainContent("/application/application?model=edit&id="+item.id); }) $("#delete"+item.id).click(function() { deleteApp(item.id); alert("删除成功"); }) $("#forbid"+item.id).click(function() { deleteApp(item.id); alert("删除成功"); getPageData(currentPage); }) }); //end $.each } //获取每页的数据。curr:页码 ,curl:获取数据的路径。 function getPageData(url,curr) { curr = curr-1; $.ajax({ type: "GET", dataType: "json", data: {page:curr}, url: PUBLIC_BASE+url, success: function(json) { $('#table_body').empty(); var data = eval(json); console.log(data); instantiation(data); }, error: function(json) { var data = eval(json); console.log(data); } }); } //调用函数实现分页 //获取总页数,用于初始化分页控件总页数 pageCount= getAllpage("/application/getAllPage"); //获取第一页数据 getPageData("/application/getpage",1); //初始化分页控件并分页 jsonPage(pageCount,pageIndex,currentPage,getPageData,"/application/getpage");
四、参考资源
http://laypage.layui.com/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- thinkPHP5分页功能实现方法分析
- thinkPHP5框架实现分页查询功能的方法示例
- thinkPHP5框架分页样式类完整示例
- thinkPHP5框架实现基于ajax的分页功能示例
- ThinkPHP5&5.1框架关联模型分页操作示例
- thinkPHP5.1框架使用SemanticUI实现分页功能示例
- thinkphp5+layui实现的分页样式示例
- tp5框架无刷新分页实现方法分析
- tp5框架内使用tp3.2分页的方法分析
- thinkphp5框架前后端分离项目实现分页功能的方法分析