JS 分頁(yè)

PiscesYE 發(fā)布于2019-08-01 14:36 / 2387人閱讀

摘要：分頁(yè)函數(shù)頁(yè)數(shù)每頁(yè)顯示記錄數(shù)分頁(yè)部分是從真實(shí)數(shù)據(jù)行開始，因而存在加減某個(gè)常數(shù)，以確定真正的記錄數(shù)純分頁(yè)實(shí)質(zhì)是數(shù)據(jù)行全部加載，通過是否顯示屬性完成分頁(yè)功能表格行數(shù)總頁(yè)數(shù)每頁(yè)顯示行數(shù)當(dāng)前頁(yè)數(shù)開始顯示的行結(jié)束顯示的行前行始終顯示

/**
* 分頁(yè)函數(shù)
* pno--頁(yè)數(shù)
* psize--每頁(yè)顯示記錄數(shù)
* 分頁(yè)部分是從真實(shí)數(shù)據(jù)行開始，因而存在加減某個(gè)常數(shù)，以確定真正的記錄數(shù)
* 純js分頁(yè)實(shí)質(zhì)是數(shù)據(jù)行全部加載，通過是否顯示屬性完成分頁(yè)功能
**/

function goPage(pno,psize,strvar){

    var itable = document.getElementById("tableId");    
    var num = itable.rows.length;//表格行數(shù) 
    var totalPage = 0;//總頁(yè)數(shù)
    var pageSize = psize;//每頁(yè)顯示行數(shù)
    if((num-1)/pageSize > parseInt((num-1)/pageSize)){ 

        totalPage=parseInt((num-1)/pageSize)+1; 
    }else{ 
        totalPage=parseInt((num-1)/pageSize);
    }   

    var currentPage = pno;//當(dāng)前頁(yè)數(shù)

    var startRow = (currentPage - 1) * pageSize+1;//開始顯示的行   

   var endRow = currentPage * pageSize+1;//結(jié)束顯示的行   

   endRow = (endRow > num)? num : endRow;
    //前n行始終顯示

    for(i=0;i<1;i++){
        var irow = itable.rows[i];
        irow.style.display = "";
    }
    for(var i=1;i=startRow&&i共"+(num-1)+"條記錄 
共"+totalPage+"頁(yè) 
當(dāng)前第"+currentPage+"頁(yè)

";
    tempStr += "

";

if(currentPage>1){
    tempStr += "上一頁(yè)"

}else{
    tempStr += "上一頁(yè)";   
}

if(currentPage下一頁(yè)";

}else{
    tempStr += "下一頁(yè)";

}
if(currentPage>1){
    tempStr += "首頁(yè)";
}else{
    tempStr += "首頁(yè)";
}
if(currentPage尾頁(yè)";
}else{
    tempStr += "尾頁(yè)";
}
tempStr +="

";
    document.getElementById(strvar+"_pageStr").innerHTML = tempStr;
}

GPU云服務(wù)器云服務(wù)器 js分頁(yè) js分頁(yè)控件 JS分頁(yè)展示 js實(shí)現(xiàn)分頁(yè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/49472.html

相關(guān)文章

小程序分頁(yè)實(shí)踐：編寫可復(fù)用分頁(yè)組件

摘要：項(xiàng)目中遇到切換列表，每個(gè)都需要分頁(yè)的需求，分頁(yè)流程具有相似性，于是想將分頁(yè)封裝為組件，方便應(yīng)用。組件的復(fù)用完成了以上組件，在對(duì)其他分頁(yè)的頁(yè)面，可以直接復(fù)用。項(xiàng)目中遇到 tab切換列表，每個(gè)tab都需要分頁(yè)的需求，分頁(yè)流程具有相似性，于是想將分頁(yè)封裝為組件，方便應(yīng)用。組件的應(yīng)用已寫成一個(gè)小demo，效果如下圖所示（數(shù)據(jù)用mock模擬）： showImg(https://segment...

crelaber 2019-08-26 10:11 評(píng)論0 收藏0
一步步實(shí)現(xiàn)thinkphp上的ajax無(wú)刷新分頁(yè)

摘要：信息列表循環(huán)賦值分頁(yè)信息部分這一步是實(shí)現(xiàn)無(wú)刷新分頁(yè)的重點(diǎn)，用到了的通信，通過與數(shù)據(jù)庫(kù)的交互，將獲取到的數(shù)據(jù)寫到模板中，替換掉之前的數(shù)據(jù)集，達(dá)到分頁(yè)的目的。前言 thinkphp框架自帶的分頁(yè)類是每次翻頁(yè)都要刷新一下整個(gè)頁(yè)面，這種翻頁(yè)的用戶體驗(yàn)顯然是不太理想的，我們希望每次翻頁(yè)只刷新我們想要的數(shù)據(jù)集部分的數(shù)據(jù)，這樣我們很容易想到ajax異步通信，用ajax與數(shù)據(jù)庫(kù)（本人在開發(fā)過程中使用...

張遷 2019-06-27 14:04 評(píng)論0 收藏0
react中后臺(tái)管理界面

摘要：是一個(gè)用開發(fā)的一個(gè)企業(yè)級(jí)中后臺(tái)管理包含常用的業(yè)務(wù)，組件，及數(shù)據(jù)流轉(zhuǎn)方案，前后端分離的開發(fā)方式，按業(yè)務(wù)劃分的目錄結(jié)構(gòu)，可以大大提高我們的開發(fā)效率下面是整體的介紹，感興趣的同學(xué)可以去官網(wǎng)詳加了解。 dva-boot-admin 是一個(gè)用React開發(fā)的一個(gè)企業(yè)級(jí)中后臺(tái)管理UI,包含常用的業(yè)務(wù)，組件，及數(shù)據(jù)流轉(zhuǎn)方案，前后端分離的開發(fā)方式，按業(yè)務(wù)劃分的目錄結(jié)構(gòu)，可以大大提高我們的開發(fā)效率下面...

dongfangyiyu 2019-08-26 11:54 評(píng)論0 收藏0
JS 分頁(yè)

摘要：分頁(yè)函數(shù)頁(yè)數(shù)每頁(yè)顯示記錄數(shù)分頁(yè)部分是從真實(shí)數(shù)據(jù)行開始，因而存在加減某個(gè)常數(shù)，以確定真正的記錄數(shù)純分頁(yè)實(shí)質(zhì)是數(shù)據(jù)行全部加載，通過是否顯示屬性完成分頁(yè)功能表格行數(shù)總頁(yè)數(shù)每頁(yè)顯示行數(shù)當(dāng)前頁(yè)數(shù)開始顯示的行結(jié)束顯示的行前行始終顯示 /** * 分頁(yè)函數(shù) * pno--頁(yè)數(shù) * psize--每頁(yè)顯示記錄數(shù) * 分頁(yè)部分是從真實(shí)數(shù)據(jù)行開始，因而存在加減某個(gè)常數(shù)，以確定真正的記錄數(shù) * 純...

AlphaWatch 2019-08-19 14:40 評(píng)論0 收藏0
kPagination純js實(shí)現(xiàn)分頁(yè)插件

摘要：分頁(yè)插件純分頁(yè)插件，壓縮版本，樣式可以自定義使用方法當(dāng)前頁(yè)跳轉(zhuǎn)配置項(xiàng)選項(xiàng)類型說明可以顯示的按鈕個(gè)數(shù)是否顯示上一頁(yè)按鈕是否顯示下一頁(yè)按鈕是否顯示跳轉(zhuǎn)輸入框跳轉(zhuǎn)按鈕的文字頁(yè)面觸發(fā)回調(diào)重新渲染成功回調(diào)可選樣式選項(xiàng)說明分頁(yè)容器樣式按鈕容 kPagination分頁(yè)插件純js分頁(yè)插件，壓縮版本~4kb，樣式可以自定義 demo 使用方法 new kPagination({ ...

Sanchi 2019-08-26 12:09 評(píng)論0 收藏0