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);  
    
}

评论

4 楼 lym6520 2010-01-07  

anywing 写道

请问页码所对应的链接具体是怎么产生的？
我的项目里面，每次点击一个页码都要重新到DAO层去取一页的数据，请问，我应该如何生成链接呢？

在例子中有个onClickPage方法，参数pageIndex就是当前页码了。你可以通过url跟参数或者更新form表单的隐藏字段来提交表单操作等。
如下：

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

3 楼 anywing 2010-01-06  

请问页码所对应的链接具体是怎么产生的？
我的项目里面，每次点击一个页码都要重新到DAO层去取一页的数据，请问，我应该如何生成链接呢？

2 楼 lym6520 2009-02-03  

bug修改：代码16行改成

fnParam[i] = "\"" + fnNameParams[i] + "\"";

这样就不会把字符串当做数字处理了，，，

1 楼 yeminping 2009-01-17