Jak mogę uzyskać indeks wiersza z klasą na plikach danych

Dec 16 2020

Chcę uzyskać indeks wiersza, który ma klasę „wybraną”. Jak mogę to zrobić? To się nie udało.

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

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

W tym celu otrzymałem: „table.row nie jest funkcją”

Dodatkowe uwagi: Tabela używa paginacji, a wiersz z klasą „selected” może znajdować się na każdej dostępnej stronie paginacji.

Na koniec chcę przejść do tego wiersza na stronie paginacji, która należy do tego wiersza.

Odpowiedzi

2 andrewjames Dec 16 2020 at 21:45

Poniższe uwagi zakładają, że używasz najnowszej wersji DataTables. Mój przykład wykorzystuje wersję 1.10.22.

Naprawianie błędów

Aby naprawić problem „table.row nie jest funkcją”, możesz zmienić następujący wiersz:

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

do tego (zwróć uwagę na wielkie litery D):

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

Powodem, dla którego musisz to zrobić, jest sposób tworzenia odwołania do obiektu interfejsu API DataTables . Można to zrobić na jeden z trzech następujących sposobów:

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

W twoim przypadku używałeś mieszanki podejść 1 i 2.

Następnie musisz to zmienić:

var oSettings = table.fnSettings();

do tego (patrz settings()funkcja):

var oSettings = table.settings();

Teraz powinieneś móc wydrukować wiersz tabeli na konsoli przeglądarki w ramach testu:

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

Skok do wymaganego rzędu

Jest na to więcej niż jeden sposób - ale oto jeden prosty:

Najpierw zarejestruj nową funkcję o nazwie 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;
  } );

Ta funkcja jest udokumentowana tutaj .

Teraz musisz zidentyfikować fragment danych w swoim wierszu, który jest unikalny dla tego wiersza. W moim przykładzie używam standardowych danych przykładowych DataTables - więc mam następujący wiersz z selectedklasą, której używamy:

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

W moim przypadku wiersz jest jednoznacznie identyfikowany przez nazwę „Garrett Winters” w pierwszej kolumnie (indeks kolumny = 0).

Dlatego mogę to zrobić:

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

Ważna kwestia: w moim przypadku dane są dostarczane jako tablica wartości zakodowanych na stałe w tabeli HTML, więc uzyskuję dostęp do danych za pomocą data()[0]. Gdyby dane zostały podane jako tablica obiektów, np. Z obiektów JSON, to musiałbym użyć tutaj innej składni - coś w rodzaju data()[personName].

Całość wygląda następująco:

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

Wynik: