jquery插件pagination实现无刷新ajax分页


Posted in Javascript onSeptember 30, 2015

1、前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js

插件参数可以参考----张龙豪-jquery.pagination.js分页

下面贴出代码

/**
  * This jQuery plugin displays pagination links inside the selected elements.
  *
  * @author Gabriel Birke (birke *at* d-scribe *dot* de)
  * @version .
  * @param {int} maxentries Number of entries to paginate
  * @param {Object} opts Several options (see README for documentation)
  * @return {Object} jQuery Object
  */
 jQuery.fn.pagination = function(maxentries, opts){
   opts = jQuery.extend({
     items_per_page:,
     num_display_entries:,
     current_page:,
     num_edge_entries:,
     link_to:"#",
     prev_text:"Prev",
     next_text:"Next",
     ellipse_text:"...",
     prev_show_always:true,
     next_show_always:true,
     callback:function(){return false;}
   },opts||{});
   
   return this.each(function() {
     /**
      * 计算最大分页显示数目
      */
     function numPages() {
       return Math.ceil(maxentries/opts.items_per_page);
     }  
     /**
      * 极端分页的起始和结束点,这取决于current_page 和 num_display_entries.
      * @返回 {数组(Array)}
      */
     function getInterval() {
       var ne_half = Math.ceil(opts.num_display_entries/);
       var np = numPages();
       var upper_limit = np-opts.num_display_entries;
       var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), ):;
       var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
       return [start,end];
     }
     
     /**
      * 分页链接事件处理函数
      * @参数 {int} page_id 为新页码
      */
     function pageSelected(page_id, evt){
       current_page = page_id;
       drawLinks();
       var continuePropagation = opts.callback(page_id, panel);
       if (!continuePropagation) {
         if (evt.stopPropagation) {
           evt.stopPropagation();
         }
         else {
           evt.cancelBubble = true;
         }
       }
       return continuePropagation;
     }
     
     /**
      * 此函数将分页链接插入到容器元素中
      */
     function drawLinks() {
       panel.empty();
       var interval = getInterval();
       var np = numPages();
       // 这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
       var getClickHandler = function(page_id) {
         return function(evt){ return pageSelected(page_id,evt); }
       }
       //辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
       var appendItem = function(page_id, appendopts){
         page_id = page_id<?:(page_id<np?page_id:np-); // 规范page id值
         appendopts = jQuery.extend({text:page_id+, classes:""}, appendopts||{});
         if(page_id == current_page){
           var lnk = jQuery("<a href class='currentPage'>" + (appendopts.text) + "</a>");
         }else{
           var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
             .bind("click", getClickHandler(page_id))
             .attr('href', opts.link_to.replace(/__id__/,page_id));    
         }
         if (appendopts.classes) { lnk.addClass(appendopts.classes); }
         panel.append(lnk);
       }
       //产生描述
       panel.append("<span>共有 " + maxentries + " 条记录,当前第 <b>" + (current_page + ) + "</b>/" + np + " 页</span>");
       
       // 产生"Previous"-链接
       if(opts.prev_text && (current_page > || opts.prev_show_always)){
         appendItem(current_page-,{text:opts.prev_text, classes:"prev"});
       }
       // 产生起始点
       if (interval[] > && opts.num_edge_entries > )
       {
         var end = Math.min(opts.num_edge_entries, interval[]);
         for(var i=; i<end; i++) {
           appendItem(i);
         }
         if(opts.num_edge_entries < interval[] && opts.ellipse_text)
         {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
         }
       }
       // 产生内部的些链接
       for(var i=interval[]; i<interval[]; i++) {
         appendItem(i);
       }
       // 产生结束点
       if (interval[] < np && opts.num_edge_entries > )
       {
         if(np-opts.num_edge_entries > interval[]&& opts.ellipse_text)
         {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
         }
         var begin = Math.max(np-opts.num_edge_entries, interval[]);
         for(var i=begin; i<np; i++) {
           appendItem(i);
         }
         
       }
       // 产生 "Next"-链接
       if(opts.next_text && (current_page < np- || opts.next_show_always)){
         appendItem(current_page+,{text:opts.next_text, classes:"next"});
       }
     }
     
     //从选项中提取current_page
     var current_page = opts.current_page;
     //创建一个显示条数和每页显示条数值
     maxentries = (!maxentries || maxentries < )?:maxentries;
     opts.items_per_page = (!opts.items_per_page || opts.items_per_page < )?:opts.items_per_page;
     //存储DOM元素,以方便从所有的内部结构中获取
     var panel = jQuery(this);
     // 获得附加功能的元素
     this.selectPage = function(page_id){ pageSelected(page_id);}
     this.prevPage = function(){ 
       if (current_page > ) {
         pageSelected(current_page - );
         return true;
       }
       else {
         return false;
       }
     }
     this.nextPage = function(){ 
       if(current_page < numPages()-) {
         pageSelected(current_page+);
         return true;
       }
       else {
         return false;
       }
     }
     // 所有初始化完成,绘制链接
     drawLinks();
     // 回调函数
     //opts.callback(current_page, this);
   });
 }

代码还是比较容易看明白的,可以根据自己需要修改,这里使用的是自己的样式

样式代码

.pages {display: inline-block; overflow: hidden;padding: px ;text-align: center; width:%; margin:px ;}
 .pages b{ color:#ef;}
 .pages a { color:#; border: px solid #eee;cursor: pointer;font-size: px;margin-right: px; padding: px px; text-decoration: none; background-color:#fafafa;}
 .pages .currentPage{ background-color: #ae; border: px solid #ae;color: #fff; font-weight: bold;}

原来的css样式:

.pagination a {
   text-decoration: none;
   border: px solid #AAE;
   color: #B;
 }
 
 .pagination a, .pagination span {
   display: inline-block;
   padding: .em .em;
   margin-right: px;
   margin-bottom: px;
 }
 
 .pagination .current {
   background: #B;
   color: #fff;
   border: px solid #AAE;
 }
 
 .pagination .current.prev, .pagination .current.next{
   color:#;
   border-color:#;
   background:#fff;
 }

可以根据自己设计显示样式

2、使用方法

2.1、html显示

<div class="second-ul-ctn">
       <ul class="second-ul" id="ulProducts">
       </ul>
       <div class="pages">
         <input type="hidden" id="hideTotalCount" />
         <div id="Pagination" class="pagination">
         </div>
       </div>
     </div>

ulProducts中放的是要显示的数据,生成的分页的工具条是放在Pagination中的

2.2 javascript代码

$(function () {
      searchMyme(0);
      pageInit();
      $("#btnSearch").on("click", function () {
        searchMyme(0);
        pageInit();
        return false;
      });
    });
    function searchMyme(page, pageination) {
      var month = $("#btnMonth").val();
      var obj = {
        Month: month,
        OpType: "getme",
        page: (page + 1)
        , rows: 10
      };
      var url = "../../Controler/FinaceMo/GetStaffIncome_H.ashx";
      $.get(url, obj, function (data) {
        $("#tbIncome").empty();
        var obj = JSON.parse(data);
        var total = obj.Total;
        $("#hideTotalCount").val(total);
        var arrHtml = [];
        $.each(obj.Rows, function (i, data) {
          arrHtml.push("<tr><td>" + (i + 1) + "</td>");
          arrHtml.push("<td>" + data.Account + "</td>");
          arrHtml.push("<td>" + data.Name + "</td>");
          arrHtml.push("<td>" + data.Month + "</td>");
          arrHtml.push("<td>" + data.IncomeAmount + "</td>");
          arrHtml.push("<td><a href='MyDetail.aspx?Account="+data.Account+"&Month="+data.Month+"' class='a-blue'>查看明细</a></td></tr>");
        });
        $("#tbIncome").append(arrHtml.join(''));
      });
    };
    function pageInit() {
      var totalCount = $("#hideTotalCount").val();
      $("#Pagination").pagination(parseInt(totalCount), {
        items_per_page: 10,
        //current_page: 1,//当前选中的页面默认是0,表示第1页
        num_edge_entries: 2,//两侧显示的首尾分页的条目数,默认为0,好像是尾部显示的个数
        num_display_entries: 2,//连续分页主体部分显示的分页条目数,默认是10
        link_to: "javascript:void(0)",//分页的链接
        prev_text: "上一页",
        next_text: "下一页",
        prev_show_always: true,
        next_show_always: true,
        callback: searchMyIncome
      });
    }

searchMyme是获取分页的数据,将总数放到一个隐藏的控件中,总数分页控件需要使用,这里ajax调用需要同步执行,不然取不到返回的总数
pageInit() 就是初始化控件

这样设置基本就OK了~

Javascript 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
微信小程序云开发之数据库操作
May 18 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 #Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 #Javascript
js实现创建删除html元素小结
Sep 30 #Javascript
node.js下LDAP查询实例分享
Sep 30 #Javascript
Javascript中replace()小结
Sep 30 #Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 #Javascript
谈谈JavaScript异步函数发展历程
Sep 29 #Javascript
You might like
两个强悍的php 图像处理类1
2009/06/15 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
简单谈谈json跨域
2016/03/13 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python中装饰器学习总结
2018/02/10 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python xpath获取页面注释的方法
2019/01/14 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
如何真正的了解python装饰器
2020/08/14 Python
Python内置函数及功能简介汇总
2020/10/13 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
项目安全员岗位职责
2015/02/15 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
推荐信范文大全
2015/03/27 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL