Jquery 分页插件之Jquery Pagination


Posted in Javascript onAugust 25, 2015

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

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

今天分享一个功能比较强大的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参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下:

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

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

参数

使用举例

例如下面的使用代码:

$("#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="' + val.smallphotourl + '"></img></td>';
            html = html + ' <td class="left"><img width="80px" height="60px" src="' + val.bigphotourl + '"></img></td>'; 
            html = html + ' <td class="left">' + $.formatDate("yyyy-MM-dd HH:mm", data.begintime) + '</td>';
            html = html + ' <td class="left">' + $.formatDate("yyyy-MM-dd HH:mm", data.endtime) + '</td>';
            html = html + ' <td class="left">' + '<a href="#modal-form" onclick="SetHomeIndex(\'' + val.id + '\',\'' + val.title
              + '\');return false" class="btn btn-xs btn-success " data-toggle="modal"><i class="icon-key"></i>首页幻灯设置</a>' + '</td>';
            html = html + ' <td class="left">'; 
            if (oper == "list") {
              html = html + ' <a href="Add.aspx?RightID=0&Id=' + val.id + '" class="green" title="编辑"><i class="icon-edit bigger-130"></i></a> ';
              html = html + ' <a href="#" onclick="DeleteActive(\'' + val.id + '\',\'' + val.title + '\')" class="red" title="注销">';
              html = html + ' <i class="icon-trash bigger-130"></i></a>';
            }
            else if (oper == "msg") { 
              html = html + '  <input type="checkbox" onchange=\'SetCheckedPro("' + val.id + '","' + val.title + '");return false;\' id="seelctactive_' + val.id + '" value="' + val.title + '" />';
            }
            html = html + ' <a href="#" onclick="PreviewUrl(\'http://sq.huilife.cn/index.php?g=Wap&m=Homeactivity&de<a href="http://www.suchso.com/programmer/chengxuyuan-duanzi-bug-shangwang.html" class="keylink" title=" Bug修复" target="_blank">bug</a>=1&a=show&id=' + val.id + '\')" class="blue" title="查看"><i class="icon-zoom-in bigger-130"></i></a> ';
            html = html + ' </td></tr>'; 
          });
          $("#tBodyList").html(html);
          //设置分页
          if (currentPage == 1) {
            var initPagination = function () {
              // 创建分页
              $("#Pagination").pagination(allCount, {
                num_edge_entries: 1, //边缘页数
                num_display_entries: 2, //主体页数
                prev_text: "<<",
                next_text: ">>",
                callback: PageSelectCallback,
                items_per_page: pageSize //每页显示1项
              });
            }();
            currentPage = 100;
            if (allCount == 0) $('#divNumInfo').html("0-0条 共0条");
          }
        }
        else {
          alert("加载数据失败!"); return;
        }
      }
    },
    complete: function (XMLHttpRequest, textStatus) {
    },
    error: function (e) {
      alert("加载数据错误!"); return;
    }
  });
}

示例二:

Jquery Pagination插件代码:

<div id="page2" class="m-pagination"></div>
<script type="text/javascript">
//请求格式: .../GetPageData?query=test&pageIndex=0&pageSize=10
//返回数据: {"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的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
JS delegate与live浅析
Dec 21 Javascript
jquery 使用简明教程
Mar 05 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
js实现的tab标签切换效果代码分享
Aug 25 #Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 #Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 #Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 #Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 #Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 #Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 #Javascript
You might like
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
高一英语教学反思
2014/01/22 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
公司股东合作协议书
2014/09/14 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记