Jquery简单分页实现方法

下面就为您详细讲解如何实现Jquery简单分页，并附上两个示例说明。

什么是Jquery简单分页？

在开发web应用时，数据的展示通常需要使用分页技术进行展示，这样可以减轻页面的加载压力，同时也能够更好地进行数据筛选和搜索。Jquery简单分页技术就是通过Jquery插件来实现的类似于“上一页”、“下一页”等按钮，用户可以通过点击这些按钮来查看更多的数据。

Jquery实现分页步骤

1.引入Jquery库文件和Jquery分页插件

在head标签中引入Jquery库文件和Jquery分页插件的js和css文件。

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.simplePagination.js/1.6/jquery.simplePagination.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.simplePagination.js/1.6/simplePagination.css" />
</head>

2.设置分页基本参数

在代码中设置分页的基本参数，比如每页显示几条数据、总共有多少页等等。

var perPage = 5; //每页显示5条数据
var currentPage = 1; //当前页数
var totalPage = 20; //总页数

3.生成分页按钮

使用Jquery分页插件来生成分页按钮，代码如下：

$('#pagination').pagination({
  totalPages: totalPage, //总页数
  visiblePages: 5, //显示页数
  prevText: '<', //上一页
  nextText: '>', //下一页
  onPageClick: function(page, event) { //点击页码事件
    loadTableData(page); //加载当前页数据
  }
});

4.加载数据并显示分页效果

实现loadTableData函数来加载数据，代码如下：

function loadTableData(page) {
  var requestData = {
    limit: perPage,
    page: page
  };
  //发送Ajax请求
  $.ajax({
    type: 'GET',
    url: 'https://api.example.com/data',
    dataType: 'json',
    data: requestData,
    success: function(response) {
      var start = (page - 1) * perPage;
      var dataToShow = response.data.slice(start, start + perPage);
      //渲染表格数据
      renderTable(dataToShow);
    }
  });
}

5.完整示例一

下面是一个简单的完整示例，可以根据具体需要进行修改和优化。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Jquery Simple Pagination</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.simplePagination.js/1.6/jquery.simplePagination.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.simplePagination.js/1.6/simplePagination.css" />
</head>

<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <div id="pagination"></div>

  <script type="text/javascript">
    //分页参数
    var perPage = 5;
    var currentPage = 1;
    var totalPage = 0;

    //初始化分页插件
    $('#pagination').pagination({
      totalPages: totalPage,
      visiblePages: 5,
      prevText: '<',
      nextText: '>',
      onPageClick: function(page, event) {
        loadTableData(page);
      }
    });

    //加载表格数据
    function loadTableData(page) {
      var requestData = {
        limit: perPage,
        page: page
      };

      $.ajax({
        type: 'GET',
        url: 'https://api.example.com/data',
        dataType: 'json',
        data: requestData,
        success: function(response) {
          var start = (page - 1) * perPage;
          var dataToShow = response.data.slice(start, start + perPage);
          totalPage = Math.ceil(response.total / perPage);
          $('#pagination').pagination('update', {//更新分页控件
            totalPages: totalPage,
            currentPage: page
          });
          renderTable(dataToShow);
        }
      });
    }

    //渲染表格数据
    function renderTable(data) {
      $('#data-table tbody').empty();
      $.each(data, function(index, item) {
        var row = '<tr>' +
          '<td>' + item.id + '</td>' +
          '<td>' + item.name + '</td>' +
          '<td>' + item.age + '</td>' +
          '</tr>';
        $('#data-table tbody').append(row);
      });
    }
    //默认加载第一页数据
    loadTableData(currentPage);
  </script>
</body>

</html>

6.完整示例二

下面是另一个完整示例，主要实现了分页按钮的样式自定义。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Jquery Simple Pagination with Style</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.simplePagination.js/1.6/jquery.simplePagination.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.simplePagination.js/1.6/simplePagination.css" />
  <style>
    .paginationjs-pages {
      display: inline-block;
      margin: 20px 0px;
      text-align: center;
    }

    .paginationjs-pages li {
      display: inline-block;
      margin-right: 5px;
      border: 1px solid #ddd;
      padding: 5px 10px;
      cursor: pointer;
      background-color: #fff;
    }

    .paginationjs-pages li.active {
      font-weight: bold;
      border: 1px solid #aaa;
      background-color: #aaa;
      color: #fff;
      cursor: default;
    }

    .paginationjs-pages li.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .paginationjs-prev,
    .paginationjs-next {
      display: inline-block;
      margin-right: 5px;
      border: 1px solid #ddd;
      padding: 5px 10px;
      cursor: pointer;
      background-color: #fff;
    }

    .paginationjs-prev.disabled,
    .paginationjs-next.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .paginationjs-prev {
      margin-right: 10px;
    }

    .paginationjs-next {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <div id="pagination"></div>

  <script type="text/javascript">
    //分页参数
    var perPage = 5;
    var currentPage = 1;
    var totalPage = 0;

    //初始化分页插件
    $('#pagination').pagination({
      totalPages: totalPage,
      visiblePages: 5,
      prevText: '<<',
      nextText: '>>',
      innerWindow: 2,
      outerWindow: 0,
      onPageClick: function(page, event) {
        loadTableData(page);
      },
      pageElementSort: ['$prev', 'num', 'num', 'num', 'num', '$next']//分页模板
    });

    //加载表格数据
    function loadTableData(page) {
      var requestData = {
        limit: perPage,
        page: page
      };

      $.ajax({
        type: 'GET',
        url: 'https://api.example.com/data',
        dataType: 'json',
        data: requestData,
        success: function(response) {
          var start = (page - 1) * perPage;
          var dataToShow = response.data.slice(start, start + perPage);
          totalPage = Math.ceil(response.total / perPage);
          $('#pagination').pagination('update', {
            totalPages: totalPage,
            currentPage: page
          });
          renderTable(dataToShow);
        }
      });
    }

    //渲染表格数据
    function renderTable(data) {
      $('#data-table tbody').empty();
      $.each(data, function(index, item) {
        var row = '<tr>' +
          '<td>' + item.id + '</td>' +
          '<td>' + item.name + '</td>' +
          '<td>' + item.age + '</td>' +
          '</tr>';
        $('#data-table tbody').append(row);
      });
    }
    //默认加载第一页数据
    loadTableData(currentPage);
  </script>
</body>

</html>

以上就是Jquery简单分页实现方法的完整攻略啦，希望能帮助到您。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery简单分页实现方法 - Python技术站