受一个大佬在评论留言的代码启发由来!
首先html部分
<p align="center">巡线日程表</p>
<table width="95%" border="1" cellpadding="4" cellspacing="1" bgcolor="#999999" id="tableId">
<thead>
<th style="text-align: center">编号</th>
<th style="text-align: center">日期</th>
<th style="text-align: center">开始时间</th>
<th style="text-align: center">派单时间</th>
<!-- <td>片管员</td>
<td>巡线单位</td>-->
</thead>
<tbody id="list">
<!--<tr>
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
-->
</tbody>
</table>
<div id="pageDiv"></div>
**js** 部分
```javascript
var datas = [], Filtered = [], page = 1, pagesize = 10, pageData = [];
//生成模拟数据
getAll(start,end);
for(var x = 0; x < 5;x++){
datas.push("<tr>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"</tr>");
}
核心JS部分
//过滤
function filter(q) {
Filtered = [];
if (q == '') {
Filtered = datas;
} else {
for (var i = 0, n = datas.length; i < n; i++) {
if (datas[i].toLowerCase().indexOf(q.toLowerCase()) > -1) {
Filtered.push(datas[i]);
}
}
}
render();
}
//渲染数据
function render() {
document.getElementById('list').innerHTML = getPageData();
setPageInfo();
}
//转到指定页
function goPage(n) {
page = n;
render();
}
//取得当前页数据
function getPageData() {
if ((page - 1) * pagesize > Filtered.length) {
page = Math.ceil(Filtered.length / pagesize);
}
var n = Math.min(pagesize, Filtered.length - (page - 1) * pagesize);
pageData = Filtered.slice((page - 1) * pagesize, n + (page - 1) * pagesize);
var html = [];
for (var i = 0, n = pageData.length; i < n; i++) {
html.push('<li>' + pageData[i] + '</li>');
}
return html.join("");
}
//设置分页条信息
function setPageInfo() {
var pageinfo = '';
var pageCount = Math.ceil(Filtered.length / pagesize);
if (pageCount <= 1) {
document.getElementById('pageDiv').innerHTML = '';
return;
}
if (page > 1) {
pageinfo += '<a href="javascript:void(0);" οnclick="goPage(1);">首页</a> ';
}
if (page > 10) {
pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + (page - 10) + ');">前10页</a> ';
}
for (var i = Math.max(1, page - 10) ; i < page; i++) {
pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + i + ');">' + i + '</a> ';
}
pageinfo += page + ' ';
for (var i = page + 1 ; i <= Math.min(10 + page, pageCount) ; i++) {
pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + i + ');">' + i + '</a> ';
}
if (page + 10 < pageCount) {
pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + (page + 10) + ');">后10页</a> ';
}
if (page < pageCount) {
pageinfo += '<a href="javascript:void(0);" οnclick="goPage(' + pageCount + ');">末页</a> ';
}
document.getElementById('pageDiv').innerHTML = pageinfo;
}
Filtered = datas;
render();
最后:
如果你是通过js动态获取的数据 需要在最后重新渲染数据 也就是 调用
Filtered = datas;
render();