最近在维护一个很古老的项目，里面是用jq的dataTable方法实现一个分页的表格，不过这些表格的分页是本地分页。现在想要的是点击分页去请求数据。

经过多次的修改，以失败告终。分页的不准确，还会有这个错误：

Showing 0 to 0 of 0 entries (filtered from NaN total entries)

最终没有解决，我放弃了。

最终我选择自己写一个表格。本身项目的ui是基于bootstrap的。我就继续使用原有的插件。实现的效果如下：

整个分成三个部分：

1、顶部左侧页数选择框，右侧关键字搜索框；

2、中间的表格；

3、右下角分页。

首先得全局引入jq和bootstrap

<script src="/static/jquery/dist/jquery.min.js?v=c9f5aeeca3ad37bf2aa006139b935f0a"></script>

<script src="/static/bootstrap/dist/js/bootstrap.min.js?v=5869c96cc8f19086aee625d670d741f9"></script>

html书写

   

        

            

                
                    10
                    20
                    30
                    50
                
                Search:  


            
            


            
        
    

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("暂无数据");
                    return "";
                }
                let arr=[];
                while(arr.length<pagesTotal){
                    arr.push(arr.length+1)
                }
              // 通过字符串拼接方式写表格
              // 需要判断前一页和后一页什么时候不能点击
              
                if (success == true) {
                    if(data){
                        var str=`
                            
                            ${data.map(function(item){
                                return `
                                `
                             }).join('')}
                          

                            

                            
ID
                            
限制关键字
                            
限制键值
                            
关键字匹配方式
                            
操作
                            
                            

                                  
${item.id}
                                  
${item.key}
                                  
${item.value}
                                  
${item.match_type===0?"完全匹配":"CIDR网段匹配"}
                                  

                                    

                                      
                                       删除限制单元
                                      
                                      
                                      

                                        
确认
                                        
取消
                                      
                                    
                                  
                                
                         
                        
                        `;

                        $("#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("暂无数据");
                    }
                } 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,"");
})

作者:前端小陈

转载请注明出处，谢谢！