Nice programing

jquery 데이터 테이블 기본 정렬

nicepro 2021. 1. 10. 19:57
반응형

jquery 데이터 테이블 기본 정렬


기본 정렬을 jquery 데이터 테이블의 두 번째 열로 설정하려고합니다. 기본적으로 인덱스 0으로 정렬합니다. "aaSorting": [[ 1, "asc" ]]구문을 사용하고 있지만 초기로드시 원하지 않는 열을 강조 표시합니다. 정렬이 포함되지 않고 0 인덱스 열이 사용되는 것처럼 열을 강조 표시하지 않고 특정 열의 기본 정렬을 어떻게 설정할 수 있습니까?


몇 가지 옵션이 있습니다.

  1. DataTable을 초기화 한 직후 TBODY의 TD 요소에서 정렬 클래스를 제거하십시오.

  2. http://datatables.net/ref#bSortClasses를 사용하여 정렬 클래스를 비활성화합니다 . 이것의 문제점은 사용자 정렬 요청에 대한 정렬 클래스를 비활성화한다는 것입니다. 이는 사용자가 원하는 것일 수도 있고 아닐 수도 있습니다.

  3. 서버에서 필요한 정렬 순서로 테이블을 출력하도록하고 테이블 ( aaSorting:[]) 에 기본 정렬을 적용하지 마십시오 .


다음은이를 수행하는 실제 코드입니다.

$(document).ready(function()
{
  var oTable = $('#myTable').dataTable();

  // Sort immediately with column 2 (at position 1 in the array (base 0). More could be sorted with additional array elements
  oTable.fnSort( [ [1,'asc'] ] );

  // And to sort another column descending (at position 2 in the array (base 0).
  oTable.fnSort( [ [2,'desc'] ] );
} );

열을 강조 표시하지 않으려면 다음과 같이 CSS를 수정하십시오.

table.dataTable tr.odd td.sorting_1 { background-color: transparent; }
table.dataTable tr.even td.sorting_1 { background-color: transparent; }

fnSort 함수를 사용할 수 있습니다. 자세한 내용은 다음을 참조하십시오.

http://datatables.net/api#fnSort


가장 좋은 방법은 정렬을 비활성화하고 원하는 정렬 순서 (데이터베이스 또는 기타 소스에서)로 데이터를 공급하는 것입니다. 이것을 'datatable'에 추가해보십시오 : "bSort": false


Datatables는이 기능에 대해 HTML5 data- * 속성을 지원합니다.

정렬 순서에서 여러 열을 지원합니다 (0 기반).

<table data-order="[[ 1, 'desc' ], [2, 'asc' ]]">
    <thead>
        <tr>
            <td>First</td>
            <td>Another column</td>
            <td>A third</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>z</td>
            <td>1</td>
            <td>$%^&*</td>
        </tr>
        <tr>
            <td>y</td>
            <td>2</td>
            <td>*$%^&</td>
        </tr>
    </tbody>
</table>

이제 내 jQuery는 간단 $('table').DataTables();하며 두 번째 및 세 번째 열이 desc / asc 순서로 정렬됩니다.

<table>내가 재사용하는 다른 좋은 속성은 다음과 같습니다 .

data-page-length="-1" will set the page length to All (pass 25 for page length 25)...

data-fixed-header="true" ... Make a guess


I had this problem too. I had used stateSave option and that made this problem.
Remove this option and problem is solved.


use this it works for me: "order": [[ 1, "ASC" ]],


This worked for me:

       jQuery('#tblPaging').dataTable({
            "sort": true,
            "pageLength": 20
        });

Just Include the following code:

    $(document).ready(function() {
        $('#tableID').DataTable( {
            "order": [[ 3, "desc" ]]
        } );
    } 
);

Full reference article with the example:

https://datatables.net/examples/basic_init/table_sorting.html

ReferenceURL : https://stackoverflow.com/questions/8639191/jquery-datatables-default-sort

반응형