jQuery 实现分页导航 v2.0（附demo）

今天整理了下之前写的分页导航条，感觉之前的那个很不灵活，执行方法传入的参数只能一个操作类型和一个当前页，想要多传入几个参数就比较麻烦，现在重新整理了下，并附上了demo，希望大家可以进来改进改进，共享资源！

/**
 * 分页导航条
 * 09/01/17
 * @author [e-mail] 
 * @verson v2.0
 * @param {} fnName			翻页时执行的函数名(传入的第一个参数必须是“当前页码”）)
 * @param {} fnNameParams		fnName函数的参数，数组形式（比如：var arr = new Array(); arr[0] = 1;arr[1] = "hello"）
 * @param {} pagetotal			总页码
 * @param {} totalItem			总记录数
 * @param {} showID			页面显示分页导航条的div  ID
 */
function pageNavigation(fnName, fnNameParams, pagetotal, totalItem, showID) {   
    var fnParam = new Array();
    //如果这样 fnParam = fnNameParams;两个都指向同一引用
    for(var i = 0 ; i < fnNameParams.length; i++)
        fnParam[i] = fnNameParams[i];
           
     var pageIndex = parseInt(fnNameParams[0]);//当前页
       
    // 无记录  
    if (pagetotal == 0) {   
        $('#' + showID).empty();//清空翻页导航条   
        return;   
    }   
    // 分页   
    var front = pageIndex - 4;// 前面一截   
    var back = pageIndex + 4;// 后面一截   
    
    $('#' + showID).empty();//清空翻页导航条   
       
    // 页码链接   
    // 首页, 上一页   
    if (pageIndex == 1) {   
        $('#' + showID).append("首页 上一页 ");   
    } else {
        fnParam[0] = 1 ;
        var fn = fnName + "(" + fnParam + ")"; //组装执行的函数  
		var str = "<a href = 'javascript:" + fn + "'>首页</a> ";//创建连接
		$('#' + showID).append(str);
		
		fnParam[0] = pageIndex - 1 ;
	    var fn = fnName + "(" + fnParam + ")"; //组装执行函数         		
		var str = "<a href = 'javascript:" + fn + "'>上一页</a> ";//创建连接
		$('#' + showID).append(str);	         
    }   
  
    if (pagetotal == 1) {   
        $('#' + showID).append("1 ");   
    }   
    // 如果当前页是5,前面一截就是1234,后面一截就是6789   
    if (pagetotal > 1) {   
        var tempBack = pagetotal;   
        var tempFront = 1;   
        if (back < pagetotal)   
            tempBack = back;   
        if (front > 1)   
            tempFront = front;   
        for (var i = tempFront; i <= tempBack; i++) {   
            if (pageIndex == i) {   
                var str = " " + i + " ";   
                $('#' + showID).append(str);   
            } else {   
                fnParam[0] = i;
                var fn = fnName + "(" + fnParam + ")"; //组装执行的函数   
                var str = "<a href = 'javascript:" + fn + "'>[" + i + "]</a>";//创建连接   
                $('#' + showID).append(str);   
            }   
        }   
    }   
  
    // 下一页, 尾页   
    if (pageIndex == pagetotal) {   
        $('#' + showID).append("下一页 尾页 ");   
    } else {   
        fnParam[0] = pageIndex + 1 ;
        var fn = fnName + "(" + fnParam + ")"; //组装执行的函数   
        var str = " <a href = 'javascript:" + fn + "'>下一页</a> ";//创建连接   
        $('#' + showID).append(str);           
           
        fnParam[0] = pagetotal ;
        var fn = fnName + "(" + fnParam +  ")"; //组装执行的函数   
        var str = "<a href = 'javascript:" + fn + "'> 尾页 </a> ";//创建连接   
        $('#' + showID).append(str);           
    }   
       
    // 红色字体显示当前页   
    var str = "<font color = 'red'>" + pageIndex +"</font>";       
    $('#' + showID).append(str);   
       
    // 斜线"/"   
    $('#' + showID).append("/");   
       
    // 蓝色字体显示总页数   
    var str = "<font color = 'blue'>" + pagetotal +"</font>";      
    $('#' + showID).append(str);  
    
}

评论

24 楼 anywing 2010-01-15  

我的问题解决了，还是用的http://lym6520.iteye.com/blog/540580 插件，结合自己的变量，使用了location.href,后来又遇到一些url编码的问题，但是现在总算搞定，谢谢楼主。

23 楼 lym6520 2010-01-15  

anywing 写道

是的，页码状态是改变了，但是页面没有翻转啊，我怎么让页码状态改变的同时，页面也刷新呢？

pagebar('pageN',arr,10,100,'showDiv');  这个函数的pageN是函数名,点击翻页的时候就是调用这个函数的。arr是个数组，其中第一个参数是当前页码，其他参数是你执行pageN函数需要用到的参数，这个就你自己定义了。

22 楼 anywing 2010-01-15  

是的，页码状态是改变了，但是页面没有翻转啊，我怎么让页码状态改变的同时，页面也刷新呢？

21 楼 lym6520 2010-01-15  

anywing 写道

楼主，我再问一下，我现在不用你后来提供的插件（因为我不太会使用$.post），我就用《jQuery 实现分页导航 v2.0（附demo）》该帖子提供的代码，我如何加入自己生成的链接，来进行页面跳转呢?
上帖中，点击页码只是调用函数使得出现了页码的动态变化的效果，但是并没有页面的翻页。

之前写的那个不是很好用的，改变页码状态只要传入当前页码就可以了，看下面js

function pageN(){
    var arr = new Array();
    for(var i = 0 ; i < pageN.arguments.length ; i++){
        arr[i] = pageN.arguments[i];
    }
    pagebar('pageN',arr,10,100,'showDiv');
}

var arr = new Array();
arr[0] = 1;
pageN(arr);

其中arr[0]就带表当前页码了。

20 楼 anywing 2010-01-14  

楼主，我再问一下，我现在不用你后来提供的插件（因为我不太会使用$.post），我就用《jQuery 实现分页导航 v2.0（附demo）》该帖子提供的代码，我如何加入自己生成的链接，来进行页面跳转呢?
上帖中，点击页码只是调用函数使得出现了页码的动态变化的效果，但是并没有页面的翻页。

19 楼 lym6520 2010-01-13  

http://lym6520.iteye.com/blog/540580

18 楼 lym6520 2010-01-13  

anywing 写道

比如：服务器返回的数据是什么它是json类型的吗？那我需要做一些什么配置？

这个就看你对擅长操作哪种数据类型了，要是我的话会选择json，很容易操作。

17 楼 anywing 2010-01-13  

比如：服务器返回的数据是什么它是json类型的吗？那我需要做一些什么配置？

16 楼 lym6520 2010-01-13  

到哪个地方卡壳了啊？

15 楼 anywing 2010-01-12  

还是没有搞定。。。。。

14 楼 lym6520 2010-01-09  

jQuery.post(url,parameters,function(data){

//data就是服务器返回的数据，在这里操作
},'json')

13 楼 anywing 2010-01-08  

我想通过jQuery.post(url,parameters,callback,'json')来做，可是callback函数应该怎么写呢？

12 楼 lym6520 2010-01-08  

anywing 写道

我只对查询的结果进行更新，请问我如何通过传递pageIndex到后台调出的数据

有两种方式：
一种是通过重新定义分页导航条的初始化数据，改变初始化参数currentPage的值，也就是整个页面刷新；还有一种就是通过onClickPage方法ajax调用，将返回的结果重新在前台展示，当然这需要通过脚本控制。

11 楼 anywing 2010-01-07  

我只对查询的结果进行更新，请问我如何通过传递pageIndex到后台调出的数据

10 楼 lym6520 2010-01-07  

在google app上弄的一个简单留言板应用了分页导航条：http://yz6520.appspot.com
你们可以参考下。

9 楼 lym6520 2010-01-07  

anywing 写道

嗯，我刚刚在另外一个帖子里看到了楼主的最新版本，就是我想知道如何通过更新form表单的隐藏字段来提交表单操作，或者我如何触发Action调用DAO层的分页结果。也就是我已经使用了楼主的插件，但是现在我如何通过点击链接，获得我所请求的页面的数据。

也是在下面这个方法中处理的，当然如果你是整个页面刷新的话，通过改变设置的初始化参数来初始化分页条：

 onClickPage : function(pageIndex){  
                 $.fn.setCurrentPage(this,pageIndex);  
                 //这里进行ajax异步数据处理  
                 //通过提交表单，或着使用location.href 
                 //在这里处理相应的内容更新
              }  

8 楼 anywing 2010-01-07  

嗯，我刚刚在另外一个帖子里看到了楼主的最新版本，就是我想知道如何通过更新form表单的隐藏字段来提交表单操作，或者我如何触发Action调用DAO层的分页结果。也就是我已经使用了楼主的插件，但是现在我如何通过点击链接，获得我所请求的页面的数据。

7 楼 lym6520 2010-01-07  

anywing 写道

还有，我在例子里面没看到onClickPage方法

这个是调用分页导航条插件的方法，你可以在我的例子中看到。

6 楼 anywing 2010-01-07  

还有，我在例子里面没看到onClickPage方法

5 楼 anywing 2010-01-07  

恩，我就是打算通过更新form表单的隐藏字段来提交表单操作，请问能否再讲的具体一些，谢谢