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,"");
})作者:前端小陈
转载请注明出处，谢谢！
