CSS 테이블로 데이터 테이블의 선택된 행 정렬

Question

나는 example과 유사한 체크 박스로 데이터 테이블을 가지고 있습니다.

체크 박스는 CSS :after 및 :before 가상 요소를 사용하여 만들어 지므로 해당 열을 포함하는 열에는 값이 없습니다.

사용자가 단추를 클릭 할 때 프로그래밍 방식으로 일부 행을 선택하지만 선택한 행이 테이블 맨 위에 나타나기를 원합니다. 이는 주로 선택된 행이 보이지 않는 페이지에있을 때 사용자가 어떤 일이 일어나는 것을 보는 것입니다. https://jsfiddle.net/b22kx27s/2/

내가 정상에 선택한 행을 가지고 사용자 정의 정렬 함수로보고 시도했지만 열이 더 값이 없기 때문에 그것을 할 방법을 알아낼 수 없습니다 : 여기

는 바이올린입니다. 첫번째 열의 columnDefs에 orderDataType: 'dom-checkbox' 사용

$.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) 
{ 
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) { 
    return $(td).closest('tr').hasClass('selected') ? '1' : '0'; 
    }); 
} 

주문할 수 있도록 :

Answer 1

는 this page 살펴본 각 열에 대해 검사가 각 셀의 행은 selected 클래스가있는 경우 것을 명령 기능을 사용 선택에 의해. https://jsfiddle.net/s65tjv0v/8/

Answer 2

$.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) 
{ 
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) { 
    return $('input', td)[1].checked ? '1' : '0'; 
    }); 
} 

선택하여 주문할 수있는 첫 번째 열에 대한 columnDefs에 orderDataType: 'dom-checkbox' 사용 :

여기에 업데이트 된 바이올린입니다.