programing

jQuery DataTables의 특정 열에 대해 정렬 사용 안 함

powerit 2023. 8. 26. 12:24
반응형

jQuery DataTables의 특정 열에 대해 정렬 사용 안 함

테이블 필드를 정렬하기 위해 jQuery DataTables 플러그인을 사용하고 있습니다.제 질문은 특정 열에 대해 정렬을 비활성화하려면 어떻게 해야 합니까?다음 코드로 시도해 보았지만 작동하지 않았습니다.

"aoColumns": [
  { "bSearchable": false },
  null
]

다음 코드도 시도해 보았습니다.

"aoColumnDefs": [
  {
    "bSearchable": false,
    "aTargets": [ 1 ]
  }
]

하지만 이것은 여전히 원하는 결과를 얻지 못했습니다.

이것이 바로 당신이 찾고 있는 것입니다.

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});

DataTables 1.10.5부터는 HTML5 data-* 속성을 사용하여 초기화 옵션을 정의할 수 있습니다.

-from DataTables 예제 - HTML5 데이터 -* 속성

사용할 수 있습니다.data-orderable="false"에서th정렬할 수 없는 열입니다.예를 들어, 아래 표의 두 번째 열 "아바타"는 정렬할 수 없습니다.

<table id="example" class="display" width="100%" data-page-length="25">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

https://jsfiddle.net/jhfrench/6yxvxt7L/ 에서 작업 예제를 참조하십시오.

첫 번째 열 정렬을 비활성화하려면 데이터 테이블 jquery에서 아래 코드를 사용하십시오.null은 여기서 사용 가능한 정렬을 나타냅니다.

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

jQuery 데이터 테이블에서 열 정렬 사용 안 함

Datables 1.9.4를 사용하여 다음 코드로 첫 번째 열을 정렬할 수 없습니다.

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

편집:

를 사용하여 사용하지 않도록 설정할 수 있습니다.no-sort너의 수업<th>,

다음 초기화 코드를 사용합니다.

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

편집 2

이 예에서는 이전 블로그 게시물에 이어 부트스트랩이 있는 Datables를 사용하고 있습니다.이제 부트스트랩으로 데이터 테이블을 스타일링하는 것에 대한 업데이트된 자료가 포함된 링크가 하나 있습니다.

제가 사용하는 것은 사용자 지정 속성을 추가하고 해당 속성 값을 자동으로 확인하여 정렬을 제어하는 것입니다.

그래서 HTML 코드는

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

그리고 데이터 테이블을 초기화하기 위한 자바스크립트는 (테이블 자체에서 정렬 정보를 동적으로 가져올 것이다 ;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});

columnDefs이제 클래스를 수락합니다.마크업에서 비활성화할 열을 지정하려면 이 방법이 좋습니다.

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

그런 다음 JS에서:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});

다음은 비활성화할 특정 열을 비활성화하는 데 사용할 수 있는 작업입니다.

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

따라서 정렬할 수 없는 열에 "주문 가능", 즉 false를 추가하기만 하면 됩니다.

$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);

단일 열 정렬 비활성화의 경우 다음 예를 사용하십시오.

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

다중 열의 경우 다음 예제를 사용해 보십시오. 열 번호를 추가하면 됩니다.기본적으로 0부터 시작합니다.

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>

여기만Column 3작동하다

1.10.5 기준으로 간단히 다음을 포함합니다.

'주문 가능: false'

컬럼Defs에서 열을 대상으로 지정합니다.

'수정: [0,1]'

표는 다음과 같아야 합니다.

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});

열 FIRST를 orderable속성을 false로 설정합니다. 기본값도 설정해야 합니다.order열을 선택하지 않으면 첫 번째 열이 기본 순서 열이므로 작동하지 않습니다.아래 예제에서는 첫 번째 열에서 정렬을 사용하지 않지만 두 번째 열을 기본 순서 열로 설정합니다(dataTables의 인덱스는 0을 기반으로 함).

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

Bhavish의 답변을 업데이트하기 위해(이전 버전의 DataTables용이며 저에게는 작동하지 않았습니다).속성 이름을 변경한 것 같습니다.사용해 보십시오.

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>

"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

여기서0을 정렬하지 열 값을 열인덱스로 합니다. 여러 열을 정렬하지 않으려면 열 인덱스 값을 다음으로 구분합니다.comma(,)

클래스 사용:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

이제 <TH>에 "no sort" 클래스를 부여할 수 있습니다.

단일 열에 사용할 수 있습니다.

 $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false 
 }]});

이미 일부 열을 숨겨야 하는 경우에는 성 열을 숨깁니다.저는 fname, lname, 그래서 쿼리를 만들었지만 프론트엔드에서 열을 숨깁니다.이러한 상황에서 정렬 사용 안 함의 수정 사항은 다음과 같습니다.

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

여기에 숨김 기능이 있습니다.

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

그리고 나서 그것을 병합했습니다."aoColumnDefs"

  1. 다음 코드를 사용하여 첫 번째 열에서 순서를 지정할 수 없습니다.

    $('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

  2. 기본 순서 지정을 비활성화하려면 다음을 사용할 수도 있습니다.

    $('#example').dataTable( {
     "ordering": false, 
} );

두 가지 방법이 있습니다. 하나는 테이블 헤더를 정의할 때 html로 정의됩니다.

<thead>
  <th data-orderable="false"></th>
</thead>

다른 방법은 자바스크립트를 사용하는 것입니다. 예를 들어, 당신은 테이블을 가지고 있습니다.

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

그리고나서,

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);

다음과 같은 음수 인덱스를 사용할 수도 있습니다.

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

코드는 다음과 같습니다.

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});

여기 정답이 있습니다!

targets열 로, 부터 시작합니다. 0부터 시작합니다.

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

열에서 .notsortable() 메서드를 사용하도록 지시할 수 있습니다.

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];

테이블의 th에 클래스 "no-details"를 설정한 다음 css.no-details {pointer-details: none!important; 커서: default!image; background-image: none!important; }를 추가하면 아래쪽 화살표가 숨겨지고 헤드에서 이벤트가 비활성화됩니다.

언급URL : https://stackoverflow.com/questions/3932587/disable-sorting-for-a-particular-column-in-jquery-datatables

반응형

'programing' 카테고리의 다른 글

스프링 데이터 MongoDB 날짜 간격  (0) 2023.08.26
pytest -n auto + mariadb + m1 mac 너무 느림  (0) 2023.08.26
여러 문자열 매개 변수를 PowerShell 스크립트에 전달하는 방법은 무엇입니까?  (0) 2023.08.26
중심 맞춤 고정 위치 div  (0) 2023.08.26
짝수 ID 번호를 가진 열을 선택하는 방법은 무엇입니까?  (0) 2023.08.26

'programing'의 다른글

  • 현재글jQuery DataTables의 특정 열에 대해 정렬 사용 안 함

관련글

댓글

티스토리툴바