最近在维护一个很古老的项目，里面是用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>

   <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>

  // 分页的页码不好获取，在全局声明，操作后更新页码；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,"");})

作者:前端小陈

转载请注明出处，谢谢！