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 = '<table>'
      tableHtml += '<thead><tr>';
      tableHtml += '<th>序号</th>';
      tableHtml += '<th>uid</th>';
      tableHtml += '<th>姓名</th>';
      tableHtml += '<th>帮助人数</th>';
      tableHtml += '<th>主页访问量</th>';
      tableHtml += '<th>好评数</th>';
      tableHtml += '<th>待新增好评数</th>';
      tableHtml += '</tr></thead><tbody>';

      for (var i = 0; i < pageData.length; i++) {
        var row = pageData[i];
        tableHtml += '<tr>';
        tableHtml += '<td>' + row.id + '</td>';
        tableHtml += '<td>' + row.uid + '</td>';
        tableHtml += '<td>' + row.name + '</td>';
        tableHtml += '<td>' + row.hlepnum + '</td>';
        tableHtml += '<td>' + row.shownum + '</td>';
        tableHtml += '<td>' + row.goodnum + '</td>';
        tableHtml += '<td>' + row.goodshow + '</td>';
        tableHtml += '</tr>';
      }
      tableHtml += '</tbody></table>';

      $('#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 += '<span class="page ' + activeClass + '" data-page="' + i + '">' + i + '</span>';
      }
      $('#paginationContainer').html(pageHtml);
    }

    updatePagination();