jquery datatable 禁用特定行中的排序

Posted 2023-02-22

【中文标题】jquery datatable 禁用特定行中的排序

【英文标题】：jquery datatable disable sort in specific row

【发布时间】：2012-06-16 04:50:16

【问题描述】：

如何使用类禁用 jquery 数据表中特定行/列的排序？

这是我的示例表；

    <table>
    <thead>
    <tr>
    <th class="sorting_disabled">Title1</th>
    <th class="">Title2</th>
    <th class="sorting_disabled">Title3</th>
    </tr>
    </thead>
    <tbody>
    <tr><td>Tag 1</td><td>Date 1</td><td>Date 2</td></tr>
    <tr><td>Tag 2</td><td>Date 2</td><td>Date 2</td></tr>
    <tr><td>Tag 3</td><td>Date 3</td><td>Date 3</td></tr>
    <tr><td>Tag 4</td><td>Date 4</td><td>Date 4</td></tr>
    <tr><td>Tag 5</td><td>Date 5</td><td>Date 5</td></tr>
....
    </tbody>
    </table>

脚本；

$('.sortable thead tr th.sorting_disabled').livequery(function() 
       $(this).removeClass('sorting');
       $(this).unbind('click');
    );

上面的代码可以工作，但是如果我点击下一个有排序的列，它会再次显示一个箭头。虽然它不可点击;(

如何通过使用类而不是使用/重绘表格来禁用排序。

【问题讨论】：

这里排序是什么意思？？

以上代码只是一个示例表 :) 我已经对其进行了编辑..

您可以在aoColumns def 中将这些列的bSortable 设置为false。检查此示例，在第一列和第二列 live.datatables.net/awizop/edit#preview

上禁用排序

我知道先生，但是给定的代码总是设置在第一列，尽管我们可以通过它的脚本来设置它。下面的答案可以用作具有“sorting_disabled”的类的动态代码。

【参考方案1】：

您可以使用定义中的类来禁用排序。 只需将此代码添加到数据表初始化：

// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ 
    "bSortable" : false,
    "aTargets" : [ "sorting_disabled" ]
 ]

【参考方案2】：

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

应该这样做..;)

【参考方案3】：

如Datatables documentation中所说：

从 DataTables 1.10.5 开始，现在可以使用 html5 data-* 属性定义初始化选项。属性名称由 DataTables 读取，并可能与标准 javascript 初始化选项结合使用（以 data-* 属性为优先）。

例子：

<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th data-orderable="false">Start date</th>
        <th>Salary</th>
    </tr>
</thead>

我强烈推荐使用这种方法，因为它比其他方法更干净。 DataTables 1.10.15 最初于 2017 年 4 月 18 日发布。

【讨论】：

我尝试了一些建议，只有这个有效。谢谢。

【参考方案4】：

尝试以下答案。它对我有用。

<table class="tablesorter" id="tmp">
<thead>
    <tr>
        <th>Area</th>
        <th>Total Visitors</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Javascript</td>
        <td>15</td>
    </tr>
    <tr>
        <td>php</td>
        <td>3</td>
    </tr>
    <tr>
        <td>HTML5</td>
        <td>32</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>14</td>
    </tr>
    <tr>
        <td>XML</td>
        <td>54</td>
    </tr>
</tbody>
<tfoot>
    <tr class="no-sort">
        <td><strong>Total</strong></td>
        <td><strong>118</strong></td>
    </tr>
</tfoot>

来源：http://blog.adrianlawley.com/tablesorter-jquery-how-to-exclude-rows

【参考方案5】：

<th class="sorting_disabled">&nbsp;</th>

$(document).ready(function () 
    $('#yourDataTableDivID').dataTable(
        "aoColumnDefs": [
           
               "bSortable": false,
               "aTargets": ["sorting_disabled"]
           
        ]
    );
);

【参考方案6】：

唯一的解决方案： 首先将class="sorting_disabled"添加到要禁用排序的any<th>中，然后将此代码添加到数据表初始化中：

        // Disable sorting on the sorting_disabled class
        "aoColumnDefs" : [ 
            "bSortable" : false,
            "aTargets" : [ "sorting_disabled" ]
         ],
        "order": [
            [1, 'asc']
        ],

【参考方案7】：

我希望下面的代码适用于你的情况。

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

您需要通过“bSortable”为该特定列禁用排序。

【参考方案8】：

$(document).ready(function() 
    $('#example').dataTable( 
        "aoColumns": [
             "bSortable": false ,
            null,
             "bSortable": false 
        ]
    );
);

【参考方案9】：

我提供了与问题中几乎相同的解决方案，但我使用了“fnHeaderCallback”。据我了解，每次重新显示标题后都会调用它，因此无需担心单击目标列旁边的列后再次出现的“排序”类。

$('.datatable').dataTable(
  "fnHeaderCallback": function() 
    return $('th.sorting.sorting_disabled').removeClass("sorting").unbind("click");
  
);

关于回调的其他文档：http://datatables.net/usage/callbacks

【参考方案10】：

这段代码在反应中对我有用。

在创建的行中，我将固定行类添加到我想要保持固定且不可排序的行中，我通过回调隐藏了行，然后将其附加到表本身。

希望这对你有用：

$(this.refs.main).DataTable(
        dom: '<"data-table-wrapper"t>',
        data: data,
        language: 
            "emptyTable": "Loading ...",

        ,
        columns,
        ordering: true,
        order: [0,'asc'],
        destory:true,
        bFilter: true,
        fixedHeader: 
            header: true
        ,
        iDisplayLength: 100,
        scrollY: '79vh',
        ScrollX: '100%',
        scrollCollapse: true,
        "drawCallback": function( settings ) 
            var dataTableId = $("#To_Scroll_List").find(".dataTables_scrollBody table").attr("id");
            $("..fixed-row").css('display','none');
            $("#"+dataTableId+"_wrapper table").find('tbody tr:last').after($('.fixed-row'));
            $(".fixed-row").show();
        ,
        createdRow: function (row, data, index) 
                if(data.UnitsPerLine == 999)
                    $(row).addClass('fixed-row');
                 
        ,
        initComplete: function (settings, json) 

           $("#To_Scroll_List").find(".dataTables_scrollBodytable").attr("id");
            $("#"+dataTableId+" thead tr").remove();



            );

            DatatableSearch(dataTableId+"_wrapper table", "AverageUnitsPerLineReport");
             
    );  

【参考方案11】：

不使用类，您可以按照以下步骤操作：

从表格主体中删除必须保持未排序的行。 如果要添加的行是表的最后一行，请将其添加到表的页脚中。

【参考方案12】：

我在drawCallback中包含以下代码：

drawCallback: function(settings) 
    let td = $("td:contains('TOTAL')");
    if (td.length) 
        let row = td.closest('tr');
        let clonedRow = row.clone();
        row.remove();
        $('table tbody').append(clonedRow);