我有一页的工作代码叫做: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 + " ";
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});