對table和ul實現(xiàn)js分頁示例分享
(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() {
// 取得資料筆數(shù)
dCount = oSource.children().children().length;
// 顯示頁碼
sPageStr = "<div class='ref'><a href='javascript:void(0)' id='fresh_"
+ fresh_id
+ "' onClick='fresh(this.id);' class='sx' style='color:#247AA9;'><span>刷新</span></a></div>";
sPageStr += " <div class='msdn'><a href='javascript:void(0)'>首頁</a><a href='javascript:void(0)'>上一頁</a><a href='javascript:void(0)'>下一頁</a><a href='javascript:void(0)'>尾頁</a></div>";
sPageStr += "<div class='txt'>"+"共"+Math.ceil(dCount / dCountOfPage)+"頁,當前第"+"<strong>"+dNowIndex+"</strong>"+"頁"+"</div>";
oObj.html(sPageStr);
dPageIndex = 1;
// 過濾表格內(nèi)容
var rr=oSource.children().children("tr");
oSource.children().children("tr").each(function() {
// ==2
if (dPageIndex >= (((dNowIndex - 1) * dCountOfPage) + 1)
&& dPageIndex <= ((dNowIndex * dCountOfPage) )) {
$(this).show();
} else {
$(this).hide();
}
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);
<script type="text/javascript">
$(document).ready( function() {
var totalPage=$("ul li").length;
var total = Math.ceil($("ul li").length / 5);
var current = 1;
//var index =4;
if(totalPage>5){
$("ul li:gt(4)").hide();
$("#btnPrev").attr("class", "tabs-scroller-left-disabled").attr("disabled", "disabled").click( function() {
debugger;
$("#btnNext").attr("class", "tabs-scroller-right");
$("#btnNext").removeAttr("disabled");
current -= 1;
var tt=current;
$("ul li").show();
var indexStart = (current - 1);
var indexEnd = indexStart + 4;
$("li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("ul")).hide();
if (current == 1){
$(this).attr("class", "tabs-scroller-left-disabled");
$(this).attr("disabled", "disabled");
}
});
$("#btnNext").click( function() {
debugger;
$("#btnPrev").attr("class", "tabs-scroller-left");
$("#btnPrev").removeAttr("disabled");
current += 1;
$("ul li").show();
var indexStart = (current - 1);
var indexEnd = current + 4 > $("ul li").length - 1 ? $("ul li").length - 1 : current +3;
$("li:lt(" + indexStart + "), li:gt(" + indexEnd +")", $("ul")).hide();
if (current+4 >= totalPage){
$(this).attr("class", "tabs-scroller-right-disabled");
$(this).attr("disabled", "disabled");
}
});
}else{
alert(1);
$("#btnPrev").attr("class", "tabs-scroller-left-disabled");
$("#btnNext").attr("class", "tabs-scroller-right-disabled");
}
});
</script>
相關文章
javascript獲取網(wǎng)頁中指定節(jié)點的父節(jié)點、子節(jié)點的方法小結
如何獲取要更新的這些元素呢?用JavaScript獲取這些節(jié)點的方法有很多種,下面是總結的一些方法,感興趣的朋友可以參考下哈2013-04-04javascript版的in_array函數(shù)(判斷數(shù)組中是否存在特定值)
這篇文章主要介紹了javascript版的in_array函數(shù)(判斷數(shù)組中是否存在特定值),需要的朋友可以參考下2014-05-05原生JavaScript實現(xiàn)精美的淘寶輪播圖效果示例【附demo源碼下載】
這篇文章主要介紹了原生JavaScript實現(xiàn)精美的淘寶輪播圖效果,結合完整實例形式詳細分析了javascript實現(xiàn)淘寶輪播圖功能的相關HTML布局、css及js核心功能代碼,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05妙用Bootstrap的 popover插件實現(xiàn)校驗表單提示功能
最近使用bootstrap開發(fā)項目比較多,在表單校驗功能中用popover插件實現(xiàn)出錯提示功能很方面,下面小編給大家?guī)砹艘黄P于Bootstrap的 popover插件實現(xiàn)校驗表單提示功能的實現(xiàn)代碼,非常不錯,感興趣的朋友一起看看吧2016-08-08