jquery table实现分页

jquery table实现分页

介绍

在网页开发中，经常会使用表格来展示数据，如果数据量比较大时，通常需要将数据拆解成多个段落，进行分页展示。

准备

在开始之前需要在HTML中导入jQuery库。

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

实现步骤

步骤	描述
1	请求加载要渲染的数据
2	初始化分页
3	根据当前分页的页数和页的数量展示对应的数据
4	改变页码，数据也随之更新数据
5	更新分页信息

1、加载数据

首先，先请求加载获取展示的数据结构。

	// 根据数据模拟数组对象
    var data = [
      { id: 1, uid: 11, name: '律师1', hlepnum: 111, shownum: 101, goodnum: 100, goodshow: 103 },
      { id: 2, uid: 22, name: '律师2', hlepnum: 222, shownum: 202, goodnum: 200, goodshow: 203 },
      // 更多数据...
    ];

2、初始化分页

在HTML中，添加一个显示表格的容器和一个显示分页的容器。

  <!--表格容器-->
  <div id="tableContainer"></div>

  <!--分页容器 -->
  <div class="page-main" id="paginationContainer"></div>

在JavaScript中，定义需要的一些变量来初始化分页相关的信息。

    // 分页相关变量
    var page = 1; // 当前页码
    var pageSize = 3; // 每页显示的条数
    var totalPages = Math.ceil(data.length / pageSize); // 一共有多少页

3、根据当前分页的页数和页的数量展示对应的数据

根据当前页码和每页显示条数，来显示对应的数据。
使用jQuery的 .slice() 方法来实现数据的切片。

    // 显示当前页的数据
    function showPageData() {
      var start = (page - 1) * pageSize;
      var end = start + pageSize;
      var pageData = data.slice(start, end);

      console.log(pageData);

      // 数据渲染
      var tableHtml = ''
      tableHtml +='';
      tableHtml +='';
      tableHtml +='';
      tableHtml +='';
      tableHtml +='';
      tableHtml +='';
      tableHtml +='';
      tableHtml +='';
      tableHtml +='';for(var i =0; i < pageData.length; i++){var row = pageData[i];
        tableHtml +='';
        tableHtml +='';
        tableHtml +='';
        tableHtml +='';
        tableHtml +='';
        tableHtml +='';
        tableHtml +='';
        tableHtml +='';
        tableHtml +='';}
      tableHtml +='
 
 
序号
 
uid
 
姓名
 
帮助人数
 
主页访问量
 
好评数
 
待新增好评数
 


         
         
 
' + row.id + '
 
' + row.uid + '
 
' + row.name + '
 
' + row.hlepnum + '
 
' + row.shownum + '
 
' + row.goodnum + '
 
' + row.goodshow + '
 
       
';

      $('#tableContainer').html(tableHtml);
    }
    // 初始化，执行
    showPageData();

4、切换页码

给分页容器绑定事件，便于用户点击页码时能够切换到对应的页数。
将使用jQuery的 .on() 方法来绑定事件。

    // 切换页码，执行数据更新
    function changePage(num) {
      page = num;
      showPageData();
      updatePagination();
    }

    // 绑定分页容器，实现分页点击
    $('#paginationContainer').on('click', '.page', function () {
      var page = parseInt($(this).attr('data-page'));
      changePage(page);
    });

5、更新分页数据

跟进当前页码和总页数来动态生成分页HTML。

    // 分页信息处理
    function updatePagination() {
      var pageHtml = '';
      for (var i = 1; i <= totalPages; i++) {
        var activeClass = (page === i) ? 'active' : '';
        pageHtml += '+ activeClass + '" data-page="' + i + '">' + i + '';
      }
      $('#paginationContainer').html(pageHtml);
    }

    updatePagination();