Vô hiệu hóa sắp xếp cho một cột cụ thể trong jQuery DataTables

Tôi đang sử dụng plugin jQuery DataTables để sắp xếp các trường bảng. Câu hỏi của tôi là: làm thế nào để tôi vô hiệu hóa sắp xếp cho một cột cụ thể? Tôi đã thử với đoạn mã sau, nhưng nó không hoạt động:

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

Tôi cũng đã thử mã sau đây:

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

nhưng điều này vẫn không mang lại kết quả mong muốn.

Đây là những gì bạn đang tìm kiếm:

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

Kể từ DataTables 1.10.5, giờ đây có thể xác định các tùy chọn khởi tạo bằng các thuộc tính dữ liệu HTML5- *.

-Từ ví dụ về DataTables - thuộc tính HTML5 data- * - tùy chọn bảng

Vì vậy, bạn có thể sử dụng data-orderable="false"trên thcột mà bạn không muốn sắp xếp. Ví dụ: cột thứ hai "Avatar" trong bảng bên dưới sẽ không thể sắp xếp được:

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

Xem ví dụ hoạt động tại https://jsfiddle.net/jhfbler/6yxvxt7L/ .

Để vô hiệu hóa sắp xếp cột đầu tiên, hãy thử với đoạn mã dưới đây trong jquery datatables. Các null đại diện cho việc sắp xếp cho phép ở đây.

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

Vô hiệu hóa Sắp xếp trên một cột trong jQuery Datatables

Sử dụng Datatables 1.9.4 Tôi đã vô hiệu hóa việc sắp xếp cho cột đầu tiên với mã này:

/* 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 ]
        } ]
    });
});

BIÊN TẬP:

Bạn có thể vô hiệu hóa ngay cả bằng cách sử dụng no-sortlớp trên <th>,

và sử dụng mã khởi tạo này:

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

CHỈNH SỬA 2

Trong ví dụ này, tôi đang sử dụng Datables với Bootstrap, sau một bài đăng trên blog cũ. Bây giờ có một liên kết với các tài liệu được cập nhật về kiểu dáng Datatables với bootstrap .

Những gì tôi sử dụng chỉ là thêm một thuộc tính tùy chỉnh trong tead td và kiểm soát sắp xếp bằng cách kiểm tra giá trị attr đó tự động.

Vì vậy, mã HTML sẽ là

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

Và JavaScript để khởi tạo các cơ sở dữ liệu sẽ là (nó sẽ tự động lấy thông tin sắp xếp từ chính bảng;)

$('.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
    });
});

columnDefsbây giờ chấp nhận một lớp học. Tôi muốn nói rằng đây là phương pháp ưa thích nếu bạn muốn chỉ định các cột để tắt trong đánh dấu của mình:

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

Sau đó, trong JS của bạn:

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

Đây là những gì bạn có thể sử dụng để vô hiệu hóa cột nhất định bị vô hiệu hóa:

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

Vì vậy, tất cả những gì bạn phải làm là thêm "thứ tự": false vào cột mà bạn không muốn sắp xếp.

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

Để vô hiệu hóa sắp xếp cột đơn, hãy thử ví dụ này:

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

Đối với nhiều cột hãy thử ví dụ này: bạn chỉ cần thêm số cột. Theo mặc định, nó bắt đầu từ 0

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

Ở đây chỉ Column 3hoạt động

Kể từ 1.10.5 , chỉ cần bao gồm

'trật tự: sai'

trong cộtDefs và nhắm mục tiêu cột của bạn với

'mục tiêu: [0,1]'

Bảng nên như thế nào:

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

Nếu bạn đặt thuộc tính cột FIRST orderablethành false, bạn cũng phải đặt ordercột mặc định nếu không nó sẽ không hoạt động vì cột đầu tiên là cột đặt hàng mặc định. Ví dụ bên dưới vô hiệu hóa việc sắp xếp trên cột đầu tiên nhưng đặt cột thứ hai làm cột thứ tự mặc định (hãy nhớ các chỉ mục của dataTables là zero).

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

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

Đây 0là chỉ mục của cột, nếu bạn muốn nhiều cột không được sắp xếp, hãy đề cập đến các giá trị chỉ mục cột được phân tách bằngcomma(,)

Để cập nhật câu trả lời của Bhavish (mà tôi nghĩ là dành cho phiên bản cũ hơn của DataTables và không hoạt động với tôi). Tôi nghĩ rằng họ đã thay đổi tên thuộc tính. Thử cái này:

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

Sử dụng lớp:

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

Bây giờ bạn có thể cung cấp lớp "nosort" cho <TH>

Điều này làm việc cho tôi cho một cột duy nhất

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

Nếu bạn đã phải ẩn Một số cột, như tôi ẩn cột tên cuối cùng. Tôi chỉ phải ghép tên, tên, vì vậy tôi đã thực hiện truy vấn nhưng ẩn cột đó khỏi giao diện người dùng. Các sửa đổi trong Vô hiệu hóa sắp xếp trong tình huống như vậy là:

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

Lưu ý rằng tôi có chức năng Ẩn ở đây

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

Sau đó tôi sáp nhập nó vào "aoColumnDefs"

1. Sử dụng mã sau đây để vô hiệu hóa thứ tự trên cột đầu tiên:

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

2. Để tắt thứ tự mặc định, bạn cũng có thể sử dụng:

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

Bạn có thể directry sử dụng phương thức .notsortable () trên cột

 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()
        ];

Có hai cách, một cách được định nghĩa trong html khi bạn xác định tiêu đề bảng

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

Một cách khác là sử dụng javascript, ví dụ: bạn có bảng

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

sau đó,

$(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
        }
        ]
    }
    );
}
);

bạn cũng có thể sử dụng chỉ số tiêu cực như thế này:

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

Mã sẽ trông như thế này:

$(".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": []
  });
});

Đây là câu trả lời!

targets là số cột, nó bắt đầu từ 0

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

đặt lớp "no-sort" trong bảng sau đó thêm css .no-sort {con trỏ-sự kiện: none! quan trọng; con trỏ: mặc định! quan trọng; hình nền: không có gì quan trọng; } bằng cách này, nó sẽ ẩn sự kiện cập nhật mũi tên và tháo gỡ sự kiện trong đầu.