1. 程式人生 > >JS實現表格分頁,排序,模糊搜尋

JS實現表格分頁,排序,模糊搜尋

 整個的功能分為三個部分,都是來自不同的前輩們貢獻的資源,整合在了一起,雖然還是有些繁瑣,但是可以使用^_^

模糊搜尋不記得來自哪裡了.....下面是整個的程式碼,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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回車鍵進行搜尋~</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,如果模糊搜尋的時候輸入關鍵字為空,則回車查詢出來的是把所有的內容顯示出來,點了分頁按鈕後頁面回覆正常的分頁顯示。到此結束,多多指教^_^。