HTML頁表分頁沒有顯示頁面頂部

Question

我有一個頁面的工作代碼叫做： oneSimpleTablePagination（見下文），需要一些幫助。如果我轉到第2頁或第3頁，第4頁等，它將始終在頁面的底部顯示新頁面。我需要每一頁（2,3,4 ...）始終顯示在頁面頂部。所以如果我點擊下一頁，我需要從頂部顯示這個頁面，而不是從底部顯示。

任何想法如何修改這整個代碼來做到這一點？謝謝

/** 
* OneSimpleTablePaging 
* - A small piece of JS code which does simple table pagination. 
* It is based on Ryan Zielke's tablePagination 
* which is licensed under the MIT licenses 
* Button designs are based on Google+ Buttons in CSS design from Pixify 
* (http://pixify.com/blog/use-google-plus-to-improve-your-ui/). 
* 
* @author Chun Lin (GCL Project) 
* 
* 
* @name oneSimpleTablePagination 
* @type jQuery 
* @param Object userConfigurations: 
*  rowsPerPage - Number - used to determine the starting rows per page. Default: 10 
*  topNav - Boolean - This specifies the desire to have the navigation be a top nav bar 
* 
* 
* @requires jQuery v1.2.3 or above 
*/ 
$("html").scrollTop(0); 

$.prototype.extend(

        { 
     'oneSimpleTablePagination': function(userConfigurations) { 
      var defaults = { 
       rowsPerPage : 20, 
       topNav : false 
      }; 
      defaults = $.extend(defaults, userConfigurations); 

      return this.each(function() { 
       var table = $(this)[0]; 

       var currPageId = '#tablePagination_currPage'; 

       var tblLocation = (defaults.topNav) ? "prev" : "next"; 

       var tableRows = $.makeArray($('tbody tr', table)); 

       var totalPages = countNumberOfPages(tableRows.length); 

       var currPageNumber = 1;  

       function hideOtherPages(pageNum) { 
        var intRegex = /^\d+$/; 
        if (!intRegex.test(pageNum) || pageNum < 1 || pageNum > totalPages) 
         return; 
        var startIndex = (pageNum - 1) * defaults.rowsPerPage; 
        var endIndex = (startIndex + defaults.rowsPerPage - 1); 
        $(tableRows).show(); 
        for (var i = 0; i < tableRows.length; i++) { 
         if (i < startIndex || i > endIndex) { 
          $(tableRows[i]).hide(); 
         } 
        } 
       } 

       function countNumberOfPages(numRows) { 
        var preTotalPages = Math.round(numRows/defaults.rowsPerPage); 
        var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages; 
        return totalPages; 
       } 

       function resetCurrentPage(currPageNum) { 
        var intRegex = /^\d+$/; 
        if (!intRegex.test(currPageNum) || currPageNum < 1 || currPageNum > totalPages) 
         return; 
        currPageNumber = currPageNum; 
        hideOtherPages(currPageNumber); 
        $(table)[tblLocation]().find(currPageId).val(currPageNumber); 
       } 

       function createPaginationElements() { 
        var paginationHTML = ""; 
        paginationHTML += "<div id='tablePagination' style='text-align: center; border-top: solid 2px #0033CC; padding-top: 5px; padding-bottom: 5px;'>"; 
        paginationHTML += "<a id='tablePagination_firstPage' href='javascript:;' class='button left'>prvá</a>"; 
        paginationHTML += "<a id='tablePagination_prevPage' href='javascript:;' class='button right'>predošlá</a>"; 
        paginationHTML += "Strana "; 
        paginationHTML += "<input id='tablePagination_currPage' type='input' value='" + currPageNumber + "' size='1'>"; 
        paginationHTML += " z " + totalPages + "&nbsp;&nbsp;&nbsp;"; 
        paginationHTML += "<a id='tablePagination_nextPage' href='javascript:;' class='button left'>ďalšia</a>"; 
        paginationHTML += "<a id='tablePagination_lastPage' href='javascript:;' class='button right'>posledná</a>"; 
        paginationHTML += "</div>"; 
        return paginationHTML; 
       } 

       $(this).before("<style type='text/css'>a.button {color: #023042;font: bold 12px Helvetica, Arial, sans-serif;text-decoration: none;padding: 7px 12px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s;background: #99CCFF;background: -webkit-gradient(linear,0% 40%,0% 70%,from(#38C1F9),to(#C6EDFD));background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#38C1F9),to(#C6EDFD));border: solid 1px #023042;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;margin-right: 10px;}a.button:hover {color: #247FCA;border-color: #247FCA;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}a.button:active {color: #000;border-color: #444;}a.left {-webkit-border-top-right-radius: 0;-moz-border-radius-topright: 0;border-top-right-radius: 0;-webkit-border-bottom-right-radius: 0;-moz-border-radius-bottomright: 0;border-bottom-right-radius: 0;margin: 0;}a.right:hover { border-left: solid 1px #999 }a.right {-webkit-border-top-left-radius: 0;-moz-border-radius-topleft: 0;border-top-left-radius: 0;-webkit-border-bottom-left-radius: 0;-moz-border-radius-bottomleft: 0;border-bottom-left-radius: 0;border-left: solid 1px #f3f3f3;border-left: solid 1px rgba(255, 255, 255, 0);}</style>"); 

       if (defaults.topNav) { 
        $(this).before(createPaginationElements()); 
       } else { 
        $(this).after(createPaginationElements()); 
       } 

       hideOtherPages(currPageNumber); 

       $(table)[tblLocation]().find('#tablePagination_firstPage').click(function (e) { 
        resetCurrentPage(1); 
       }); 

       $(table)[tblLocation]().find('#tablePagination_prevPage').click(function (e) { 
        resetCurrentPage(parseInt(currPageNumber) - 1); 
       }); 

       $(table)[tblLocation]().find('#tablePagination_nextPage').click(function (e) { 
        resetCurrentPage(parseInt(currPageNumber) + 1); 
       }); 

       $(table)[tblLocation]().find('#tablePagination_lastPage').click(function (e) { 
        resetCurrentPage(totalPages); 
       }); 

       $(table)[tblLocation]().find(currPageId).on('change', function (e) { 
        resetCurrentPage(this.value); 
       }); 

      }) 
     } 
    }) 

$('#katalog').oneSimpleTablePagination({rowsPerPage: 20}); 

Answer 1

有一個簡單的方法來做到這一點。你只需要改變以下兩行。

topNav : false 

更改爲topNav：true。

paginationHTML += "<div id='tablePagination' style='text-align: center; border-top: solid 2px #0033CC; padding-top: 5px; padding-bottom: 5px;'>"; 

將邊框頂部更改爲邊框底部。

希望它有幫助！