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传数据,所以源码不能直接运行,仅供大家在写项目时进行参考作用。

点击下载









相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

HelianthusAugust

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值