JS實現表格分頁,排序,模糊搜尋
阿新 • • 發佈:2018-12-17
整個的功能分為三個部分,都是來自不同的前輩們貢獻的資源,整合在了一起,雖然還是有些繁瑣,但是可以使用^_^
模糊搜尋不記得來自哪裡了.....下面是整個的程式碼,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> [email protected]</td>
<td>銀卡會員</td>
<td>河南</td>
<td>2017-06-12</td>
</tr>
<tr>
<td>3659</td>
<td>mnxbs</td>
<td> [email protected]</td>
<td>鉑金會員</td>
<td>上海</td>
<td>2015-06-23</td>
</tr>
<tr>
<td>126</td>
<td>webw3c</td>
<td> [email protected]</td>
<td>普通會員</td>
<td>北京</td>
<td>2011-04-13</td>
</tr>
<tr>
<td>145</td>
<td>test001</td>
<td>[email protected]</td>
<td>中級會員</td>
<td>合肥</td>
<td>2011-03-27</td>
</tr>
<tr>
<td>116</td>
<td>wuliao</td>
<td>[email protected]</td>
<td>普通會員</td>
<td>南昌</td>
<td>2011-04-01</td>
</tr>
<tr>
<td>129</td>
<td>tired</td>
<td>[email protected]</td>
<td>中級會員</td>
<td>北京</td>
<td>2011-04-06</td>
</tr>
<tr>
<td>155</td>
<td>tiredso</td>
<td>[email protected]</td>
<td>中級會員</td>
<td>武漢</td>
<td>2011-04-06</td>
</tr>
<tr>
<td>131</td>
<td>javascript</td>
<td>[email protected]</td>
<td>中級會員</td>
<td>武漢</td>
<td>2011-04-08</td>
</tr>
<tr>
<td>1356</td>
<td>aaa</td>
<td>[email protected]</td>
<td>金卡會員</td>
<td>上海</td>
<td>2018-05-23</td>
</tr>
<tr>
<td>2563</td>
<td>jQuery</td>
<td>[email protected]</td>
<td>高階會員</td>
<td>北京</td>
<td>2011-04-12</td>
</tr>
<tr>
<td>13d2</td>
<td>jQuery</td>
<td>[email protected]</td>
<td>普通會員</td>
<td>重慶</td>
<td>2005-12-10</td>
</tr>
<tr>
<td>32433</td>
<td>5645</td>
<td>[email protected]</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,如果模糊搜尋的時候輸入關鍵字為空,則回車查詢出來的是把所有的內容顯示出來,點了分頁按鈕後頁面回覆正常的分頁顯示。到此結束,多多指教^_^。