欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript分頁代碼實例分享(js分頁)

 更新時間:2013年12月13日 09:13:08   作者:  
這篇文章主要介紹了javascript分頁實例,大家參考使用吧

調(diào)用:

復(fù)制代碼 代碼如下:

var pageChange = function (index) {
            var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });
        }

實現(xiàn):

復(fù)制代碼 代碼如下:

pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {

     var theOpt = {
         barSize: 5, //分頁條顯示的頁碼數(shù)  
         barTemplate: "{bar}  共{totalPage}頁{totalCount}條 {goto}", //顯示模板
         autoHide: true, //是否自動隱藏
         showFirst: true, //在totalPage>barSize時是自動否顯示第一頁鏈接
         showLast: true, //在totalPage>barSize時是自動否顯示最后一頁鏈接
         showGoTo: true, //是否顯示GoTo
         autoHideGoTo: true //如果太少是否自動隱藏GoTo
     };

     if (opt) {
         if (opt.barSize)
             theOpt.barSize = opt.barSize;
         if (opt.barTemplate)
             theOpt.barTemplate = opt.barTemplate;
         if (opt.autoHide == false)
             theOpt.autoHide = false;
         if (opt.showFirst == false)
             theOpt.showFirst = false;
         if (opt.showLast = false)
             theOpt.showLast = false;
         if (opt.showGoTo == false)
             theOpt.showGoTo = false;
         if (opt.autoHideGoTo == false)
             theOpt.autoHideGoTo = false;
     }
     var handles = window.myPagerChanges = (function (x) { return x; } (window.myPagerChanges || {}));

     if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;

     var startPage = 0;  //分頁條起始頁
     var endPage = 0;    //分頁條終止頁
     var showFirst = true;
     var showLast = true;

 
     if (isNaN(pageIndex)) {
         pageIndex = 1;
     }
     pageIndex = parseInt(pageIndex);
     if (pageIndex <= 0)
         pageIndex = 1;
     if (pageIndex * pageSize > totalCount) {
         pageIndex = Math.ceil(totalCount / pageSize);
     }

     if (totalCount == 0) { //如果沒數(shù)據(jù)
         document.getElementById(divPager).innerHTML = "";
         return "";
     }

     var totalPage = Math.ceil(totalCount / pageSize);
     if (theOpt.autoHide && totalCount <= pageSize) {   //自動隱藏
         document.getElementById(divPager).innerHTML = "";
         return "";
     }

     if (totalPage <= theOpt.barSize) {
         startPage = 1;
         endPage = this.totalPage;
         theOpt.showLast = theOpt.showFirst = false;
     }
     else {
         if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //最前幾頁時
             startPage = 1;
             endPage = theOpt.barSize;
             theOpt.showFirst = false;
         }
         else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //最后幾頁時
             startPage = totalPage - theOpt.barSize + 1;
             endPage = totalPage;
             theOpt.showLast = false;
         }
         else {                                          //中間的頁時
             startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
             endPage = pageIndex + Math.floor(theOpt.barSize / 2);
         }
         if (totalPage <= (theOpt.barSize * 1.5)) {
             theOpt.showLast = theOpt.showFirst = false;
         }
     }

     function _getLink(index, txt) {
         if (!txt) txt = index;
         return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\"" + divPager + "\"](" + index + ")'>" + txt + "</a>";
     }

     var barHtml = "";  //分頁條
     barHtml += pageIndex == 1 ? "" : _getLink(pageIndex - 1, "上一頁");
     if (theOpt.showFirst) {
         barHtml += _getLink(1) + "<span>...</span>";
     }
     for (var index = startPage; index <= endPage; index++) {

         if (index == pageIndex) {
             barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
         }
         else {
             barHtml += _getLink(index);
         }
     }
     if (theOpt.showLast) {
         barHtml += "<span>...</span>" + _getLink(totalPage);
     }
     barHtml += pageIndex == totalPage ? "" : _getLink(pageIndex + 1, "下一頁");

     var gotoHtml = "";  //goto框及按鈕
     if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
         if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
             var txtid = divPager + "_goIndex";
             var indexVal = "document.getElementById(\"" + txtid + "\").value";
             gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\"" + divPager + "\"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'>";
             gotoHtml += " <input type='button' class='page_bg' value='go' onclick='myPagerChanges[\"" + divPager + "\"](" + indexVal + ")'>";
         }
     }

     //替換模板
     var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
                               .replace("{totalCount}", totalCount)
                               .replace("{pageIndex}", pageIndex)
                               .replace("{totalPage}", totalPage)
                               .replace("{goto}", gotoHtml);

     document.getElementById(divPager).innerHTML = pagerHtml;
     return pagerHtml;
 };

相關(guān)文章

  • TypeScript中命名空間與模塊化詳情

    TypeScript中命名空間與模塊化詳情

    這篇文章主要介紹了TypeScript中命名空間與模塊化詳情,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • javascript 關(guān)于賦值、淺拷貝、深拷貝的個人理解

    javascript 關(guān)于賦值、淺拷貝、深拷貝的個人理解

    關(guān)于賦值、淺拷貝、深拷貝,以前也思考良久,很多時候都以為記住了,但是,我太難了。今天我特地寫下筆記,希望可以完全掌握這個東西,也希望可以幫助到任何想對學(xué)習這個東西的同學(xué)
    2019-11-11
  • JavaScript實現(xiàn)獲取圖片文件真實格式的示例代碼

    JavaScript實現(xiàn)獲取圖片文件真實格式的示例代碼

    每種格式的圖片,都有自己特有的優(yōu)缺點以及數(shù)據(jù)結(jié)構(gòu),本篇博文的目的就是基于不同格式的圖像二進制數(shù)據(jù),獲取到圖片的真實格式,感興趣的可以了解一下
    2023-02-02
  • Javascript加載速度慢的解決方案

    Javascript加載速度慢的解決方案

    在網(wǎng)站里面會加載一些js代碼,統(tǒng)計啊,百度廣告等等,結(jié)果弄得頁面加載速度很慢,下面有個不錯的解決方法,大家可以參考下
    2014-03-03
  • 基于js實現(xiàn)逐步顯示文字輸出代碼實例

    基于js實現(xiàn)逐步顯示文字輸出代碼實例

    這篇文章主要介紹了基于js實現(xiàn)逐步顯示文字輸出代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下
    2020-04-04
  • JavaScript實現(xiàn)水平進度條拖拽效果

    JavaScript實現(xiàn)水平進度條拖拽效果

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)水平進度條拖拽效果的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • js實現(xiàn)表格的隔行變色和上下移動

    js實現(xiàn)表格的隔行變色和上下移動

    這篇文章主要為大家詳細介紹了js實現(xiàn)表格的隔行變色和上下移動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • JavaScript實現(xiàn)輪播圖效果

    JavaScript實現(xiàn)輪播圖效果

    這篇文章主要介紹了JavaScript實現(xiàn)輪播圖效果,幫助大家更好的理解和學(xué)習JavaScript,感興趣的朋友可以了解下
    2020-10-10
  • js異或加解密效果代碼

    js異或加解密效果代碼

    比較不錯的js異或加解密實例代碼,方便學(xué)習js加解密的朋友
    2008-06-06
  • 通過滑動翻頁效果實現(xiàn)和移動端click事件問題

    通過滑動翻頁效果實現(xiàn)和移動端click事件問題

    這篇文章主要介紹了滑動翻頁效果實現(xiàn)和移動端click事件問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-01

最新評論