在过去一天左右的时间里，我一直在努力让两个相当流行的 jquery 脚本一起工作，dropkick.js 和 tablesorter.pager.js。我对 JS 比较陌生，但我遇到的问题是不知道通过 dropkick 函数的正确语法。
这两个脚本都运行在相同版本的 jquery 上，我遇到的唯一问题是，当进行选择时，显示的结果数量不会改变。例如，如果一个表中显示了 10 个结果，并且我选择 5 作为选择选项，则该表应该只显示 5 个结果而不重新加载页面。
两个脚本都可以独立工作，但 dropkick.js 不使用更改函数对其值不做任何事情。
这是表单 HTML 数据：
表 ID：“#user-search-results”
<div id="pager" class="pager">
<form>
<img src="images/first.png" class="first"/>
<img src="images/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="images/next.png" class="next"/>
<img src="images/last.png" class="last"/>
<select class="pagesize">
<option value="1">1 per page</option>
<option value="2">2 per page</option>
<option value="100">100 per page</option>
</select>
</form>
</div>
注意：低值用于测试目的。
jquery.tablesorter.pager.js
(function($) {
$.extend({
tablesorterPager: new function() {
function updatePageDisplay(c) {
var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);
}
function setPageSize(table,size) {
var c = table.config;
c.size = size;
c.totalPages = Math.ceil(c.totalRows / c.size);
c.pagerPositionSet = false;
moveToPage(table);
fixPosition(table);
}
function fixPosition(table) {
var c = table.config;
if(!c.pagerPositionSet && c.positionFixed) {
var c = table.config, o = $(table);
if(o.offset) {
c.container.css({
top: o.offset().top + o.height() + 'px',
position: 'absolute'
});
}
c.pagerPositionSet = true;
}
}
function moveToFirstPage(table) {
var c = table.config;
c.page = 0;
moveToPage(table);
}
function moveToLastPage(table) {
var c = table.config;
c.page = (c.totalPages-1);
moveToPage(table);
}
function moveToNextPage(table) {
var c = table.config;
c.page++;
if(c.page >= (c.totalPages-1)) {
c.page = (c.totalPages-1);
}
moveToPage(table);
}
function moveToPrevPage(table) {
var c = table.config;
c.page--;
if(c.page <= 0) {
c.page = 0;
}
moveToPage(table);
}
function moveToPage(table) {
var c = table.config;
if(c.page < 0 || c.page > (c.totalPages-1)) {
c.page = 0;
}
renderTable(table,c.rowsCopy);
}
function renderTable(table,rows) {
var c = table.config;
var l = rows.length;
var s = (c.page * c.size);
var e = (s + c.size);
if(e > rows.length ) {
e = rows.length;
}
var tableBody = $(table.tBodies[0]);
// clear the table body
$.tablesorter.clearTableBody(table);
for(var i = s; i < e; i++) {
//tableBody.append(rows[i]);
var o = rows[i];
var l = o.length;
for(var j=0; j < l; j++) {
tableBody[0].appendChild(o[j]);
}
}
fixPosition(table,tableBody);
$(table).trigger("applyWidgets");
if( c.page >= c.totalPages ) {
moveToLastPage(table);
}
updatePageDisplay(c);
}
this.appender = function(table,rows) {
var c = table.config;
c.rowsCopy = rows;
c.totalRows = rows.length;
c.totalPages = Math.ceil(c.totalRows / c.size);
renderTable(table,rows);
};
this.defaults = {
size: 1,
offset: 0,
page: 0,
totalRows: 0,
totalPages: 0,
container: null,
cssNext: '.next',
cssPrev: '.prev',
cssFirst: '.first',
cssLast: '.last',
cssPageDisplay: '.pagedisplay',
cssPageSize: '.pagesize',
seperator: "/",
positionFixed: false,
appender: this.appender
};
this.construct = function(settings) {
return this.each(function() {
config = $.extend(this.config, $.tablesorterPager.defaults, settings);
var table = this, pager = config.container;
$(this).trigger("appendCache");
config.size = parseInt($(".pagesize",pager).val());
$(config.cssFirst,pager).click(function() {
moveToFirstPage(table);
return false;
});
$(config.cssNext,pager).click(function() {
moveToNextPage(table);
return false;
});
$(config.cssPrev,pager).click(function() {
moveToPrevPage(table);
return false;
});
$(config.cssLast,pager).click(function() {
moveToLastPage(table);
return false;
});
$(config.cssPageSize,pager).change(function() {
setPageSize(table,parseInt($(this).val()));
return false;
});
});
};
}
});
// extend plugin scope
$.fn.extend({
tablesorterPager: $.tablesorterPager.construct
});
})(jQuery);
工作表排序脚本：
<script defer="defer">
$(document).ready(function()
{
$('#user-search-results')
.tablesorter({widthFixed: false, widgets: ['zebra']})
.tablesorterPager({container: $('#pager')});
}
);
</script>
我的最新版本包括 dropkick：
<script defer="defer">
$(document).ready(function()
{
$('#user-search-results')
.tablesorter({widthFixed: false, widgets: ['zebra']})
.tablesorterPager({container: $('#pager')});
$('.pagesize').dropkick({
change: function () {
tablesorterPager({container: $('#pager')});
}
});
}
);
</script>
我尝试从 dropkick 更改函数中的寻呼机脚本调用不同的函数，并为各个函数传入所需的变量，包括“值”。
例如：
<script defer="defer">
$(document).ready(function()
{
$('#user-search-results')
.tablesorter({widthFixed: false, widgets: ['zebra']})
.tablesorterPager({container: $('#pager')});
$('.pagesize').dropkick({
change: function (value) {
setPageSize('table#user-search-results', value);
}
});
}
);
</script>
我非常卡在ATM上，它阻碍了我的整个项目。正如我之前提到的，我是 jquery 的新手，我非常感谢任何帮助。