この 1 日かそこらの間、私は 2 つのかなり人気のある 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>
ドロップキックを含む私の最新バージョン:
<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>
私は非常に行き詰まっており、プロジェクト全体が滞っています。前に述べたように、私は jquery を初めて使用するので、助けていただければ幸いです。