web-dev-qa-db-ja.com

DOMから行を削除した後、jQueryTablesorterプラグインを更新する

現在、削除された行を非表示にしてから、.remove（）関数を使用して削除するコードがあります。

ただし、使用しているテーブルソートページャープラグインまたはフィルタープラグインアドオンを更新するたびに、削除された行がキャッシュされているため、「削除済み」のままにするのが困難です。

現時点でウィジェットを更新するだけの単純な現在のコード

$('.deleteMAP').live("click", function(){
  $(this).closest('tr').css('fast', function() {
 $(this).remove();
 $(".tablesorter").trigger("update");
 $(".tablesorter").trigger("applyWidgets");
  });
})

とにかく、ページャープラグインとテーブルソータープラグインの両方のキャッシュから「行」を削除して、行が削除されたという事実を反映するようにテーブルを「更新」したときに、それらが再び表示されないようにする方法はありますか？キャッシュ経由で死んだ！

jquerytablesorterpager
19
Richard Thompson

私は私のために働く解決策を見つけました：

var usersTable = $(".tablesorter");
usersTable.trigger("update")
  .trigger("sorton", [usersTable.get(0).config.sortList])
  .trigger("appendCache")
  .trigger("applyWidgets");

これを、テーブルを編集した場所の後に置きます。

17
jerone

この問題をいじくり回した後、私は問題ariseを組み合わせた使用jQuery Tablesorter + jQueryTablesorterPagerの。ページャーを使用せずに行を削除して実行すると、「更新」で十分です。

ポケットベルも含めると、これを正しく行うのがはるかに難しくなります（正しく気付いた方法として、キャッシュの問題がいくつかあります）。

ただし、問題の主な理由は、（行を追加/削除するという意味で）変更しようとしているテーブルにjQueryTablesorterが使用されているとは考えられていないことです。また、TablesorterPagerを追加で使用すると、これはさらに当てはまります。 jQueryTablesorterの説明を読み直してください

tablesorterは、THEADタグとTBODYタグを含む標準のHTMLテーブルを、ページを更新せずに並べ替え可能なテーブルに変換するためのjQueryプラグインです。

TableSorterの明確で簡潔なアプリケーション分野。ページ上のajax、編集、削除、追加、.....または同様の用語についても言及していません。 静的テーブルの並べ替え専用です。

したがって、実際の解決策は....テーブルを変更できるという意図/可能性を持って最初から構築された別のjQuery「テーブル」プラグインを探し始めることです。そして、これはデフォルトでこれをサポートします（削除、追加、....）

それでも、次の解決策があります。

jQuery Tablesorter + TablesorterPager行の削除（TR）

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 ソースの場合）

どのように/なぜ/ ....コメントが残っている場合

5
jitter

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 = [];

それで全部です...

ポーランドからよろしく:)

4
foxiu

これは奇妙なアプローチのように思えますが、実際にはうまくいきました。テーブルは正常にレンダリングされ、ページャーは正しく機能します。

$("#tabeBodyId").empty();
$("#tableId colgroup").remove();

//Update table(done using Ajax)
$("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")});
3
Albertyto

更新用の行がありませんでしたが、ジッターソリューションはほとんど機能していました（以下のコードを参照）。テーブルに新しい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>
1
Jaboto

Table.splice（index、1）;を使用することをお勧めします。 delete（table [index]）;！より「削除」は、配列の要素を空にするだけですが、完全には削除されません。英語でごめんなさい！ =）

1
sudo

Mottiesテーブルソーターフォークをご覧ください。彼は、tablesorterとpagerプラグインを使用するときに行を追加/削除する例を作成しました。 http://mottie.github.com/tablesorter/docs/example-pager.html

1
Epstone