Wie ich den Index einer Zeile mit einer Klasse für Datentabellen erhalten kann

Dec 16 2020

Ich möchte den Index einer Zeile erhalten, für die die Klasse "ausgewählt" ist. Wie kann ich das machen? Dies ist fehlgeschlagen.

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

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

Dafür erhielt ich: "table.row ist keine Funktion"

Zusätzliche Hinweise: Die Tabelle verwendet Paginierung und die Zeile mit der Klasse "ausgewählt" kann sich auf jeder verfügbaren Paginierungsseite befinden.

Am Ende möchte ich zu dieser Zeile auf der Paginierungsseite springen, die zu dieser Zeile gehört.

Antworten

2 andrewjames Dec 16 2020 at 21:45

In den folgenden Hinweisen wird davon ausgegangen, dass Sie eine aktuelle Version von DataTables verwenden. In meinem Beispiel wird Version 1.10.22 verwendet.

Fehler beheben

Um das Problem "table.row ist keine Funktion" zu beheben, können Sie die folgende Zeile ändern:

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

dazu (Großbuchstaben beachten D):

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

Der Grund dafür ist, wie Sie einen Verweis auf das DataTables-API- Objekt erstellen . Dies kann auf eine der folgenden drei Arten erfolgen:

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

In Ihrem Fall haben Sie eine Mischung aus Ansatz 1 und 2 verwendet.

Als nächstes müssen Sie Folgendes ändern:

var oSettings = table.fnSettings();

dazu (siehe settings()Funktion):

var oSettings = table.settings();

Jetzt sollten Sie in der Lage sein, die Tabellenzeile als Test auf der Browserkonsole zu drucken:

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

Zur erforderlichen Zeile springen

Es gibt mehr als einen Weg, dies zu tun - aber hier ist ein einfacher Weg:

Registrieren Sie zunächst eine neue Funktion mit dem Namen 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;
  } );

Diese Funktion ist hier dokumentiert .

Jetzt müssen Sie ein Datenelement in Ihrer Zeile identifizieren, das für diese Zeile eindeutig ist. In meinem Beispiel verwende ich die Standard-DataTables-Beispieldaten. Daher habe ich die folgende Zeile mit der von selecteduns verwendeten Klasse:

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

In meinem Fall wird die Zeile in der ersten Spalte eindeutig durch den Namen "Garrett Winters" gekennzeichnet (Spaltenindex = 0).

Deshalb kann ich das machen:

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

Ein wichtiger Punkt hier: In meinem Fall werden die Daten als Array von Werten bereitgestellt, die fest in der HTML-Tabelle codiert sind, sodass ich mit auf die Daten zugreifen kann data()[0]. Wenn die Daten als Array von Objekten bereitgestellt worden wären, z. B. von JSON-Objekten, müsste ich hier eine andere Syntax verwenden - so etwas wie data()[personName].

Das Ganze ist wie folgt:

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

Das Ergebnis: