jQuery分页插件的使用

jQuery分页插件的使用

一、jQuery分页插件的优缺点

• 优点：
  1. jQuery分页器的使用快捷简便。
  2. jQuery分页器很大程减少了开发过程中的工作量，引入相应html结构和js文件即可生成对应的结构样式。
• 缺点：
  1. 存在点击页面元素删除时会直接跳转首页的bug，需要使用时进行预处理。
  2. 分页器启动时自动触发了起始页的点击。

二、jQuery分页插件使用方式

第一步：下载相应的文件包 - jQuery.js/boostrapt.css/pagination.js

1、登录jQuery分页插件网站链接:link.下载文件包

(注意：把压缩文件包解压及查看核心文件，以下两份文件为方便操作可以直接复制粘贴到开发时的 js 文件夹即可）

2、jQuery分页的样式基于boostrapt框架会更美观，点击下载boostrapt文件包，点击 link 链接跳转

(里面有三个下载路径,下载第一个即可)

3、jQuery文件包下载网站: 点击链接
(jQuery 网站里面下载任意一个版本都可以,最好下载一点几的版本没有兼容问题)

或者 在 Github 下载相关的库 GIthub链接
(Github 下载界面及操作)

第二步：在页面中引入先前解压出来的 JS 文件 和 boostrapt 的 CSS 文件

// 两份文件最好整理在同一级文件内
//Boostrapt CSS文件引入
<link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
//src的路径根据开发时js文件的实际储存位置
<script src="./libs/twbsPagination/jquery.twbsPagination.js"></script> 
//jQuery 文件的引入
<script src="./libs/jQuery源文件/jquery-1.12.4.js"></script>

第三步：在HTML文件引入HTML结构标签

//html结构的引入
<ul id="pagination-demo" class="pagination-sm"></ul>

第四部：JavaScript 初始代码引入

 $('#pagination-demo').twbsPagination({
        totalPages: 35,//总页数的设置
        visiblePages: 7,//当前可视页数的设置
        first: '首页',//首页中文设置
        prev: '上一页',//上一页中文设置
        next: '下一页',//下一页中文设置
        last: '尾页',//尾页中文设置
        onPageClick: function (event, page) {
        //page 为当前点击页面码
            $('#page-content').text('Page ' + page);
        }
    });

第五步：页面结构显示

三、jQuery分页器存在缺点的解决

（这里用以前的一个小demo进行演示）

// ajax 是数据请求,而 getCommentList 函数是把ajax请求封装起来
function getCommentList(page = 1) {
    $.ajax({
    //请求方式
      type: "get",
      //路径 
      url: URL,
      //请求数据
      data: {
      //请求返回哪一页的数据,用变量 page 进行动态输入
        page: page,
        //每次请求返回的数据条数
        perpage: 10
      },
      dataType: "json",
      success(response) {
      //respons为返回数据,包含总页数totalPage、总数据数totalCount 等
      //对总数据数 totalCount 进行暴露到全局
        window.totalCount = response.data.totalCount
        if (response.code === 200) {
        //调用分页器函数
          getPagination(page, data.totalPage)
        }
      }
    });
  }
  getCommentList()

 //分页器
  const $pagination = $('#pagination-demo')
  function getPagination(startPage = 1, totalPage = 20) {
      //当总页数发生变化时,在开启构建新的分页器前把原先的分页器销毁掉
      $pagination.twbsPagination('destroy');
      $pagination.twbsPagination({
      //totalPages 分页器总页数的设置
      totalPages: totalPage,
      //startPage 分页器起始页的设置
      startPage: startPage,
      first: '首页',
      prev: '上一页',
      next: '下一页',
      last: '尾页',
      visiblePages: 7,
      onPageClick:(event, page) =>{
      //参数page为当前点击的页数,通过window可以将page暴露到全局,便于后续删除元素功能操作
        window.page = page
       //当前点击页面不为上一次的页面则调用请求函数进行数据刷新并渲染
        if (startPage !== page) {
          getCommentList(page)
        }
      }
    });
  }

//页面元素删除避免直接跳转首页以及尾页最后一条数据删除后往前跳一页的设置
  $('tbody').on('click', '.btn-delete', function () {//设置点击的事件委托
    const aId = $(this).attr('data-id')//获取对应元素的Id作为请求的数据
    $.ajax({
      type: "post",
      url: BigNew.comment_delete,
      data: {
        id: aId
      },
      dataType: "json",
      success(response) {
        if (response.code === 200) {
          alert(response.msg)
          //如果当前为尾页最后一条数据且总数据数不唯一,则对调用请求函数请求页面为(page - 1)的数据,
          //同时请求函数内调用的分页器函数也传递了(page - 1)作为起始页进行刷新
          //然后 return 函数不再往下走
          if (totalCount % 10 === 1 && totalCount !== 1) {
            getCommentList(page - 1)
            return;
          }
          //由于还不是页面最后一条数据.正常调用请求当前页面的数据
          getCommentList(page)
        }
      }
    });
  })