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="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="200px;height:30px;display: inline-block"/><br /><br />
            </div>
            <div id="staff_list_table" style=" 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="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,"");
})

 

转载请注明出处，谢谢！