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

本文主要分为两个功能部分，分页用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传数据，所以源码不能直接运行，仅供大家在写项目时进行参考作用。

点击下载