pc端分页插件的使用
使用的插件是jqpaginator分页插件
官网：http://jqpaginator.keenwon.com/
使用方法：
第一步引入css.js
1 <link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" /> 2 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 3 <script src="js/jqpaginator.min.js" type="text/javascript" charset="utf-8"></script>
第二步：html布局
1 <table class="layui-table" style="text-align: center;"> 2 <thead> 3 <tr> 4 <th style="text-align: center;">ID</th> 5 <th style="text-align: center;">商品名称</th> 6 <th style="text-align: center;">商品价格</th> 7 <th style="text-align: center;">创建时间</th> 8 <th style="text-align: center;">状态</th> 9 <th style="text-align: center;">操作</th> 10 </tr> 11 </thead> 12 <tbody id="tbody"> 13 </tbody> 14 </table> 15 <div id="pagination" style="text-align: center;"> 16 </div>
第三步：定义分页 ajax请求
1 var pageCount; // 总页数 2 var dataObj = { // 定义一个data传输的对象 3 "page": 1, // 初始化第一页 4 "rows": 10 // 每页记录数 5 } 6 7 $(function() { 8 loadcancel(); 9 loadpage(); 10 }); 11 /** 12 * 定义总页数（可以设置为全局方法） 13 * @param {Object} 总数量 14 * @param {Object} 每页数量 15 */ 16 function fPageCount(sum, count) { 17 return(sum % count == 0) ? sum / count : Math.ceil(sum / count); 18 } 19 /**、 20 * 初始化查询第一页的数据 21 * @param {Object} 当前页数 22 * @param {Object} data数据 23 */ 24 function loadcancel(obj) { 25 $.ajax({ 26 type: "post", 27 url: "url", 28 async: false, 29 cache: false, 30 data: dataObj, 31 dataType: "json", 32 success: function(data) { 33 /** 34 * data中至少存在两个属性 35 * sum：总数量 36 * list：每页查询的数据 37 */ 38 $('#tbody').empty(); // 清空tbody对象 39 var html = ''; 40 var c = fPageCount(data.sum, rows);
// 为什么还要二次转换，因为如果总页数为0的话，分页插件会报错，所以当总页数为0的时候设置总页数为1
pageCount = (c == 0)? 1 : c;
41 if(data.sum > 0) { 42 $.each(data.list, function(index, item) { 43 // jquery 遍历对象 44 html += '<tr><td>' + item['id'] + '</td>...</tr>'; 45 }); 46 } else { 47 html += '<tr><td style="text-align: center;" colspan="8">暂时没有数据</td></tr>'; 48 } 49 $('#tbody').html(html); 50 }, 51 }); 52 } 53 54 //分页方法 55 function loadpage() { 56 $.jqPaginator('#pagination', { 57 totalPages: pageCount, // 设置分页的总页数 58 visiblePages: 10, // 设置最多显示的页码数 59 currentPage: dataObj.page, // 设置当前的页码 60 wrapper: '<ul class="pagination"></ul>', 61 first: '<li class="first"><a href="javascript:void(0);">首页</a></li>', 62 prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>', 63 next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>', 64 last: '<li class="last"><a href="javascript:void(0);">末页</a></li>', 65 page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>', 66 onPageChange: function(num) { 67 dataObj.page = num; // 点击分页时更换page的值 68 loadcancel(); // 重新执行ajax请求 69 } 70 }); 71 }
