实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进。

有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式]。

今天分享一个功能比较强大的jquery分页插件:jquery.pagination。

Jquery 分页插件之Jquery Pagination

官方地址:http://esimakin.github.io/twbs-pagination/

简介与说明

此Jquery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。

原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位。

对原js文件注释进行了中文翻译,demo页面也是汉化了的,demo页面的js与原demo有一些出入,但核心不变。

使用方法

跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination,例如$("#page").pagination(100);,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下:

Jquery 分页插件之Jquery Pagination

还有一点值得一提的是分页列表需要放在class类为pagination的标签内,您可以使用text-align属性控制分页居中显示还是居右显示。

回调函数一般用来装载对应分页显示的内容,具体参见demo源文件。

参数

Jquery 分页插件之Jquery Pagination

使用举例

例如下面的使用代码:

$("#Pagination").pagination(56, {
  num_edge_entries: 2,
  num_display_entries: 4,
  callback: pageselectCallback,
  items_per_page:1
});

项目demo:

定义分页相关参数:

var pageSize = 10;
var allCount = 0;
var currentPage = 1;
var ajaxUrl = '../../Service/ActiceHandler.ashx';
var oper = "list";

html:

  <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                 <thead>
                   <tr> 
                    <th>编号</th>
                    <th>标题</th>
                     <th>缩略图</th> 
                         <th>海报</th>
               <%--     <th>社区</th>
                    <th>商品</th>--%>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>是否幻灯</th>
                    <th>操作</th>
                  </tr>
                 </thead>
                <tbody id="tBodyList">
                </tbody>
              </table>
              <div id="Pagination" class="row"></div>

获取数据并调用分页函数:

function GetList(pageIndex) {
  var searchName = $("#txtSearchName").val();
  var cityId = GetCity();
  var endTime;
  var beginTime;
  var communityName;
  var title;
  $.ajax({
    type: "post",
    dataType: 'json',
    url: ajaxUrl,
    data: {
      pageSize: pageSize,
      Operate: "list",
      currentPageIndex: pageIndex,
      endTime: $("#txtDeadTime").val(),
      Cityid: cityId,
      beginTime: $("#txtStartTime").val(),
      communityName: $("#txtsqname").val(),
      title: $("#txttitle").val()
    },
    success: function (data, textStatus) {
      if (data != null) {
        var model = eval(data);
        if (model != null && model != "undefined") {
          var data = eval(model.Instance);
          allCount = model.TotalCount;
          var html = '';
          ListActive = data;
          $.each(data, function (key, val) {
            html = html + '<tr>';
            html = html + ' <td width="100px" class="text-primary">' + val.id + '</td>';
            html = html + ' <td class="left">' + val.title + '</td>';
            html = html + ' <td class="left"><img width="80px" height="60px" src="/UploadFiles/2021-04-02/' + val.smallphotourl + '">

示例二:

Jquery Pagination插件代码:

<div id="page2" class="m-pagination"></div>
<script type="text/javascript">
//请求格式: .../GetPageData"data":[1,2,3,4,5,6,7,8,9,10],"total":800}
$("#page2").page({
  remote: {
    url: '/GetPageData', //请求地址
    params: { query: "test" },    //自定义请求参数
    beforeSend: function(XMLHttpRequest){
      //...
    },
    success: function (result, pageIndex) {
      //回调函数
      //result 为 请求返回的数据,呈现数据
    },
    complete: function(XMLHttpRequest, textStatu){
      //...
    }
    pageIndexName: 'pageIndex',   //请求参数,当前页数,索引从0开始
    pageSizeName: 'pageSize',    //请求参数,每页数量
    totalName: 'total'       //指定返回数据的总数据量的字段名
  }
});
</script>

以上内容是本文针对Jquery 分页插件之Jquery Pagination的全部叙述,希望大家喜欢。

标签:
jquery_pagination,jquery分页插件

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“Jquery 分页插件之Jquery Pagination”
暂无“Jquery 分页插件之Jquery Pagination”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。