禁用jQuery DataTables中特定列的排序功能

Question

我正在使用jQuery的DataTables插件来排序表格字段。我的问题是：如何禁用特定列的排序功能？我已经尝试了以下代码，但它没有起作用：

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

我还尝试了以下代码：

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

但是这仍然没有产生期望的结果。

- usman

---

我已经编辑了我的答案，并提供了一个选项，您可以在TH定义中设置禁用列。 - Paulo Fidalgo

使用CSS禁用按钮。请查看此页面。 https://datatables.net/forums/discussion/21164/disable-sorting-of-one-column#Comment_66660 - Eugine Joseph

您可能还想查看https://cbabhusal.wordpress.com/2015/05/20/jquery-datatables-turn-off-sorting-of-a-particular-column/。 - Shiva

Answer 1

这就是您正在寻找的内容：

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

- wildehahn

---

这对我有效。如果你想要排序第一列，则将'aTargets': [-1]，如果是第二列，则为'aTargets': [1]，第三列则为'aTargets': [2]，以此类推。 - Lasang

你可以简单地执行 'aTargets': [1, 2]。 - Adriano

@Lasang - 你真的是想要 [-1]，然后是 [1]，[2] 等等吗？ -1 是什么意思？在 dataTables 中，列的索引难道不是从 1 开始的吗？ - Dan Nissenbaum

“-1”是从表格末尾开始计数的索引。（“-1”是表格的最后一列） - Ramy Nasr

从DataTables 1.10.5开始，现在可以使用HTML5 data-*属性来定义初始化选项。请参见https://dev59.com/7m865IYBdhLWcg3wM7u0#32281113。 - Jeromy French

@wildehahn Wildehahn - 我需要你的帮助，当我像你建议的那样在数组中使用0“零”时，你的解决方案在第一列上不起作用。 "aoColumnDefs": [ { 'bSortable': false, 'aTargets': [0,1,6] } ], 请建议如何解决这个问题。谢谢。 - Kamlesh

Answer 2

截至DataTables 1.10.5版本，现在可以使用HTML5 data-*属性来定义初始化选项。您可以在不想排序的列的th上使用data-orderable="false"。例如，下面表格中的第二列“Avatar”将无法排序：

-from DataTables example - HTML5 data-* attributes - table options

<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/|此处的一个编程示例。

- Jeromy French

---

在我看来，这是最好的答案，方法最简单、最优雅。 - Hamman Samuel

这将禁用排序功能，但我发现（在1.10.12中）当DataTable被初始化时，该列仍会默认排序，这会导致该列显示为升序排列。如果您不想要这个功能，可以这样初始化dataTable：$('#example').DataTable({ 'order': [] }); - Brian Merrell

@BrianMerrell 哇...看看那个！https://jsfiddle.net/ja0ty8xr/ 你应该为那种行为打开一个GitHub问题。 :) - Jeromy French

Answer 3

为了禁用第一列排序，请使用以下代码在datatables jquery中尝试。这里的null表示启用排序。

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

如何在jQuery Datatables插件中禁用列排序

- Paulraj

---

@Paulraj，链接已经失效了，您能否更换一下？ - taufique

从DataTables 1.10.5开始，现在可以使用HTML5 data-*属性来定义初始化选项。请参见https://dev59.com/7m865IYBdhLWcg3wM7u0#32281113。 - Jeromy French

Answer 4

我使用Datatables 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 ]
        } ]
    });
});

编辑：

您可以通过在 <th> 上使用 no-sort 类来禁用排序，

并使用以下初始化代码：

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

编辑2

在这个例子中，我使用Datatables与Bootstrap一起使用，遵循一个旧的博客文章。现在有一个链接提供了有关使用Bootstrap美化Datatables的更新材料styling Datatables with bootstrap。

- Paulo Fidalgo

---

@larrylampco 我已经更新了这篇文章，并附上了最新的链接。 - Paulo Fidalgo

谢谢。当我们应用排序时，CSS的损失怎么样？ - Shanker Paudel

从DataTables 1.10.5开始，现在可以使用HTML5 data-*属性定义初始化选项。请参见stackoverflow.com/a/32281113/1430996。 - Jeromy French

谢谢@paulo，保罗，但我无法从数据表的第一列中删除排序功能，尽管我已经尝试了0“零”和“-1”值。有什么建议吗？谢谢。 - Kamlesh

Answer 5

我所使用的方法是在thead td中添加自定义属性，并通过检查该属性值来控制排序。

因此，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>

同时，JavaScript用于初始化数据表格（它将动态获取表格本身的排序信息;）

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

- Bhavesh B

---

您应该使用 data-bSortable 而不是 bSortable。bSortable 不是有效的 HTML 属性。 - James Donnelly

从DataTables 1.10.5开始，现在可以使用HTML5 data-*属性来定义初始化选项。请参见stackoverflow.com/a/32281113/1430996。 - Jeromy French

Answer 6

columnDefs现在接受一个class。如果您想在标记中指定要禁用的列，我会说这是首选方法：

columnDefs现在可以接受一个class。如果您想在标记中指定要禁用的列，则此方法可能更好。

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

- dtbarne

Answer 7

以下是可以用来禁用某个列的方法：

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

所以你需要做的就是在你不想排序的列上添加 "orderable": false。

- Constantin Stan

Answer 8

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

- abhinav

---

Bhavesh的回答很聪明，但有些过度。要禁用排序，只需使用Abhinav的答案即可。在aoColumnDefs选项中添加一个目标列来禁用第一列的排序： "bSortable": false, "aTargets": [0] - Matthew

Answer 9

截至1.10.5版本，只需在columnDefs中包含'orderable: false'，并使用'targets: [0,1]'指定列，即可实现对该列的禁用排序功能。表格应如下所示：

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

- Marko Bajlovic

Answer 10

如果要禁用单列排序，请尝试以下示例：

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

这里只有第三列可以工作

- Siddhartha esunuri