jQuery 实现分页导航 v2.0（附demo）
今天整理了下之前写的分页导航条，感觉之前的那个很不灵活，执行方法传入的参数只能一个操作类型和一个当前页，想要多传入几个参数就比较麻烦，现在重新整理了下，并附上了demo，希望大家可以进来改进改进，共享资源！http://www.agoit.com/images/smiles/icon_arrow.gif/** * 分页导航条 * 09/01/17 * @author lym6520@qq.com* @verson v2.0 * @param {} fnName翻页时执行的函数名(传入的第一个参数必须是“当前页码”）) * @param {} fnNameParamsfnName函数的参数，数组形式（比如：var arr = new Array(); arr = 1;arr = "hello"） * @param {} pagetotal总页码 * @param {} totalItem总记录数 * @param {} showID页面显示分页导航条的divID */function pageNavigation(fnName, fnNameParams, pagetotal, totalItem, showID) { var fnParam = new Array(); //如果这样 fnParam = fnNameParams;两个都指向同一引用 for(var i = 0 ; i < fnNameParams.length; i++) fnParam = fnNameParams; var pageIndex = parseInt(fnNameParams);//当前页 // 无记录 if (pagetotal == 0) { $('#' + showID).empty();//清空翻页导航条 return; } // 分页 var front = pageIndex - 4;// 前面一截 var back = pageIndex + 4;// 后面一截 $('#' + showID).empty();//清空翻页导航条 // 页码链接 // 首页, 上一页 if (pageIndex == 1) { $('#' + showID).append("首页 上一页 "); } else { fnParam = 1 ; var fn = fnName + "(" + fnParam + ")"; //组装执行的函数var str = "<a href = 'javascript:" + fn + "'>首页</a> ";//创建连接$('#' + showID).append(str);fnParam = 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 = i; var fn = fnName + "(" + fnParam + ")"; //组装执行的函数 var str = "<a href = 'javascript:" + fn + "'>[" + i + "]</a>";//创建连接 $('#' + showID).append(str); } } } // 下一页, 尾页 if (pageIndex == pagetotal) { $('#' + showID).append("下一页 尾页 "); } else { fnParam = pageIndex + 1 ; var fn = fnName + "(" + fnParam + ")"; //组装执行的函数 var str = " <a href = 'javascript:" + fn + "'>下一页</a> ";//创建连接 $('#' + showID).append(str); fnParam = 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); }
页:
[1]