Como posso obter o índice de uma linha com uma classe de tabelas de dados

Question

Quero obter o índice de uma linha que possui a classe "selecionada". Como eu posso fazer isso? Isso falhou.

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

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

Para isso, recebi: "table.row não é uma função"

Observações adicionais: A tabela usa paginação e a linha com a classe "selecionada" pode estar em todas as páginas de paginação disponíveis.

No final, eu quero pular para esta linha na página de paginação que pertence a esta linha.

Answer 1

As notas a seguir presumem que você está usando uma versão recente do DataTables. Meu exemplo usa a versão 1.10.22.

Corrigindo erros

Para corrigir o problema "table.row não é uma função", você pode alterar a seguinte linha:

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

para isso (observe as maiúsculas D):

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

O motivo pelo qual você precisa fazer isso é por causa de como você cria uma referência ao objeto API DataTables . Isso pode ser feito de qualquer uma das seguintes 3 maneiras:

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

No seu caso, você estava usando uma combinação das abordagens 1 e 2.

Em seguida, você precisa alterar isso:

var oSettings = table.fnSettings();

para isso (veja a settings()função):

var oSettings = table.settings();

Agora você deve ser capaz de imprimir a linha da tabela no console do navegador, como um teste:

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

Saltando para a linha necessária

Há mais de uma maneira de fazer isso - mas aqui está uma maneira simples:

Primeiro, registre uma nova função chamada 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;
  } );

Esta função está documentada aqui .

Agora, você precisa identificar um dado em sua linha que seja exclusivo dessa linha. No meu exemplo, estou usando os dados de exemplo DataTables padrão - portanto, tenho a seguinte linha que contém a selectedclasse que estamos usando:

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

No meu caso, a linha é identificada exclusivamente pelo nome "Garrett Winters" na primeira coluna (índice da coluna = 0).

Portanto, posso fazer isso:

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

Um ponto importante aqui: no meu caso, os dados são fornecidos como uma matriz de valores codificados na tabela HTML, então eu acesso os dados usando data()[0]. Se os dados tivessem sido fornecidos como uma matriz de objetos, por exemplo, de objetos JSON, então eu precisaria usar uma sintaxe diferente aqui - algo como data()[personName].

A coisa toda é a seguinte:

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

O resultado: