jQuery+Ajax实现无刷新分页


Posted in Javascript onOctober 30, 2015

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

/**
  * This jQuery plugin displays pagination links inside the selected elements.
  *
  * @author Gabriel Birke (birke *at* d-scribe *dot* de)
  * @version 1.2
  * @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:10,
   num_display_entries:10,
   current_page:0,
   num_edge_entries:0,
   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/2);
     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), 0):0;
       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<0?0:(page_id<np?page_id:np-1); // 规范page id值
        appendopts = jQuery.extend({text:page_id+1, 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 + 1) + "</b>/" + np + " 页</span>");
       
      // 产生"Previous"-链接
       if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
         appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
       }
     // 产生起始点
       if (interval[0] > 0 && opts.num_edge_entries > 0)
       {
         var end = Math.min(opts.num_edge_entries, interval[0]);
         for(var i=0; i<end; i++) {
           appendItem(i);
         }
         if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
         {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
        }
       }
       // 产生内部的些链接
       for(var i=interval[0]; i<interval[1]; i++) {
         appendItem(i);
       }
      // 产生结束点
       if (interval[1] < np && opts.num_edge_entries > 0)
      {
         if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
        {
           jQuery("<a href>"+opts.ellipse_text+"</a>").appendTo(panel);
         }
         var begin = Math.max(np-opts.num_edge_entries, interval[1]);
         for(var i=begin; i<np; i++) {
           appendItem(i);
         }
        
       }
       // 产生 "Next"-链接
     if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
         appendItem(current_page+1,{text:opts.next_text, classes:"next"});
       }
      }
     
     //从选项中提取current_page
     var current_page = opts.current_page;
     //创建一个显示条数和每页显示条数值
    maxentries = (!maxentries || maxentries < 0)?1:maxentries;
     opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
     //存储DOM元素,以方便从所有的内部结构中获取
     var panel = jQuery(this);
     // 获得附加功能的元素
     this.selectPage = function(page_id){ pageSelected(page_id);}
     this.prevPage = function(){ 
       if (current_page > 0) {
         pageSelected(current_page - 1);
         return true;
       }
       else {
        return false;
      }
    }
    this.nextPage = function(){ 
      if(current_page < numPages()-1) {
        pageSelected(current_page+1);
       return true;
      }
      else {
        return false;
       }
    }
    // 所有初始化完成,绘制链接
   drawLinks();
     // 回调函数
     //opts.callback(current_page, this);
  });
}

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

样式代码:

.pages {display: inline-block; overflow: hidden;padding: 15px 0;text-align: center; width:100%; margin:50px 0;}
 .pages b{ color:#e75f49;}
 .pages a { color:#666; border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;margin-right: 5px; padding: 8px 12px; text-decoration: none; background-color:#fafafa;}
 .pages .currentPage{ background-color: #00a0e9; border: 1px solid #00a0e9;color: #fff; font-weight: bold;}

显示效果如下:

 jQuery+Ajax实现无刷新分页

原来的css样式:

.pagination a {
 text-decoration: none;
  border: 1px solid #AAE;
  color: #15B;
 }
 .pagination a, .pagination span {
  display: inline-block;
 padding: 0.1em 0.4em;
  margin-right: 5px;
 margin-bottom: 5px;
 }
 
.pagination .current {
 background: #26B;
 color: #fff;
 border: 1px solid #AAE;
 }
 .pagination .current.prev, .pagination .current.next{
  color:#999;
  border-color:#999;
  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 相关文章推荐
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 #Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 #Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 #Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 #Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 #Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 #Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 #Javascript
You might like
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python几种常见算法汇总
2020/06/02 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
暑假家长评语大全
2014/04/17 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
南极大冒险观后感
2015/06/05 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Tomcat用户管理的优化配置详解
2022/03/31 Servers