Bagaimana saya bisa mendapatkan indeks baris dengan kelas pada tabel data

Question

Saya ingin mendapatkan indeks baris yang memiliki kelas "dipilih". Bagaimana saya bisa melakukan itu? Ini gagal.

var datatable = '#mytableid';
var selectedclass='selected'; 
var table = $(datatable).dataTable();
var oSettings = table.fnSettings();

var selectedNode = table.row("."+selectedclass).node();

Untuk ini saya menerima: "table.row bukan fungsi"

Catatan tambahan: Tabel menggunakan pagination dan baris dengan kelas "dipilih" bisa ada di setiap halaman pagination avivable.

Pada akhirnya saya ingin melompat ke baris ini pada halaman pagination yang termasuk dalam baris ini.

Answer 1

Catatan berikut mengasumsikan Anda menggunakan DataTables versi terbaru. Contoh saya menggunakan versi 1.10.22.

Memperbaiki Kesalahan

Untuk memperbaiki masalah "table.row bukan fungsi", Anda dapat mengubah baris berikut:

var table = $(mydatatable).dataTable();

untuk ini (perhatikan huruf besar D):

var table = $(mydatatable).DataTable();

Alasan Anda perlu melakukan ini adalah karena cara Anda membuat referensi ke objek API DataTables . Ini dapat dilakukan dengan salah satu dari 3 cara berikut:

1 - $( selector ).DataTable(); 2 - $( selector ).dataTable().api();
3 - new $.fn.dataTable.Api( selector );

Dalam kasus Anda, Anda menggunakan campuran pendekatan 1 dan 2.

Selanjutnya, Anda perlu mengubah ini:

var oSettings = table.fnSettings();

untuk ini (lihat settings()fungsinya):

var oSettings = table.settings();

Sekarang Anda seharusnya dapat mencetak baris tabel ke konsol browser, sebagai ujian:

console.log( table.row( '.selected' ) );

Melompat ke Baris yang Diperlukan

Ada lebih dari satu cara untuk melakukan ini - tetapi berikut ini satu cara sederhana:

Pertama, daftarkan fungsi baru yang disebut jumpToData():

  jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) {
    var pos = this.column(column, {order:'current'}).data().indexOf( data );
    if ( pos >= 0 ) {
        var page = Math.floor( pos / this.page.info().length );
        this.page( page ).draw( false );
    }
    return this;
  } );

Fungsi ini didokumentasikan di sini .

Sekarang, Anda perlu mengidentifikasi bagian data di baris Anda yang unik untuk baris itu. Dalam contoh saya, saya menggunakan data contoh DataTables standar - jadi saya memiliki baris berikut yang memiliki selectedkelas yang kami gunakan:

<tr class="selected">
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
</tr>

Dalam kasus saya, baris tersebut secara unik diidentifikasi dengan nama "Garrett Winters" di kolom pertama (kolom indeks = 0).

Oleh karena itu saya bisa melakukan ini:

var idColumn = 0;
var idValue = table.row( '.selected' ).data()[idColumn];    
table.page.jumpToData( idValue, idColumn );

Poin penting di sini: dalam kasus saya, data disediakan sebagai array nilai yang dikodekan dengan keras ke dalam tabel HTML, jadi saya mengakses data menggunakan data()[0]. Jika data telah disediakan sebagai array objek, misalnya dari objek JSON, maka saya perlu menggunakan sintaks yang berbeda di sini - seperti data()[personName].

Semuanya adalah sebagai berikut:

<script type="text/javascript">

$(document).ready(function() { jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) { var pos = this.column(column, {order:'current'}).data().indexOf( data ); if ( pos >= 0 ) { var page = Math.floor( pos / this.page.info().length ); this.page( page ).draw( false ); } return this; } ); var datatable = '#mytableid'; var selectedclass='selected'; var table = $(datatable).DataTable();
  //var oSettings  = table.settings();

  var idColumn = 0;
  var idValue = table.row( '.selected' ).data()[idColumn];    
  table.page.jumpToData( idValue, idColumn );

} );

</script>

Hasil: