jQuery+json，分页显示数据列表，HTML+CSS，固定表头

来源：互联网发布：2015杭州旅游数据统计编辑：程序博客网时间：2024/05/18 07:51

本文主要分为两个功能部分，分页用table显示数据+固定table的表头，网上有很多两者的示例，当时看完一些发现都不太符合项目的需求，于是自己动手改了下。

先介绍分页功能。

1、分页功能。

网上有大量的分页示例，有些做的也很漂亮，一部分是用纯jQuery、HTML结合CSS写的，另一部分是使用相关的UI组件库，例如jqwidgets（一般大型项目中用的多），需要先去它的官网下载相关的包文件，放进项目工程中，再参照官网的API文档根据需求引用和使用。本文重点介绍前种情况，后种情况简要介绍。

1.1 jQuery获取json数据，实现分页。

首先，为了减少前端代码冗余度，后端服务端传过来的json数据是每一页要显示的内容，设置页数为pageNum，前端只要读取pageNum页，即可获取json传过来要显示在表格中的pageNum的内容。在JS文件中jQuery获取json数据的方法如下，printRecord(); 为调用的功能函数。而("/webgis/admin/logs/")这一段代码需要根据后台服务端写的服务来确定，就看写后台服务的同志怎么写了，pageResult是获取到的传过来的数据，拿到数据后即可使用：

 $.getJSON("/webgis/admin/logs/" + pageNum, function(pageResult) {            printRecord(pageResult);        });

其次，分页栏以5页为一个单位，实现分页功能的html代码如下：

<div id="pageGro" class="cb">   <div class="pageUp"> << </div>   <div class="pageList">      <ul>      <li>1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <li>5</li>      </ul>   </div>   <div class="pageDown">>></div></div>

jQuery主要代码如下，主要包括6个部分，我们知道，在页码变化时，分页栏和页面都会做响应变化，分页栏变化函数page_icon(page, count, eq);页面变化函数pageGroup(pageNum, pageCount);在点击页码时候的响应、点击“上一页”的响应、点击“下一页”的响应。

（1）点击页码，响应：

//点击分页按钮触发        $("#pageGro li").live("click", function() {            if (pageCount > 5) {                var pageNum = parseInt($(this).html()); //获取当前页数                pageGroup(pageNum, pageCount);            } else {                page_icon(1, pageCount, 0);                $(this).addClass("on");                $(this).siblings("li").removeClass("on");                var pageNum = parseInt($(this).html()); //获取当前页数                pageGroup(pageNum, pageCount);            }        });

（2）点击上一页，响应：

//点击上一页触发        $("#pageGro .pageUp").click(function() {            if (pageCount > 5) {                var pageNum = parseInt($("#pageGro li.on").html()); //获取当前页                if (pageNum == 1) {                } else {                    pageGroup(pageNum - 1, pageCount);                }            } else {                var index = $("#pageGro ul li.on").index(); //获取当前页                if (index > 0) {                    $("#pageGro li").removeClass("on"); //清除所有选中                    $("#pageGro ul li").eq(index - 1).addClass("on"); //选中上一页                }            }        });

（3）点击下一页，响应：

 //点击下一页触发        $("#pageGro .pageDown").click(function() {            if (pageCount > 5) {                var pageNum = parseInt($("#pageGro li.on").html()); //获取当前页                if (pageNum == pageCount) {} else {                    pageGroup(pageNum + 1, pageCount);                }            } else {                var index = $("#pageGro ul li.on").index(); //获取当前页                if (index + 1 < pageCount) {                    $("#pageGro li").removeClass("on"); //清除所有选中                    $("#pageGro ul li").eq(index + 1).addClass("on"); //选中上一页                }            }        });

（4）页面跳转，读者可结合下面的page_icon()，自行研究下里面的switch结构：

//点击跳转页面function pageGroup(pageNum, pageCount) {    if (pageCount > 5) {        switch (pageNum) {            case 1:                page_icon(1, 5, 0);                break;            case 2:                page_icon(1, 5, 1);                break;            case pageCount - 1:                page_icon(pageCount - 4, pageCount, 3);                break;            case pageCount:                page_icon(pageCount - 4, pageCount, 4);                break;            default:                page_icon(pageNum - 2, pageNum + 2, 2);                break;        }    } else {        switch (pageNum) {            case 1:                page_icon(1, pageCount, 0);                break;            case 2:                page_icon(1, pageCount, 1);                break;            case 3:                page_icon(1, pageCount, 2);                break;            case 4:                page_icon(1, pageCount, 3);                break;            case 5:                page_icon(1, pageCount, 4);                break;        }    }    printRecord(pageResult);}

（5）分页栏变化：

//根据当前选中页生成页面点击按钮function page_icon(page, count, eq) {    var ul_html = "";    for (var i = page; i <= count; i++) {        ul_html += "<li>" + i + "</li>";    }    $("#pageGro ul").html(ul_html);    $("#pageGro ul li").eq(eq).addClass("on");}

（6）printRecord(pageResult);

将传过来的数组赋给recordArray，并读取数组中的字段，constrHtmlTbody是构造table中的一行，通过for循环，则构造多行constrHtmlTbody，并放入数组printRecordArray中，并将printRecordArray放入前端id为itemContainer的tbody中，即可生成table的格式进行展示：

    var recordArray = pageResult;    var printRecordArray = [];    for (var i = 0; i < recordArray.length; i++) {        var userId = pageResult[i].userId;        var action = pageResult[i].action;        constrHtmlTbody = '<tr><td style=\"width:20%;\">' + userId + '</td>' + '<td  style=\"width:20%;\">' + action + '</td></tr>';        printRecordArray.push(constrHtmlTbody);    }    $("#itemContainer").html(constrHtmlTbody);

还有一种情况是当页码不足5页时的情况，所以在调用函数前，需要一个判断：

//根据总页数判断，如果小于5页，则显示所有页数，如果大于5页，则显示5页。根据当前点击的页数生成        if (pageCount > 5) {            page_icon(1, 5, 0);        } else {            page_icon(1, pageCount, 0);        }

1.2 效果截图如下：

1.3 使用jqwidgets模块中的分页和固定表头的功能：http://www.jqwidgets.com/

参考官网API写代码。

2、固定表头功能。类似的功能为：

2.1 如若使用jqwidgets模块，效果如最后的表格展示：http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm?search=

2.2 HTML+CSS来写。

这种技巧性和挑战性在于在不断的F12页面调试中找到适合和相对满意的效果，还要考虑用户的各种查看习惯，例如缩小浏览器窗口等，写的效果还适不适应浏览器窗体。下面展示我在调试过程中最后选择的效果。不多说了，上html代码如下：

<div style="height:26px;position:relative;">     <table class="table table-striped table-bordered table-hover"  style="position:absolute;word-break:break-word;">          <thead>             <tr>                <th style="width:20%">用户ID</th>                <th style="width:20%">组件名称</th>             </tr>         </thead>     </table></div><div style="overflow-y:overlay;margin-top: 10px;height:550px;position:relative;">     <table id="imIpPool111" class="table table-striped table-bordered table-hover" style="word-break:break-word;" >           <tbody id="itemContainer" > </tbody>      </table></div>

这段代码，一个table的组成是：一个<div>下的<thead>+一个<div>下的<tbody>。巧妙处在于表头<thead>处在的table的上一级<div>的position设置为relative而该table的position设置为absolute，这样就能使得表头固定。

3.分页部分的html：

 <div style="height:26px;position:relative;">     <table class="table table-striped table-bordered table-hover" style="position:absolute;word-break:break-word;">       <thead>           <tr>             <th >用户ID</th>             <th >组件名称</th>           </tr>       </thead>     </table></div><div style="overflow-y:overlay;margin-top: 10px;height:550px;position:relative;">     <table id="imIpPool111" class="table table-striped table-bordered table-hover" style="word-break:break-word;" >       <tbody id="itemContainer" > </tbody>      </table></div><div id="pageGro">   <div class="pageUp"> << </div>   <div class="pageList">      <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>4</li>       <li>5</li>      </ul>    </div>    <div class="pageDown">>></div></div>

4.JS源码以及css源码下载：

由于涉及到后台json传数据，所以源码不能直接运行，仅供大家在写项目时进行参考作用。

点击下载

1 0