jq+ajax+bootstrap改写一个动态分页的表格
最近在维护一个很古老的项目，里面是用jq的dataTable方法实现一个分页的表格，不过这些表格的分页是本地分页。现在想要的是点击分页去请求数据。
经过多次的修改，以失败告终。分页的不准确，还会有这个错误：
Showing 0 to 0 of 0 entries (filtered from NaN total entries)
最终没有解决，我放弃了。
最终我选择自己写一个表格。本身项目的ui是基于bootstrap的。我就继续使用原有的插件。实现的效果如下：
整个分成三个部分：
1、顶部左侧页数选择框，右侧关键字搜索框；
2、中间的表格；
3、右下角分页。
首先得全局引入jq和bootstrap
<!-- jQuery 3 --> <script src="/static/jquery/dist/jquery.min.js?v=c9f5aeeca3ad37bf2aa006139b935f0a"></script> <!-- Bootstrap 3.3.7 --> <script src="/static/bootstrap/dist/js/bootstrap.min.js?v=5869c96cc8f19086aee625d670d741f9"></script>
html书写
<div class="box-body"> <div id="staff_list" class="box-body" > <div style="text-align: right"> <select id="select-staff_list" class="form-control" style="width:80px;height:30px;float:left"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="50">50</option> </select> Search: <input id="staff_list_search" class="form-control" style="width:200px;height:30px;display: inline-block"/><br /><br /> </div> <div id="staff_list_table" style="width: 100%; word-break: break-all; overflow-wrap: break-word;"> </div> </div> </div>
jq实现
// 分页的页码不好获取，在全局声明，操作后更新页码； let gloabalPage=0; function tableReload(page,size,keyword){ $.ajax({ type: "get", url: "/api/global/access/list?pages="+page+"&page_size="+size+"&keyword="+keyword, success: function (res) { const {data:{recordsTotal,data},success}=res; // 计算页数 const pagesTotal=Math.ceil(recordsTotal/size); if(recordsTotal===0){ // 没有数据清除表格 $("#staff_list_table").html("<span>暂无数据</span>"); return ""; } let arr=[]; while(arr.length<pagesTotal){ arr.push(arr.length+1) } // 通过字符串拼接方式写表格 // 需要判断前一页和后一页什么时候不能点击 if (success == true) { if(data){ var str=` <table id="table-list" class="table table-sm table-hover table-bordered table-striped" > <tr> <th>ID</th> <th>限制关键字</th> <th>限制键值</th> <th>关键字匹配方式</th> <th style="width:140px;">操作</th> </tr> <tbody id="tbody-list" class="tbody-list-kcsinstance"> ${data.map(function(item){ return ` <tr> <td>${item.id}</td> <td>${item.key}</td> <td>${item.value}</td> <td>${item.match_type===0?"完全匹配":"CIDR网段匹配"}</td> <td> <div class="btn-group" role="group"> <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-trash"></i> 删除限制单元 <span class="caret"></span> </button> <ul class="dropdown-menu" > <li onclick="delLimit(${item.id})" ><a>确认</a></li> <li><a>取消</a></li> </ul> </div> </td> </tr>` }).join('')} </tbody> </table> <nav aria-label="Page navigation" style="float:right"> <ul class="pagination" size="mini"> ${page===0?`<li class="disabled">`:`<li>`} <a aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> ${arr.map(function(arritem){ if(arritem==page+1){ return `<li class="active"><a >${arritem}</a></li>`} return `<li><a >${arritem}</a></li>` }).join('')} ${page===pagesTotal-1?`<li class="disabled">`:`<li>`} <a aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> `; $("#staff_list_table").html(str); // 页码添加点击事件，判断是点击在页码上还是前一页或者后一页。 $('.pagination li').on('click',function () { const contentVal=$(this).html(); const size=$("#select-staff_list").val(); const word=$("#staff_list_search").val(); const page=contentVal.match(/\d+(.\d+)?/g); if(page){ // 点击页码数 gloabalPage=page[0]-1; tableReload(page[0]-1,size,word); $('.pagination li').removeClass('active'); $(this).addClass('active'); }else if(contentVal.indexOf("Previous")>-1&&gloabalPage>0){ // 点击 前一页， 并且当前页数大于1才能进行请求 tableReload(gloabalPage-1,size,word); gloabalPage=gloabalPage-1; }else if(contentVal.indexOf("Next")>-1&&gloabalPage<pagesTotal-1){ // 点击 后一页， 并且当前页数小于总页数才能进行请求 tableReload(gloabalPage+1,size,word); gloabalPage=gloabalPage+1; } }); }else { $("#staff_list").html("<span>暂无数据</span>"); } } else { alert("请求失败！\n" + res.msg); } }, error: function () { alert("Error"); } }) }; // 页数选择框发生改变时候的操作 $('#select-staff_list').on('change',function (c) { gloabalPage=0; const word=$("#staff_list_search").val(); tableReload(0,c.target.value,word); }); // 搜索框发生改变时候的操作 $('#staff_list_search').on("input propertychange",function (c) { gloabalPage=0; const page=$("#select-staff_list").val(); tableReload(0,page,c.target.value); }); // 首次加载 $(document).ready(function() { tableReload(0,10,""); })
转载请注明出处，谢谢！
