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

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了~

(0)

相关推荐

  • 从零开始做一个pagination分页组件

    开始一个组件,毫无目的的写代码是一个不好的习惯,要经历 分析 => 抽象 => 实现 => 应用 四个阶段. 组件DEMO地址:https://github.com/CaptainLiao/zujian/tree/master/pagination 分析需求 当前页码显示前后三页,以及在两端显示上一页.下一页 未显示的地方用 '...'代替 举个栗子: 假设总共有30页 当前为第一页:1 2 3 4 ... 30 下一页 当前为第二页:上一页 1 2 3 4 5 ... 30 下一页 当

  • Jquery 分页插件之Jquery Pagination

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

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

  • jquery.pagination +JSON 动态无刷新分页实现代码

    aspx 页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

    原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

  • jquery.pagination.js 无刷新分页实现步骤分享

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(

  • jQuery EasyUI API 中文文档 - Pagination分页

    用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n

  • jquery pagination插件实现无刷新分页代码

    先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo

  • PHP框架Laravel插件Pagination实现自定义分页

    Laravel 的分页很方便,其实扩展起来也挺容易的,下面就来做个示例,扩展一下 paginate() 和 simplePaginate() 方法,来实现我们自定义分页样式,比如显示 "上一页" 和 "下一页" ,而不是 "<" 和 ">" ,当然扩展的方法掌握了你就可以肆无忌惮的扩展一个你想要的分页了,比如跳转到某一页,分页显示一共多少记录,当前显示的记录范围等等巴拉巴拉的... 5.1和5.2应该是同样的方法,

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

    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

  • jQuery插件pagination实现无刷新分页

    这篇文章我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页,使用jQuery pagination主要作用在于分页样式的显示,而无刷新的主要原理还是使用Ajax,具体看下文: 首先,我们引入jQuery文件.jQuery pagination文件和jQuery Templates文件. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquer

  • AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件,支持多样式多数据绑定

    本控件可以对GridView,Repeater,DataGrid,DataList...几乎所有的.net数据绑定控件进行分页,全部无刷新,数据绑定部分可以使用存储过程也可以直接使用sql语句,这对本控件没有任何干扰!本控件具有较好的用户界面,能够根据需要变换各种样式,配合css控制效果则更好! 1.分页样式效果图: 2.如何使用: 于bin目录下添加:AspNetAjaxPager.dll引用 aspx文件内容: 复制代码 代码如下: <%@ Page Language="C#"

  • jQuery插件jPaginate实现无刷新分页

    jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. PHP读取第一页数据: <div id="pagetxt"> <?php $query = mysql_query("select id,title,addtime from article order by id desc limit 0, 6"); while ($

  • 基于jQuery实现的无刷新表格分页实例

    本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica

  • jQuery实现的简单无刷新评论功能示例

    本文实例讲述了jQuery实现的简单无刷新评论功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无刷新评论 - www.jb51.net</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></scr

  • PHP+jQuery实现滚屏无刷新动态加载数据功能详解

    本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • 使用jQuery调用XML实现无刷新即时聊天

    HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用JQuery调用XML实现

  • jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页

    ******生成js分页脚****** ****没剑(2008-03-05)**** 修改日期:2008-3-12 添加两个参数:displaynum,displaylastNum可以自由定制显示的页码数量 参数: pagesize:10 //每页显示的页码数 ,count:0 //数据条数 ,css:"mj_pagefoot" //分页脚css样式类 ,current:1 //当前页码 ,displaynum:7 //中间显示页码数 ,displaylastNum:5 //最后显示的

随机推荐