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();

你可能感兴趣的:(html,jquery,前端,javascript)