Как я могу получить индекс строки с классом в таблицах данных

Dec 16 2020

Я хочу получить индекс строки, для которой выбран класс. Как я могу это сделать? Это не удалось.

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

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

Для этого я получил: "table.row не является функцией"

Дополнительные примечания: Использование разбивки на страницы и строка с классом «selected» могут быть на каждой доступной странице разбивки на страницы.

В конце я хочу перейти к этой строке на странице пагинации, которая принадлежит этой строке.

Ответы

2 andrewjames Dec 16 2020 at 21:45

В следующих примечаниях предполагается, что вы используете последнюю версию DataTables. В моем примере используется версия 1.10.22.

Исправление ошибок

Чтобы устранить проблему "table.row не является функцией", вы можете изменить следующую строку:

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

к этому (обратите внимание на верхний регистр D):

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

Причина, по которой вам нужно это сделать, заключается в том, как вы создаете ссылку на объект API DataTables . Это можно сделать одним из трех способов:

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

В вашем случае вы использовали сочетание подходов 1 и 2.

Далее вам нужно изменить это:

var oSettings = table.fnSettings();

к этому (см. settings()функцию):

var oSettings = table.settings();

Теперь у вас должна быть возможность вывести строку таблицы в консоль браузера в качестве теста:

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

Переход к нужной строке

Есть несколько способов сделать это, но вот один простой способ:

Сначала зарегистрируйте новую функцию с именем 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;
  } );

Эта функция описана здесь .

Теперь вам нужно идентифицировать часть данных в вашей строке, которая уникальна для этой строки. В моем примере я использую стандартные данные примера DataTables, поэтому у меня есть следующая строка, которая имеет selectedкласс, который мы используем:

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

В моем случае строка однозначно идентифицируется именем «Гарретт Винтерс» в первом столбце (индекс столбца = 0).

Поэтому я могу сделать это:

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

Важный момент: в моем случае данные предоставляются в виде массива значений, жестко закодированных в таблице HTML, поэтому я обращаюсь к данным с помощью data()[0]. Если бы данные были предоставлены в виде массива объектов, например, из объектов JSON, тогда мне пришлось бы использовать здесь другой синтаксис - что-то вроде data()[personName].

Все дело в следующем:

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

Результат: