現在、削除された行を非表示にしてから、.remove()関数を使用して削除するコードがあります。
ただし、使用しているテーブルソートページャープラグインまたはフィルタープラグインアドオンを更新するたびに、削除された行がキャッシュされているため、「削除済み」のままにするのが困難です。
現時点でウィジェットを更新するだけの単純な現在のコード
$('.deleteMAP').live("click", function(){
$(this).closest('tr').css('fast', function() {
$(this).remove();
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("applyWidgets");
});
})
とにかく、ページャープラグインとテーブルソータープラグインの両方のキャッシュから「行」を削除して、行が削除されたという事実を反映するようにテーブルを「更新」したときに、それらが再び表示されないようにする方法はありますか?キャッシュ経由で死んだ!
私は私のために働く解決策を見つけました:
var usersTable = $(".tablesorter");
usersTable.trigger("update")
.trigger("sorton", [usersTable.get(0).config.sortList])
.trigger("appendCache")
.trigger("applyWidgets");
これを、テーブルを編集した場所の後に置きます。
この問題をいじくり回した後、私は問題ariseを組み合わせた使用jQuery Tablesorter + jQueryTablesorterPagerの。ページャーを使用せずに行を削除して実行すると、「更新」で十分です。
ポケットベルも含めると、これを正しく行うのがはるかに難しくなります(正しく気付いた方法として、キャッシュの問題がいくつかあります)。
ただし、問題の主な理由は、(行を追加/削除するという意味で)変更しようとしているテーブルにjQueryTablesorterが使用されているとは考えられていないことです。また、TablesorterPagerを追加で使用すると、これはさらに当てはまります。 jQueryTablesorterの説明を読み直してください
tablesorterは、THEADタグとTBODYタグを含む標準のHTMLテーブルを、ページを更新せずに並べ替え可能なテーブルに変換するためのjQueryプラグインです。
TableSorterの明確で簡潔なアプリケーション分野。ページ上のajax、編集、削除、追加、.....または同様の用語についても言及していません。 静的テーブルの並べ替え専用です。
したがって、実際の解決策は....テーブルを変更できるという意図/可能性を持って最初から構築された別のjQuery「テーブル」プラグインを探し始めることです。そして、これはデフォルトでこれをサポートします(削除、追加、....)
それでも、次の解決策があります。
Javascriptソースコードのクイックコピーアンドペースト( TablesorterPagerの例 に基づくHTML)
// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.Push.apply(this, rest);
};
//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
//aka cleanTableBody from TableSorter code
if($.browser.msie) {
function empty() {
while ( this.firstChild ) this.removeChild( this.firstChild );
}
empty.apply(tbl.tBodies[0]);
} else {
tbl.tBodies[0].innerHTML = "";
}
jQuery.each(tbl.config.rowsCopy, function() {
tbl.tBodies[0].appendChild(this.get(0));
});
}
//removes the passed in row and updates the tablesorter+pager
function remove(tr, table) {
//pager modifies actual DOM table to have only #pagesize TR's
//thus we need to repopulate from the cache first
repopulateTableBody(table.get(0));
var index = $("tr", table).index(tr)-2;
var c = table.get(0).config;
tr.remove();
//remove row from cache too
c.rowsCopy.remove(index);
c.totalRows = c.rowsCopy.length;
c.totalPages = Math.ceil(c.totalRows / config.size);
//now update
table.trigger("update");
//simulate user switches page to get pager to update too
index = c.page < c.totalPages-1;
$(".next").trigger("click");
if(index)
$(".prev").trigger("click");
}
$(function() {
var table;
//make all students with Major Languages removable
$('table td:contains("Languages")').css("background-color", "red").live("click", function() {
remove($(this).parents('tr').eq(0), table);
});
//create tablesorter+pager
// CHANGED HERE OOPS
// var table = $("table#tablesorter");
table = $("table#tablesorter");
table.tablesorter( { sortList: [ [0,0], [2,1] ] } )
.tablesorterPager( { container: $("#pager")} );
});
私は自分のソリューションであなたのためにテストページを作成しました(赤いTDの==その行を削除するをクリックします)。
http://jsbin.com/uburo ( http://jsbin.com/uburo/edit ソースの場合)
どのように/なぜ/ ....コメントが残っている場合
Tablesorterpagerプラグインとtablesorterfilterプラグインの両方を使用する場合は注意が必要です。
$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
ポケットベルでのみ機能し、フィルターには別のキャッシュがあります。私はほぼ2時間解決策を探していましたが、ついに次のようなものを書きました。
$("#deleteRowButton").click( function(){
// index of row which will be deleted
var index = $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').index();
// table with tablesorter
var table = document.getElementById( 'gridTable' ).config.cache.row;
// deleting row
$('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').remove();
// truly DELETING row, not only mark as deleted - after this list of rows should look like [tr], [tr], [tr], undefined, [tr], ...
delete( table[index] );
// tablesorter things
$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");
});
Input#removeThisID値と同じrel属性を持つ行を削除しています。
次に、tablesorterfilterプラグインを変更します。 doFilter関数で、次の行を見つけます。
// Walk through all of the table's rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;
var resultRows = [];
これらを次のように置き換えます。
// Walk through all of the table's rows and search.
// Rows which match the string will be pushed into the resultRows array.
var allRows = table.config.cache.row;
// refresh cache 'by hand'
var newcache = new Array();
var i = 0;
for( var a in allRows )
{
newcache[i] = allRows[a];
i++;
}
allRows = newcache;
var resultRows = [];
それで全部です...
ポーランドからよろしく:)
これは奇妙なアプローチのように思えますが、実際にはうまくいきました。テーブルは正常にレンダリングされ、ページャーは正しく機能します。
$("#tabeBodyId").empty();
$("#tableId colgroup").remove();
//Update table(done using Ajax)
$("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")});
更新用の行がありませんでしたが、ジッターソリューションはほとんど機能していました(以下のコードを参照)。テーブルに新しいTRを挿入できるようにコードを拡張しました。
私は遊んでいますが、FFoxで動作し、IExplorerをチェックしませんでした。とにかく、まだ修正できなかったバグがあります。新しいTRを追加してから削除しようとしても、テーブルからは削除されません:(
// "borrowed" from John Resig: Javascript Array Remove
// http://ejohn.org/blog/javascript-array-remove/
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.Push.apply(this, rest);
};
//repopulate table with data from rowCache
function repopulateTableBody(tbl) {
//aka cleanTableBody from TableSorter code
if($.browser.msie) {
function empty() {
while ( this.firstChild ) this.removeChild( this.firstChild );
}
empty.apply(tbl.tBodies[0]);
} else {
tbl.tBodies[0].innerHTML = "";
}
jQuery.each(tbl.config.rowsCopy, function() {
tbl.tBodies[0].appendChild(this.get(0));
});
}
//removes the passed in row and updates the tablesorter+pager
function tablesorter_remove(tr, table) {
//pager modifies actual DOM table to have only #pagesize TR's
//thus we need to repopulate from the cache first
repopulateTableBody(table.get(0));
var index = $("tr", table).index(tr)-2;
var c = table.get(0).config;
tr.remove();
//remove row from cache too
c.rowsCopy.remove(index);
c.totalRows = c.rowsCopy.length;
c.totalPages = Math.ceil(c.totalRows / config.size);
//now update
table.trigger("update");
table.trigger("appendCache");
//simulate user switches page to get pager to update too
index = c.page < c.totalPages-1;
$(".next").trigger("click");
if(index)
$(".prev").trigger("click");
}
function tablesorter_add(tr, table) {
//pager modifies actual DOM table to have only #pagesize TR's
//thus we need to repopulate from the cache first
repopulateTableBody(table.get(0));
table.append(tr);
//add row to cache too
var c = table.get(0).config;
c.totalRows = c.rowsCopy.length;
c.totalPages = Math.ceil(c.totalRows / config.size);
//now update
table.trigger("update");
table.trigger("appendCache");
//simulate user switches page to get pager to update too
index = c.page < c.totalPages-1;
$(".next").trigger("click");
if(index)
$(".prev").trigger("click");
//Set previous sorting method
var sorting = c.sortList;
if(sorting == '')
sorting = [[0,0]];
table.trigger("sorton", [sorting]);
}
そして、あなたは次のように使うことができます:
複雑なHTMLを含む新しいTRを追加します。
tablesorter_add('<tr id="'+data.id+' " title="Haz click para editar" onclick="edit('+data.id+')"><td id="'+data.id+'_genus">'+data.genus+'</td><td id="'+data.id+'_species">'+data.species+'</td></tr>', $("#orchid_list"));
TRを削除します。
tablesorter_remove($("#"+orchid_id),$("#orchid_list"));
私の簡略化されたサンプルテーブル:
<table id="orchid_list" class="tablesorter">
<thead>
<tr>
<th id="genus">Género</th>
<th id="species">Especie</th>
</tr>
</thead>
<tbody>
<tr id="2" title="Haz click para editar" onclick="edit('2')">
<td id="2_genus">Amitostigma</td>
<td id="2_species">capitatum</td>
</tr>
<tr id="4" title="Haz click para editar" onclick="edit('4')">
<td id="4_genus">Amitostigma</td>
<td id="4_species">tetralobum</td>
</tr>
</tbody>
</table>
Table.splice(index、1);を使用することをお勧めします。 delete(table [index]);!より「削除」は、配列の要素を空にするだけですが、完全には削除されません。英語でごめんなさい! =)
Mottiesテーブルソーターフォークをご覧ください。彼は、tablesorterとpagerプラグインを使用するときに行を追加/削除する例を作成しました。 http://mottie.github.com/tablesorter/docs/example-pager.html