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 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
使用js实现数据格式化
Dec 03 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
jQuery each函数源码分析
May 25 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
对vuex中getters计算过滤操作详解
Nov 06 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+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
wxPython学习之主框架实例
2014/09/28 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
代理班主任的自我评价
2014/02/04 职场文书
电钳工人个人求职信
2014/05/10 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL