Jquery 分页插件之Jquery Pagination

实用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:

  
 <%--     --%>
      
   
      
      编号
      标题
缩略图 
    海报 社区
      商品 开始时间
      结束时间
      是否幻灯
      操作

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

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 + '';
     html = html + ' ' + val.id + '';
     html = html + ' ' + val.title + '';
     html = html + ' ';
     html = html + ' '; 
     html = html + ' ' + $.formatDate("yyyy-MM-dd HH:mm", data.begintime) + '';
     html = html + ' ' + $.formatDate("yyyy-MM-dd HH:mm", data.endtime) + '';
     html = html + ' ' + '首页幻灯设置' + '';
     html = html + ' '; 
     if (oper == "list") {
html = html + '  ';
html = html + ' ';
html = html + ' ';
     }
     else if (oper == "msg") { 
html = html + '  ';
     }
     html = html + ' bug=1&a=show&id=' + val.id + '')" class="blue" title="查看"> ';
     html = html + ' '; 
   });
   $("#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插件代码：

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

Jquery 分页插件之Jquery Pagination

JavaScript相关栏目本月热门文章