Veri tablolarında bir sınıf içeren bir satırın dizinini nasıl alabilirim

Question

"Seçili" sınıfı olan bir satırın dizinini almak istiyorum. Bunu nasıl yapabilirim? Bu başarısız oldu.

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

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

Bunun için şunu anladım: "table.row bir işlev değil"

Ek notlar: Tablo sayfalamayı kullanır ve "seçili" sınıfın bulunduğu satır her kullanılabilir sayfalandırma sayfasında olabilir.

Sonunda bu satıra ait sayfalandırma sayfasındaki bu satıra atlamak istiyorum.

Answer 1

Aşağıdaki notlarda, DataTables'ın en son sürümünü kullandığınız varsayılmaktadır. Örneğim 1.10.22 sürümünü kullanıyor.

Hataları Düzeltme

"Table.row bir işlev değil" sorununuzu çözmek için aşağıdaki satırı değiştirebilirsiniz:

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

buna (büyük harfe dikkat edin D):

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

Bunu yapmanız gerekmesinin nedeni, DataTables API nesnesine nasıl bir başvuru oluşturduğunuzdan kaynaklanmaktadır . Aşağıdaki 3 yoldan herhangi biri ile yapılabilir:

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

Sizin durumunuzda, 1. ve 2. yaklaşımların bir karışımını kullanıyordunuz.

Sonra, bunu değiştirmeniz gerekiyor:

var oSettings = table.fnSettings();

buna ( settings()işleve bakın ):

var oSettings = table.settings();

Artık tablo satırını test olarak tarayıcı konsoluna yazdırabilmelisiniz:

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

Gerekli Satıra Atlama

Bunu yapmanın birden fazla yolu var - ama işte basit bir yol:

İlk olarak, şu adla yeni bir işlev kaydedin 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;
  } );

Bu işlev burada belgelenmiştir .

Şimdi, satırınızda o satıra özgü bir veri parçası tanımlamanız gerekir. Örneğimde, standart DataTables örnek verilerini kullanıyorum - bu nedenle selectedkullandığımız sınıfa sahip aşağıdaki satıra sahibim :

<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>

Benim durumumda, satır ilk sütundaki "Garrett Winters" adıyla benzersiz bir şekilde tanımlanmıştır (sütun indeksi = 0).

Bu nedenle bunu yapabilirim:

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

Burada önemli bir nokta: Benim durumumda veriler, HTML tablosuna sabit kodlanmış bir değerler dizisi olarak sağlanır, bu yüzden verilere kullanarak erişiyorum data()[0]. Veriler bir nesne dizisi olarak, örneğin JSON nesnelerinden sağlanmış olsaydı, burada farklı bir sözdizimi kullanmam gerekirdi - gibi bir şey data()[personName].

Her şey şu şekildedir:

<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>

Sonuç: