如何仅对 JQUERY 数据表中的一列启用排序答案

【问题标题】：How to enable sorting only for one column in JQUERY Datatable如何仅对 JQUERY 数据表中的一列启用排序
【发布时间】：2016-03-09 04:32:15
【问题描述】：

我试图仅在数据表中启用基于一列的排序。但它不工作。这是我尝试过的方式

var myTable = $("#tbl_main").dataTable({
    "dom": "<'tableinfobar'i><'tablesearchbox'f><'tablestarfilter'><'tablebody't>S<'tablelength'l><'tablepaging'p>",
    "ordering": false,
    "columnDefs": [{"targets": [0, 6],"searchable": false}, {"targets":2, "type":"html-num","orderable":true}],
    "lengthMenu": [
        [10, 20, 50, 100, 500, -1],
        [10, 20, 50, 100, 500, "All"]
    ]
}).show();

这里我只需要为第二列启用排序，并在 columnDefs

中尝试过

【问题讨论】：

尝试类似 `"ordering":true "columnDefs": [ { aTargets: [ '_all' ], bSortable: false }, { aTargets: [ 1 ], bSortable: true } ]跨度>

标签： jquery datatables

【解决方案1】：

将no-sort 类添加到所有<th>，除了您要排序的列。请检查https://jsfiddle.net/24zztcL9/

我只为第二列“位置”启用了排序

HTML

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class="no-sort">Name</th>
                <th>Position</th>
                <th class="no-sort">Office</th>
                <th class="no-sort">Age</th>
                <th class="no-sort">Start date</th>
                <th class="no-sort">Salary</th>
            </tr>
        </thead>
     </table>

jQuery

$(document).ready(function() {
  $('#example').DataTable({

    "ordering": true,
    columnDefs: [{
      orderable: false,
      targets: "no-sort"
    }]

  });
});

【讨论】：

【解决方案2】：

比起使用columnDefs，我更喜欢这样使用columns：

$(document).ready(function() {
    $('#example').DataTable({
        "columns":[
            {
                "sortable": false
            },
            {
                "sortable": true
            },
            {
                "sortable": false
            },
            {
                "sortable": false
            },
            {
                "sortable": false
            },
            {
                "sortable": false
            }
        ]
    });
});

Working JSFiddle

任何一种方法都有效，我只是更喜欢columns 数组的精细控制。

【讨论】：

【解决方案3】：

对我来说，接受的答案不起作用

因为在我的表中所有<th> 都有相同的类，我不能向<th> 添加另一个类，也不能删除<th> 的默认类，

我的表结构如下：

       <table id="example" class="mt-table" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th class="mt-head">Name</th>
                    <th class="mt-head">Position</th>
                    <th class="mt-head">Office</th>
                    <th class="mt-head">Age</th>
                    <th class="mt-head">Start date</th>
                    <th class="mt-head">Salary</th>
                </tr>
            </thead>
            <tbody>
             <tr>
               <td>Hari</td>
               <td>Senior Engineer</td>
               <td>Ahmedabad</td>
               <td>20</td>
               <td>11/02/2019</td>
               <td>50,000</td>
             </tr>
            </tbody>
         </table>

现在我还想为Position 列启用排序选项。

我所做的如下：

在我的<script>

$(document).ready(function() {
  $('#example').DataTable({

    "ordering": true,
    columnDefs: [
    {
        "orderable": true,
        "targets": 1,
    },
    {
      orderable: false,
      targets: "mt-head"
    }]

  });
});

现在只有 Position 列可以排序，而其他所有列都不能。

所以规则是把 你想要排序的列放在首位 像上面的例子一样在columnDefs 之后你可以放置类选择器来禁用排序在所有其他列上。

【讨论】：

【解决方案4】：

$(function () {
       $("#dgUsers").prepend($("<thead></thead>").append($("#dgUsers").find("tr:first"))).DataTable({
           "aoColumnDefs": [
             { "bSortable": false, "aTargets": [ 4, 5, 6 ] }
           ] }
       );
   });

试试这个...

4、5、6 是从 0 开始的列号。

【讨论】：