JS实现表格分页，排序，模糊搜索

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量2k 收藏 7
点赞数 3
分类专栏： JS 文章标签： JS 页面排序 页面分页 模糊搜索
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xf_turbo/article/details/83311192
版权

 整个的功能分为三个部分，都是来自不同的前辈们贡献的资源，整合在了一起，虽然还是有些繁琐，但是可以使用^_^

分页的资源来自：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;">&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>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，如果模糊搜索的时候输入关键字为空，则回车查询出来的是把所有的内容显示出来，点了分页按钮后页面回复正常的分页显示。到此结束，多多指教^_^。

xf_turbo
关注
专栏目录
bootstrap-table表格如何实现分页，并可以模糊搜索
qq_52959651的博客
11-27 1643
bootstrap-table表格如何实现分页，并可以模糊搜索，删除指定的一行 这是实现效果 引入文件 <link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" /> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> <script src="../js/jquery.js"
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
js实现表格分页
龙马的猫
07-05 2392
js实现表格分页，可点击按钮跳转，也可输入页数跳转
用JavaScript实现分页功能
最新发布
qq_52530691的博客
07-01 1841
用JavaScript实现分页功能
js实现漂亮表格+分页排序功能
塵风的blog
09-11 654
TinyTable JavaScript Table Sorter This updated table sorter script is easy to use and feature packed at only 2.5KB. New features include column highlighting, optional pagination, support for links...
js表格，可实现，分页、查询等操作
10-17
js表格，可实现客户端，分页、查询等操作,
JS 实现简单的Table表格分页效果（假分页）
热门推荐
足迹
08-21 1万+
单纯的JS实现分页
jQuery动态表格数据分页检索排序代码
04-08
这个项目“jQuery动态表格数据分页检索排序代码”提供了一个纯前端实现的解决方案，无需服务器端的支持，使得用户可以更加便捷地浏览和管理大量数据。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
09-01
在本项目中，我们利用SpringMVC作为后端框架，Bootstrap作为前端UI库，以及DataTables插件来实现一个功能完善的表格展示系统，包括服务端分页和模糊查询功能。以下将详细介绍这些技术的整合与应用。 1. SpringMVC：...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
03-20
它支持数据分页、排序、搜索（模糊查询）等功能，通过Ajax方式与服务器进行交互，获取和显示数据。在前端页面上，DataTables可以帮助我们创建交互式、响应式的数据表格。 4. **数据分页** 数据分页是处理大量数据...
如何从 0 到 1 实现一个支持排序、查找、分页的表格组件（React版）
前端达人
11-10 1097
我们每天有可能都在与数据列表打交道，比如列表的分页、查找列表（搜索查询）、按照指定的列升序降序排列这些需求，你可能再尝试使用 react-tableorAnt Design table...
利用js制作html table分页示例(js实现分页)
10-26
主要介绍了利用js制作html table的分页示例(js实现分页),需要的朋友可以参考下
JS代码实现table数据分页效果
11-24
第一个：实现的很常见很简单的显示页数翻页 　　　　　效果图： •这是HTML代码，很简单滴（我好像看到了被嫌弃的小眼神） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> [removed][removed] [removed][removed] <link rel="stylesheet" href="js/demo.css"/> <title></title> </head> <body> <table width="" border
Js特效 表格分页排序
12-26
1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数； 5. 排序数据支持数据类型自动识别（这点很强大）。例如：整型数据、浮点型数据、字母、电话号码、日期、链接 6. 表格外观样式可通过CSS灵活定制 7. 所需要引用的js文件非常小巧，压缩版仅2.5k 8. 使用非常简单，可进行参数配置 1. 该功能在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过。 2. 排序数据不支持中文数据，这是一个缺陷
js+xml表格，实现排序分页功能
12-15
js,xml生成table，实现分页，任意移动列，列排序等功能
js分页，JavaScript表格复制，js复制表格，带搜索功能
05-25
JavaScript表格复制，js复制表格，JavaScript，js，表格，复制，表格复制
在 JavaScript 中为任何表格添加分页
allway2的博客
04-02 1830
分页是每个人都讨厌在他们的网站上实现的那些事情之一，并且在数据大小需要它之前我们会避免这样做。或者直到页面太长以至于滚轮断开并且浏览器崩溃。并且有充分的理由。通常，这是一项有些乏味且不必要的复杂任务。但是一项非常需要的繁琐而复杂的任务。以下脚本旨在一劳永逸地处理 HTML 表格的所有客户端分页。 要详细了解分页逻辑的工作原理，请随时查看我的博客文章。 只要它有助于您的编码之旅，请随意使用它并以您希望的任何方式进行修改。我只想问，如果你这样做的话，你会以我的方式说些客气话。 在我们开始之前，如果您对
vue项目中通过js实现分页，模糊搜索，表格、文件的下载，时间戳格式转换，数据小数点保留两位，电话号码、手机号码、邮箱号，url地址的正则处理等方法，屏幕适配，axios拦截器！
qq_66180056的博客
02-06 734
前端通过js实现分页，模糊搜索，表格、文件的下载，时间戳格式转换，数据小数点保留两位，电话号码、手机号码、邮箱号，url地址的正则处理等方法，屏幕适配，axios拦截器
原生JS实现排序和分页的代码
云淡风轻、仅此一抹
07-05 3423
原生JS实现排序和分页的代码 代码下载地址：http://www.zuidaima.com/share/1550463246568448.htm
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值