데이터 테이블의 클래스로 행 인덱스를 얻는 방법

Question

"선택된"클래스가있는 행의 인덱스를 얻고 싶습니다. 어떻게 할 수 있습니까? 이것은 실패했습니다.

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

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

이를 위해 나는 "table.row는 함수가 아닙니다"를 받았습니다.

추가 참고 사항 : 테이블은 페이지 매김을 사용하고 "selected"클래스가있는 행은 모든 사용 가능한 페이지 매김 페이지에있을 수 있습니다.

마지막으로 페이지 매김 페이지에서이 행에 속하는이 행으로 이동하고 싶습니다.

Answer 1

다음 참고 사항에서는 최신 버전의 DataTable을 사용하고 있다고 가정합니다. 내 예에서는 버전 1.10.22를 사용합니다.

오류 수정

"table.row가 함수가 아닙니다"문제를 해결하려면 다음 줄을 변경할 수 있습니다.

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

이에 (대문자 참고 D) :

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

이렇게해야하는 이유는 DataTables API 개체에 대한 참조를 만드는 방법 때문입니다 . 다음 세 가지 방법 중 하나로 수행 할 수 있습니다.

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>

필자의 경우 행은 첫 번째 열에서 "Garrett Winters"라는 이름으로 고유하게 식별됩니다 (열 인덱스 = 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>

결과: