對(duì)table和ul實(shí)現(xiàn)js分頁(yè)示例分享
(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;
// 顯示頁(yè)碼
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)'>首頁(yè)</a><a href='javascript:void(0)'>上一頁(yè)</a><a href='javascript:void(0)'>下一頁(yè)</a><a href='javascript:void(0)'>尾頁(yè)</a></div>";
sPageStr += "<div class='txt'>"+"共"+Math.ceil(dCount / dCountOfPage)+"頁(yè),當(dāng)前第"+"<strong>"+dNowIndex+"</strong>"+"頁(yè)"+"</div>";
oObj.html(sPageStr);
dPageIndex = 1;
// 過(guò)濾表格內(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");
}
});
}
// 加入換頁(yè)事件
oObj.children().children().each(function() {
$(this).click(function() {
dNowIndex = $(this)[0].innerHTML;
if (dNowIndex == '首頁(yè)') {
dNowIndex = 1;
change_page_content();
nowIndex = dNowIndex;
}
if (dNowIndex == '尾頁(yè)') {
dNowIndex = Math.ceil(dCount / dCountOfPage);
change_page_content();
nowIndex = dNowIndex;
}
if (dNowIndex == '下一頁(yè)') {
if (nowIndex < Math.ceil(dCount / dCountOfPage)) {
dNowIndex = parseInt(nowIndex) + 1;
change_page_content();
nowIndex = nowIndex + 1;
}
}
if (dNowIndex == '上一頁(yè)') {
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>
- JS實(shí)現(xiàn)黑色風(fēng)格的網(wǎng)頁(yè)TAB選項(xiàng)卡效果代碼
- JS實(shí)現(xiàn)同一個(gè)網(wǎng)頁(yè)布局滑動(dòng)門(mén)和TAB選項(xiàng)卡實(shí)例
- 利用js制作html table分頁(yè)示例(js實(shí)現(xiàn)分頁(yè))
- 純css+js寫(xiě)的一個(gè)簡(jiǎn)單的tab標(biāo)簽頁(yè)帶樣式
- JavaScript實(shí)現(xiàn)兩個(gè)Table固定表頭根據(jù)頁(yè)面大小自行調(diào)整
- Extjs中TabPane如何嵌套在其他網(wǎng)頁(yè)中實(shí)現(xiàn)思路及代碼
- 網(wǎng)頁(yè)開(kāi)發(fā)中的容易忽略的問(wèn)題 javascript HTML中的table
- 基于JavaScript實(shí)現(xiàn)在新的tab頁(yè)打開(kāi)url
相關(guān)文章
js中apply()和call()的區(qū)別與用法實(shí)例分析
這篇文章主要介紹了js中apply()和call()的區(qū)別與用法,結(jié)合實(shí)例形式分析了apply()和call()的功能、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
原生js實(shí)現(xiàn)表單的正則驗(yàn)證(驗(yàn)證通過(guò)后才可提交)
這篇文章主要給大家介紹了關(guān)于如何利用原生js實(shí)現(xiàn)表單的正則驗(yàn)證,所有驗(yàn)證都通過(guò)后提交按鈕才可用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
JavaScript中兩個(gè)感嘆號(hào)的作用說(shuō)明
用兩個(gè)感嘆號(hào)的作用就在于,如果明確設(shè)置了o中flag的值(非null/undefined/0""/等值),自然test就會(huì)取跟o.flag一樣的值;如果沒(méi)有設(shè)置,test就會(huì)默認(rèn)為false,而不是null或undefined2011-12-12
js實(shí)現(xiàn)文本框中輸入文字頁(yè)面中div層同步獲取文本框內(nèi)容的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框中輸入文字頁(yè)面中div層同步獲取文本框內(nèi)容的方法,實(shí)例分析了javascript操作dom元素的技巧,需要的朋友可以參考下2015-03-03
基于Next.js實(shí)現(xiàn)在線Excel的詳細(xì)代碼
Next.js是一款React 開(kāi)發(fā)框架,它可以幫助我們構(gòu)建 React 應(yīng)用程序。作為一個(gè)輕量級(jí)React服務(wù)端渲染應(yīng)用框架,這篇文章主要介紹了基于?Next.js實(shí)現(xiàn)在線Excel,需要的朋友可以參考下2022-08-08
js實(shí)現(xiàn)帶關(guān)閉按鈕始終顯示在網(wǎng)頁(yè)最底部工具條的方法
這篇文章主要介紹了js實(shí)現(xiàn)帶關(guān)閉按鈕始終顯示在網(wǎng)頁(yè)最底部工具條的方法,是非常實(shí)用的javascript固定效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JS觸發(fā)事件event.target VS event.currentTarget實(shí)例
這篇文章主要介紹了JS觸發(fā)事件event.target VS event.currentTarget實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10

