JS 分頁

AlphaWatch 發(fā)布于2019-08-19 14:40 / 2843人閱讀

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

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

function goPage(pno,psize,strvar){

    var itable = document.getElementById("tableId");    
    var num = itable.rows.length;//表格行數(shù) 
    var totalPage = 0;//總頁數(shù)
    var pageSize = psize;//每頁顯示行數(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)前頁數(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+"頁 
當(dāng)前第"+currentPage+"頁

";
    tempStr += "

";

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

}else{
    tempStr += "上一頁";   
}

if(currentPage下一頁";

}else{
    tempStr += "下一頁";

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78056.html

相關(guān)文章

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

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

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

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

張遷 2019-06-27 14:04 評論0 收藏0
react中后臺管理界面

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

dongfangyiyu 2019-08-26 11:54 評論0 收藏0
JS 分頁

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

PiscesYE 2019-08-01 14:36 評論0 收藏0
kPagination純js實(shí)現(xiàn)分頁插件

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

Sanchi 2019-08-26 12:09 評論0 收藏0