找一个Jquery 分页 插件

要求 :
1.能进行ajax分页
2.多个分页导航条可以同步(比如说有一个表格 表格顶部和底部都有一个可以控制这个表格内容分页的导航条, 当头部点到第二页后,底部的索引也变成第二页)
3.有直接跳转页面的跳转下拉框或者输入框

解决方案 »

  1.   

    网上有很多ajax分页，可以找个模版，再进行修改
    你的要求上下都有导航，必须自己添加。以前写2个分页功能的给朋友，一个一次性获取，另外一个分页请求。但是没有 直接跳转页面的跳转下拉框或者输入框
      

  2.   

    <!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>首页</title>
    <style>
    .pagernumber {
    margin: 0 auto;
    color: #666;
    clear: both;
    font: 12px;
    clear: both;
    height: 25px;
    line-height: 25px;
    padding: 20px 0;
    }.pagernumber a {
    color: #666;
    -moz-border-radius: 2px 2px 2px 2px;
    text-decoration: none;
    font-family: arial;
    font-size: 12px;
    height: 15px;
    line-height: 15px;
    overflow: hidden;
    padding: 2px 6px;
    }.pagenum_cur {
    color: white!important;
    background: #33559B;
    }.pagernumber a:hover {
    color: white;
    text-decoration: none;
    background: #83B3F2;
    }
    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="batchPage.js" type="text/javascript"></script>
    <script type="text/javascript">
    $().ready(function()
    {
    new BatchPage($("#test"), 10, function(target,pageNo,pageSize)
    {
    $.ajax({
       type: "POST",
       url: "http://localhost:8080/zzonline-webapp/test!test.action",
       data: "startIndex="+((pageNo-1)*pageSize+1)+"&endIndex="+ pageNo*pageSize,//此处进行批量获取的起止下标
       success: function(msg){
       msg = $.parseJSON(msg);
     var totalCount = msg.totalCount;//获取批量获取数据的总数据大小，以展示多少页
     var list = msg.list;//获取此次批量数据的列表
     target.setPageData(totalCount,list,pageNo,pageSize);//这里进行对target的回调，以使BatchPage对象能获取到您刚刚获取的数据，才能进行数据展示
    }
    });
    },function(list,start,end)
    {
    alert("该页的数组数据：="+list.length + "； 批量请求开始下标start="+start + "； 批量请求结束下标end="+end);
    var show = $("#show").empty();
    var content = "";
    for(var i=0; i<list.length;i++)
    {
    content += "<tr><td>"+ list[i] +"</td></tr>"

    }
    show.append(content);
    });
    })
     
    </script>
    </head><body>
    <table id="show"></table>
        <div id="test"></div>
    </body>
    </html>
      

  3.   


    //batchpage.js// JavaScript Documentfunction BatchPage($div, pageSize, requestFunction , resultCallback)
    {
    this.$div = $div; this.requestFunction = requestFunction || function(target,pageNo,pageSize)
    {
    /* 此处进行ajax请求获取数据，使用者需覆盖此方法，即提供requestFunction参数值，requestFunction方法写法与此相似，copy此方法再修改url及参数.
     *  至于为什么BatchPage中不对此功能进行封装，因为如果这样则在下面的ajax回调中msg须提供默认的数据格式，考虑到数据的多样性如msg.data.list，有其不便性
     */
    $.ajax({
       type: "POST",
       url: "test.php",
       data: "startIndex="+(pageNo-1)*pageSize+"&endIndex="+ pageNo*pageSize,//此处进行批量获取的起止下标
       success: function(msg){
     var totalCount = msg.totalCount;//获取批量获取数据的总数据大小，以展示多少页
     var list = msg.list;//获取此次批量数据的列表
     target.setPageData(totalCount,list,pageNo,pageSize);//这里进行对target的回调，以使BatchPage对象能获取到您刚刚获取的数据，才能进行数据展示
    }
    });
    };
    this.list = [];
    this.pageSize = pageSize;
    this.resultCallback = resultCallback || function(){};
    this.$div.empty();
    this.$div.append('<div id="pager" class="pagernumber" onselectstart="return false;" style="-moz-user-select:none;"><span id="pageContent"></span></div>');
    this.$content = this.$div.find("#pageContent"); 
    this.requestFunction(this, 1, this.pageSize);//主动获取数据
    }BatchPage.prototype.refresh = function()
    {
    this.totalPages = Math.ceil(this.totalCount / this.pageSize);
    /*this.pageNo = 0;
    if(this.totalPages)
    {
    this.pageNo = 1;
    }*/
    this.showPage(this.pageNo);
    }BatchPage.prototype.setPageData = function(totalCount,list,pageNo,pageSize)
    {
    this.totalCount = totalCount;
    this.list = list;
    this.pageNo = pageNo;
    this.pageSize = pageSize;
    this.refresh();
    }BatchPage.prototype.showPage = function(pageNo)
    {
    if(pageNo > this.totalPages || pageNo <= 0)
    {
    return;
    }
    this.pageNo = pageNo;
    var start = 1;
    var end = 1;
    if(pageNo > 5 && this.totalPages > 9)
    {
    end = pageNo + 4 > this.totalPages? this.totalPages:pageNo + 4;
    start = end - 9;
    }
    else
    {
    end = this.totalPages > 9?9:this.totalPages;
    }
    this.$content.empty();
    this.$content.append('<a style="cursor: pointer;" value="1">首页</a>');
    this.$content.append('<a style="cursor: pointer;" value="*1">上一页</a>');
    for(var i=start; i<=end; i++)
    {
    if(this.pageNo == i)
    {
    this.$content.append('<a style="cursor: pointer;" class="pagenum_cur" value="'+i+'">'+i+'</a>');
    }
    else
    {
    this.$content.append('<a style="cursor: pointer;" value="'+i+'">'+i+'</a>');
    }
    }
    this.$content.append('<a style="cursor: pointer;" value="**1">下一页</a>');
    this.$content.append('<a style="cursor: pointer;" value="'+this.totalPages+'">尾页</a>');
    this.bindEvent();
    var startIndex = (this.pageNo-1)*this.pageSize;
    var endIndex = this.pageNo*this.pageSize;
    this.resultCallback(this.list,startIndex, endIndex);
    }BatchPage.prototype.bindEvent = function()
    {
    this.$content.find("a").click((function(obj)
    {
    return function()
    {
    var $this = $(this); 
    var pageNo = $this.attr("value") || 0;
    if(pageNo == "*1")
    {
    pageNo = obj.pageNo - 1;
    }
    else if(pageNo == "**1")
    {
    pageNo = obj.pageNo + 1;
    }
    else
    {
    pageNo = new Number(pageNo).valueOf();
    }
    if((pageNo-1)*obj.pageSize >= obj.totalCount || pageNo <= 0)
    {
    return;
    }
    obj.requestFunction(obj, pageNo, obj.pageSize);
    }
    })(this));
    }