mui自带有分页，在ui上我还是认为layui的友好点。
第三方插件：
template-web.js-----------------前端数据绑定
layui.js、layui.css--------------layui分页控件(可以去官网下载)
html代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <link href="../css/mui.min.css" rel="stylesheet" /> 8 <link rel="stylesheet" href="../layui/css/layui.css" /> 9 </head> 10 <body> 11 12 <div class="ui-page-login"> 13 <span>分页示例</span> 14 <label id="pagination_msg"></label> 15 <input type="button" id="btnPagination" class="layui-btn layui-btn-normal layui-btn-mini" value="获取分页数据"> 16 <blockquote> 17 <div id="DataContent"></div> 18 <script id="DataList" type="text/html"> 19 <table class="layui-table"> 20 <thead> 21 <tr> 22 <th> 23 <div class="layui-unselect header layui-form-checkbox headercheckbox" lay-skin="primary"> 24 <i class="layui-icon"></i> 25 </div> 26 </th> 27 <th>审核人员姓名</th> 28 <th>联系人</th> 29 <th>支付方式</th> 30 <th>状态</th> 31 <th>操作</th> 32 </tr> 33 </thead> 34 <tbody> 35 <%for (var i =0;i<list.length;i++){%> 36 <tr> 37 <td style="text-align:center"> 38 <!--<input type="checkbox" data-id="{{list[i].LogId}}" />--> 39 <div class="layui-unselect layui-form-checkbox bodycheckbox" lay-skin="primary" data-id="{{list[i].LogId}}"> 40 <i class="layui-icon"></i> 41 </div> 42 </td> 43 <td id="maintenance_name" style="text-align:left">{{list[i].AuditName}}</td> 44 <td id="sub_name" style="text-align:left">{{list[i].LinkMan}}</td> 45 <td id="remark" style="text-align:left">{{list[i].Payment}}</td> 46 <td id="validName" style="text-align:left"> 47 {{if list[i].Status==1}} 48 <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span> {{else}} 49 <span class="layui-btn layui-btn-disabled">禁用</span> {{/if}} 50 </td> 51 <td class="td-manage"> 52 <a onclick="member_stop(this,'10001')" href="javascript:;" title="启用"> 53 <i class="layui-icon"></i> 54 </a> 55 <a title="编辑" onclick="x_admin_show('编辑','member-edit.html',600,400)" href="javascript:;"> 56 <i class="layui-icon"></i> 57 </a> 58 <a onclick="x_admin_show('修改密码','member-password.html',600,400)" title="修改密码" href="javascript:;"> 59 <i class="layui-icon"></i> 60 </a> 61 <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;"> 62 <i class="layui-icon"></i> 63 </a> 64 </td> 65 </tr> 66 <%}%> 67 </tbody> 68 </table> 69 70 </script> 71 <!--分页--> 72 <fieldset class="layui-elem-field layui-field-title" style="border: 0;"> 73 <div id="Pagination"></div> 74 </fieldset> 75 <table class="layui-hide" id="test"></table> 76 </blockquote> 77 78 </div> 79 </div> 80 </body> 81 82 </html> 83 <script src="../js/mui.min.js"></script> 84 <script src="../js/template-web.js"></script> 85 <script src="../layui/layui.js"></script> 86 <script src="../js/LayerPagination.js"></script> 87 <script type="text/javascript"> 88 mui.init(); 89 mui.plusReady(function() { 90 //分页测试 91 mui('.ui-page-login').on('tap', '#btnPagination', function() { 92 //调用分页公用方法 93 var pageSize = 5; 94 var tableName = "财务单据"; 95 var isTemplate = "true"; 96 var rquestData = JSON.stringify({ 97 pageIndex: 1, 98 pageSize: pageSize, 99 where: "" 100 }); 101 var paginationUrl = reqRootUrl + "/api/FinanceApi/ApiCloseing"; 102 funPagination(_ticket, paginationUrl, "post", rquestData, function(rdata) { 103 if(typeof(rdata) != "undefined") { 104 if(typeof(rdata.code) != "undefined") { 105 if(rdata.code == -1) 106 mui("#pagination_msg")[0].innerHTML = rdata.message; 107 else 108 mui("#pagination_msg")[0].innerHTML = "操作失败"; 109 } else { 110 //绑定数据 111 var data = { 112 title: tableName, 113 isTemplate: isTemplate, 114 list: rdata.Data 115 }; 116 var html = template('DataList', data); 117 mui("#DataContent")[0].innerHTML = html; 118 119 //绑定分页 120 layui.use('laypage', function() { 121 var laypage = layui.laypage; 122 laypage.render({ 123 elem: 'Pagination', 124 count: rdata.Total, 125 limit: pageSize, 126 first: "首页", 127 prev: "<em>←</em>", 128 next: "<em>→</em>", 129 last: "尾页", 130 hash: 'fenye', 131 jump: function(obj) { 132 var rquestData = JSON.stringify({ 133 pageIndex: obj.curr, 134 pageSize: pageSize, 135 where: "" 136 }); 137 funPagination(_ticket, paginationUrl, "post", rquestData, function(rdata) { 138 data.title = tableName; 139 data.isTemplate = isTemplate; 140 data.list = rdata.Data; 141 var html = template('DataList', data); 142 mui("#DataContent")[0].innerHTML = html; 143 }); 144 } 145 }); 146 }); 147 148 } 149 } else { 150 mui.toast("操作失败"); 151 } 152 }); 153 154 }); 155 156 }); 157 //checkbox特性 158 function setCheckBox(obj) { 159 if(mui(obj).hasClass("layui-form-checked")) 160 mui(obj).removeClass("layui-form-checked"); 161 else 162 mui(obj).addClass("layui-form-checked"); 163 } 164 </script>
LayerPagination.js
1 function funPagination(_ticket, apiurl, methodtype, rqueatdata, callback) { 2 /// <summary> 3 /// MUI AJAX通用函数 4 /// </summary> 5 /// <param name="_ticket" type="string">接口请求票据</param> 6 /// <param name="apiurl" type="string">接口请求地址</param> 7 /// <param name="methodtype" type="post/get">接口请求方式</param> 8 /// <param name="rqueatdata" type="json">接口请求数据</param> 9 /// <param name="theadlist" type="array">表头字段</param> 10 /// <param name="callback" type="function">回调函数</param> 11 mui.ajax({ 12 url: apiurl, 13 type: methodtype, 14 data: rqueatdata, 15 headers: { 16 'Content-Type': 'application/json', 17 "Authorization": "BasicAuth " + _ticket 18 }, 19 dataType: "json", 20 timeout: 30000, //超时时间设置为10秒； 21 success: function(rdata) { 22 if(typeof(rdata) != "undefined") { 23 callback(rdata); 24 } else { 25 callback("无操作数据"); 26 } 27 }, 28 error: function(xhr, type, errorThrown) { 29 var _error = ""; 30 var robj = { 31 code: 0, 32 message: "" 33 }; 34 switch(type) { 35 case "timeout": 36 _error = "服务器响应超时"; 37 break; 38 default: 39 _error = "异常信息:" + xhr.responseText; 40 break; 41 } 42 robj.code = -1; 43 robj.message = _error; 44 //callback("layerPaginationErrorMessage:" + _error); //mui.toast(_error); 45 callback(robj); 46 } 47 }); 48 }