当前位置：首页 > 行业动态 > 正文

jqPaginator是否支持CDN加速？如何配置？

admin
行业动态
2024-11-07
7

jqPaginator是一款基于jQuery的分页插件，可以通过CDN服务进行引入。

1、简介

项目背景：jqPaginator是一个基于jQuery的高度自定义分页插件，自2014年开源以来，已帮助无数开发者轻松实现分页功能。

项目特点：不受CSS框架限制，适用于各种风格网页；高度自定义的HTML结构，灵活应用于不同场景。

2、使用方法

引入库：需要先导入jQuery库和jqPaginator插件。

Markup

      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jqpaginator/1.2.1/jqPaginator.min.js"></script>

读入数据：通过Ajax方法实现分页数据的读取。

JavaScript

      $(function() {
          loadcancel();
          loadpage();
      });
      function fPageCount(sum, count) {
          return (sum % count == 0) ? sum / count : Math.ceil(sum / count);
      }
      function loadcancel(obj) {
          $.ajax({
              type: "post",
              url: "url",
              async: false,
              data: dataObj,
              dataType: "json",
              success: function(data) {
                  $('#tbody').empty(); // 清空tbody对象
                  var html = '';
                  var c = fPageCount(data.sum, rows);
                  pageCount = (c == 0) ? 1 : c;
                  if (data.sum > 0) {
                      $.each(data.list, function(index, item) {
                          html += '<tr><td>' + item['id'] + '</td></tr>';
                      });
                  } else {
                      html += '<tr><td style="text-align: center;" colspan="8">暂时没有数据</td></tr>';
                  }
                  $('#tbody').html(html);
              }
          });
      }
      function loadpage() {
          $.jqPaginator('#pagination', {
              totalPages: pageCount,
              visiblePages: 10,
              currentPage: dataObj.page,
              wrapper: '<ul class="pagination"></ul>',
              first: '<li class="first"><a href="javascript:void(0);">First</a></li>',
              prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',
              next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',
              last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',
              page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
              onPageChange: function (num, type) {
                  // 处理翻页逻辑
              }
          });
      }