本文主要介绍了 js 对 table 和 ul li 实现前台分页, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- (function($) {
- $.fn.tablepage = function(oObj, dCountOfPage, fresh_id) {
- var dPageIndex = 1;
- var dNowIndex = 1;
- var sPageStr = "";
- var dCount = 0;
- var oSource = $(this);
- var sNoSelColor = "#CCCCCC";
- var sSelColor = "black";
- var sFontColor = "white";
- var nowIndex = 1;
change_page_content();
function change_page_content() {
// 取得資料筆數
dCount = oSource.children().children().length;
// 顯示頁碼
sPageStr = "
dPageIndex++;
});
// oSource.children().children("tr").first().show(); // head 一定要顯示
if(dCount<=dCountOfPage){
var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {
if(i==2||i==3||i==0||i==1){
$(this).addClass("disabled");
}
});
}
else if(dNowIndex==Math.ceil(dCount / dCountOfPage)){
var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {
if(i==2||i==3){
$(this).addClass("disabled");
}
});
}else if(dNowIndex==1){
var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {
if(i==0||i==1){
$(this).addClass("disabled");
}
});
}
// 加入換頁事件
oObj.children().children().each(function() {
$(this).click(function() {
dNowIndex = $(this)[0].innerHTML;
if (dNowIndex =='首页') {
dNowIndex = 1;
change_page_content();
nowIndex = dNowIndex;
}
if (dNowIndex =='尾页') {
dNowIndex = Math.ceil(dCount / dCountOfPage);
change_page_content();
nowIndex = dNowIndex;
}
if (dNowIndex =='下一页') {
if (nowIndex < Math.ceil(dCount / dCountOfPage)) {
dNowIndex = parseInt(nowIndex) + 1;
change_page_content();
nowIndex = nowIndex + 1;
}
}
if (dNowIndex =='上一页') {
if (nowIndex> 1) {
dNowIndex = parseInt(nowIndex) - 1;
change_page_content();
nowIndex = nowIndex - 1;
}
}
});
});
}
};
})(jQuery);
来源: