JS实现表格分页，排序，模糊搜索
整个的功能分为三个部分，都是来自不同的前辈们贡献的资源，整合在了一起，虽然还是有些繁琐，但是可以使用^_^
分页的资源来自：https://blog.csdn.net/xuaner8786/article/details/79468546 雪梅冷落前辈
排序的资源来自：https://www.cnblogs.com/doseoer/p/5638533.html Leone-前辈
模糊搜索不记得来自哪里了…..下面是整个的代码，html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/some.js"></script>
<style type="text/css">
* { padding: 0; margin: 0; }
body { font-family: verdana; font-size: 12px; }
.content { width: 550px; margin: 20px auto; }
.content h1 { font-family: '微软雅黑'; font-size: 18px; padding-bottom: 5px; }
table { width: 100%; }
th, td { padding: 6px 0px; text-align: center; width:auto;}
th { background-color: #1283af; color: #ffffff; }
.even { background-color: #e8eeff; }
.odd { background-color: #f5f5f5; }
.highlight { background-color: #FFF3EE; }
.span6{ float:inherit; margin:10px; }
#pagiDiv span{ background:#1e90ff; border-radius: .2em; padding:5px; }
.zd_one{padding-top:5px;}
.zd_two{color:#1283af;}
</style>
<script>
window.onload=function(){
//页面标签变量
blockTable = document.getElementById("blocks");
preSpan = document.getElementById("spanPre");
firstSpan = document.getElementById("spanFirst");
nextSpan = document.getElementById("spanNext");
lastSpan = document.getElementById("spanLast");
pageNumSpan = document.getElementById("spanTotalPage");
currPageSpan = document.getElementById("spanPageNum");
numCount = document.getElementById("blocks").rows.length - 1; //取table的行数作为数据总数量（减去标题行1）
columnsCounts = blockTable.rows[0].cells.length;
pageCount = 5;//控制每页显示条数
pageNum = parseInt(numCount/pageCount);
if(0 != numCount%pageCount){
pageNum += 1;
}
firstPage();
};
$(function(){
//回车事件绑定
$('#myInput').bind('keyup', function(event) {
if (event.keyCode == "13") {
// 声明变量
var input, filter, table, tr, td, i,tds;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("blocks");
tr = table.getElementsByTagName("tr");
//if(input.value!="" && input.value != null){//控制模糊搜索时 是否允许空格搜索
for(var a =0; a<tr.length;a++){
tds = tr[a].getElementsByTagName("td");
for (var i =0;i< tds.length ; i++) {
var thval = tds[i].outerText;
if (thval.toUpperCase().indexOf(filter)!=-1){//不存在时返回-1 !=-1就是存在
tr[a].style.display = "";
break;
}else{
tr[a].style.display = "none";
}
}
}
//}//控制模糊搜索时 是否允许空格搜索
}
});
});
</script>
</head>
<body align="center">
<div class="container zd_one" align="center" style="height:300px;">
<h2 align="left" class="zd_two">员工信息</h2>
<input type="text" id="myInput" placeholder="搜索..."/><!-- onblur="myFunction()" -->
<span style="color:red;"> 回车键进行搜索~</span>
<table id="blocks" class="table table-striped" style="margin-top:5px">
<thead><!--summary="user infomation table" id="tableSort"-->
<tr>
<th onclick="$.sortTable.sort('blocks',0)" style="cursor: pointer;">会员ID</th>
<th onclick="$.sortTable.sort('blocks',1)" style="cursor: pointer;">会员名</th>
<th onclick="$.sortTable.sort('blocks',2)" style="cursor: pointer;">邮箱</th>
<th onclick="$.sortTable.sort('blocks',3)" style="cursor: pointer;">会员组</th>
<th onclick="$.sortTable.sort('blocks',4)" style="cursor: pointer;">城市</th>
<th onclick="$.sortTable.sort('blocks',5)" style="cursor: pointer;">注册时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>15632</td>
<td>sdfhHjg</td>
<td>este@126.com</td>
<td>银卡会员</td>
<td>河南</td>
<td>2017-06-12</td>
</tr>
<tr>
<td>3659</td>
<td>mnxbs</td>
<td>sloea@659.com</td>
<td>铂金会员</td>
<td>上海</td>
<td>2015-06-23</td>
</tr>
<tr>
<td>126</td>
<td>webw3c</td>
<td>este@126.com</td>
<td>普通会员</td>
<td>北京</td>
<td>2011-04-13</td>
</tr>
<tr>
<td>145</td>
<td>test001</td>
<td>test001@126.com</td>
<td>中级会员</td>
<td>合肥</td>
<td>2011-03-27</td>
</tr>
<tr>
<td>116</td>
<td>wuliao</td>
<td>wuliao@126.com</td>
<td>普通会员</td>
<td>南昌</td>
<td>2011-04-01</td>
</tr>
<tr>
<td>129</td>
<td>tired</td>
<td>tired@126.com</td>
<td>中级会员</td>
<td>北京</td>
<td>2011-04-06</td>
</tr>
<tr>
<td>155</td>
<td>tiredso</td>
<td>tireds0@126.com</td>
<td>中级会员</td>
<td>武汉</td>
<td>2011-04-06</td>
</tr>
<tr>
<td>131</td>
<td>javascript</td>
<td>js2011@126.com</td>
<td>中级会员</td>
<td>武汉</td>
<td>2011-04-08</td>
</tr>
<tr>
<td>1356</td>
<td>aaa</td>
<td>test@126.com</td>
<td>金卡会员</td>
<td>上海</td>
<td>2018-05-23</td>
</tr>
<tr>
<td>2563</td>
<td>jQuery</td>
<td>jQuery@126.com</td>
<td>高级会员</td>
<td>北京</td>
<td>2011-04-12</td>
</tr>
<tr>
<td>13d2</td>
<td>jQuery</td>
<td>wer@1d26.com</td>
<td>普通会员</td>
<td>重庆</td>
<td>2005-12-10</td>
</tr>
<tr>
<td>32433</td>
<td>5645</td>
<td>235sdfs@126.com</td>
<td>铂金卡会员</td>
<td>山东</td>
<td>2010-12-01</td>
</tr>
</tbody>
</table>
<div id="pagiDiv" align="right" style="width:95%">
<span id="spanFirst">First</span>
<span id="spanPre">Pre</span>
<span id="spanNext">Next</span>
<span id="spanLast">Last</span>
The <span id="spanPageNum"></span> Page/Total <span id="spanTotalPage"></span> Page
</div>
</div>
</body>
</html>JS 如下：
/*
* @Author: Marte
* @Date: 2018-10-23 17:40:57
* @Last Modified by: Marte
* @Last Modified time: 2018-10-23 18:12:04
*/
'use strict';
//禁止页面滚动
var numCount; //数据总数量
var columnsCounts; //数据列数量
var pageCount; //每页显示的数量
var pageNum; //总页数
var currPageNum ; //当前页数
//页面标签变量
var blockTable;
var preSpan;
var firstSpan;
var nextSpan;
var lastSpan;
var pageNumSpan;
var currPageSpan;
/**首页**/
function firstPage(){
hide();
currPageNum = 1;
showCurrPage(currPageNum);
showTotalPage();
for(var i = 1; i < pageCount + 1; i++){
blockTable.rows[i].style.display = "";
}
firstText();
preText();
nextLink();
lastLink();
}
/**前一页**/
function prePage(){
hide();
currPageNum--;
showCurrPage(currPageNum);
showTotalPage();
var firstR = firstRow(currPageNum);
var lastR = lastRow(firstR);
for(var i = firstR; i < lastR; i++){
blockTable.rows[i].style.display = "";
}
if(1 == currPageNum){
firstText();
preText();
nextLink();
lastLink();
}else if(pageNum == currPageNum){
preLink();
firstLink();
nextText();
lastText();
}else{
firstLink();
preLink();
nextLink();
lastLink();
}
}
/**下一页**/
function nextPage(){
hide();
currPageNum++;
showCurrPage(currPageNum);
showTotalPage();
var firstR = firstRow(currPageNum);
var lastR = lastRow(firstR);
for(var i = firstR; i < lastR; i ++){
blockTable.rows[i].style.display = "";
}
if(1 == currPageNum){
firstText();
preText();
nextLink();
lastLink();
}else if(pageNum == currPageNum){
preLink();
firstLink();
nextText();
lastText();
}else{
firstLink();
preLink();
nextLink();
lastLink();
}
}
/**尾页**/
function lastPage(){
hide();
currPageNum = pageNum;
showCurrPage(currPageNum);
showTotalPage();
var firstR = firstRow(currPageNum);
for(var i = firstR; i < numCount + 1; i++){
blockTable.rows[i].style.display = "";
}
firstLink();
preLink();
nextText();
lastText();
}
// 计算将要显示的页面的首行和尾行
function firstRow(currPageNum){
return pageCount*(currPageNum - 1) + 1;
}
function lastRow(firstRow){
var lastRow = firstRow + pageCount;
if(lastRow > numCount + 1){
lastRow = numCount + 1;
}
return lastRow;
}
function showCurrPage(cpn){
currPageSpan.innerHTML = cpn;
}
function showTotalPage(){
pageNumSpan.innerHTML = pageNum;
}
//隐藏所有行
function hide(){
for(var i = 1; i < numCount + 1; i ++){
blockTable.rows[i].style.display = "none";
}
}
//控制首页等功能的显示与不显示
function firstLink(){firstSpan.innerHTML = "<a href='javascript:firstPage();'>First</a>";}
function firstText(){firstSpan.innerHTML = "First";}
function preLink(){preSpan.innerHTML = "<a href='javascript:prePage();'>Pre</a>";}
function preText(){preSpan.innerHTML = "Pre";}
function nextLink(){nextSpan.innerHTML = "<a href='javascript:nextPage();'>Next</a>";}
function nextText(){nextSpan.innerHTML = "Next";}
function lastLink(){lastSpan.innerHTML = "<a href='javascript:lastPage();'>Last</a>";}
function lastText(){lastSpan.innerHTML = "Last";}
(function($){
//插件
$.extend($,{
//命名空间
sortTable:{
sort:function(tableId,Idx){
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var tr = tbody.rows;
var trValue = new Array();
for (var i=0; i<tr.length; i++ ) {
trValue[i] = tr[i]; //将表格中各行的信息存储在新建的数组中
}
if (tbody.sortCol == Idx) {
trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列
} else {
//trValue.sort(compareTrs(Idx)); //进行排序
trValue.sort(function(tr1, tr2){
var value1 = tr1.cells[Idx].innerHTML;
var value2 = tr2.cells[Idx].innerHTML;
return value1.localeCompare(value2);
});
}
var fragment = document.createDocumentFragment(); //新建一个代码片段，用于保存排序后的结果
for (var i=0; i<trValue.length; i++ ) {
fragment.appendChild(trValue[i]);
}
tbody.appendChild(fragment); //将排序的结果替换掉之前的值
tbody.sortCol = Idx;
}
}
});
})(jQuery);
到此，即可实现对页面表格内的数据进行分页、排序、搜索操作。
本文内所操作的数据是页面上写死的，也可以从后台取数据到页面拼接，下图可做参考：
整合后的代码有一个bug，如果模糊搜索的时候输入关键字为空，则回车查询出来的是把所有的内容显示出来，点了分页按钮后页面回复正常的分页显示。到此结束，多多指教^_^。
