Jak mogę uzyskać indeks wiersza z klasą na plikach danych
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
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 selected
klasą, 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:
