Pertanyaan Memperbarui plugin jQuery Tablesorter setelah menghapus satu baris dari DOM


Saya memiliki beberapa kode saat ini yang menyembunyikan baris yang dihapus dan kemudian menghapusnya menggunakan fungsi .remove ().

Namun saya mengalami kesulitan membuatnya tetap "dihapus" karena setiap kali saya me-refresh tabel diurutkan pager plugin atau addon plugin filter yang saya gunakan .. baris yang dihapus kembali muncul karena mereka tentu saja cache.

Kode saat ini cukup sederhana dengan pembaruan widget saat ini

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

Apakah ada pula untuk menghapus "baris" dari kedua cache plugin pager dan juga plugin tablesorter sehingga ketika saya "memperbarui" tabel untuk mencerminkan fakta baris telah dihapus mereka tidak kembali muncul kembali dari mati melalui cache!


18
2017-12-14 21:58


asal


Jawaban:


Saya menemukan solusi yang berhasil untuk saya:

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

Taruh ini setelah tempat Anda mengedit tabel.


17
2018-01-06 14:34



Setelah beberapa bermain-main dengan masalah ini saya menyimpulkan masalah timbul  dari penggunaan gabungan dari jQuery Tablesorter + jQuery TablesorterPager. Tanpa mengeluarkan pager, hapus baris dan lakukan dan "perbarui" sudah cukup.

Ketika Anda juga memasukkan pager itu akan jauh lebih sulit untuk melakukan ini dengan benar (karena bagaimana Anda melihat dengan benar ada beberapa masalah cache).

Tetapi alasan utama untuk masalah Anda adalah bahwa jQuery Tablesorter tidak dianggap digunakan untuk tabel yang ingin Anda ubah (dalam arti menambahkan / menghapus baris). Dan ini berlaku bahkan lebih ketika Anda juga menggunakan TablesorterPager. Baca kembali deskripsi jQuery Tablesorter

tablesorter adalah plugin jQuery untuk   mengubah tabel HTML standar dengan   Tag THEAD dan TBODY menjadi bisa diurutkan   tabel tanpa refresh halaman.

Bidang aplikasi yang jelas dan ringkas untuk TableSorter. Itu bahkan tidak menyebutkan ajax, edit, hapus, tambahkan, ..... atau istilah serupa di halaman. Hanya untuk menyortir tabel statis.

Jadi solusi yang sebenarnya adalah .... mulai mencari plugin "Tabel" jQuery lain yang dibangun dari awal dengan maksud / kemungkinan bahwa tabel dapat dimodifikasi. Dan yang mendukung ini secara default (menghapus, menambahkan, ....)


Ok tetap di sini adalah solusi untuk:

jQuery Tablesorter + TablesorterPager menghapus baris (TR)

Copy-paste cepat dari source-code javascript (HTML berdasarkan Contoh TablesorterPager)

// "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")}  );
});

Saya membuat halaman percobaan untuk Anda dengan solusi saya (klik TD merah == menghapus baris itu).

http://jsbin.com/uburo (http://jsbin.com/uburo/edit untuk sumbernya)

Jika pertanyaan tetap tentang bagaimana / mengapa / .... Komentar


5
2017-12-15 12:32



Hal-hal menjadi rumit ketika Anda menggunakan plugin tablesorterpager dan tablesorterfilter - solusi dengan:

$("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets");

hanya berfungsi untuk pager, filter memiliki cache lain. Saya sudah mencari solusi selama hampir 2 jam, akhirnya saya menulis sesuatu seperti ini:

$("#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");
});

Saya menghapus baris yang memiliki atribut rel sama dengan nilai input # removeThisID.

Sekarang saatnya memodifikasi plugin tablesorterfilter. Dalam fungsi doFilter, temukan garis:

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

dan ganti ini dengan:

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

itu saja...

salam bentuk Polandia :)


4
2018-05-18 12:23



Ini tampaknya merupakan pendekatan yang aneh, tetapi sebenarnya itu berhasil bagi saya. Table renders fine dan pager berfungsi dengan baik.

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

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

3
2018-01-25 09:27



Solusi jitter hampir berhasil untuk saya meskipun ada garis yang hilang untuk pembaruan (lihat kode di bawah). Saya telah memperpanjang kode untuk memungkinkan memasukkan tabel baru TR.

Saya telah bermain-main dan bekerja untuk saya di bawah FFox, tidak memeriksa IExplorer. Pokoknya ada bug yang belum bisa saya perbaiki: Jika Anda menambahkan TR baru lalu Anda mencoba menghapusnya, itu tidak akan dihapus dari tabel :(

// "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]);
}

Dan yang bisa Anda gunakan adalah sebagai berikut:

Tambahkan TR baru dengan HTML kompleks di dalamnya:

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"));

Hapus TR apa pun:

tablesorter_remove($("#"+orchid_id),$("#orchid_list"));

Tabel contoh saya yang disederhanakan:

<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
2018-02-15 11:47



Lebih baik menggunakan table.splice (indeks, 1); daripada menghapus (tabel [indeks]) ;! "Hapus" jangan hanya mengosongkan elemen array, tetapi tidak sepenuhnya dihapus. Maaf untuk bahasa Inggris saya! =)


1
2017-10-21 13:28



Silakan melihat garpu tablesaborer Motties. Dia membuat contoh untuk menambahkan / menghapus baris saat menggunakan plugin tablesorter dan pager. http://mottie.github.com/tablesorter/docs/example-pager.html


1
2018-02-12 13:44