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").