Javascript jquery datatable在特定行中禁用排序

如何使用类禁用jquery datatable中特定行/列的排序

这是我的样品台

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

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

---

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

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

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

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

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

---

这应该就够了。）

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

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

---

有关回调的其他文档：

您可以使用定义中的类禁用排序。 只需将以下代码添加到datatable初始化：

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

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

---

试试下面的答案。它对我有用

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

地区
访客总数
Javascript
15
PHP
3.
HTML5
32
CSS
14
XML
54
总计
118

来源：

$（文档）.ready（函数（）{
$（'#yourDataTableDivID'）.dataTable({
“aoColumnDefs”：[
{
“可移植”：错误，
“数据目标”：[“已禁用排序”]
}
]
});
});

唯一的解决方案： 首先将

class=“sorting\u disabled”

添加到要禁用排序的任何

，然后将此代码添加到数据表初始化：

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

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

---

这个代码在react中对我有效

在创建的行中，我将fixed row类添加到我希望保持固定且不可排序的行中，我隐藏了该行，然后将其附加到表本身

希望这对你有用：

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

$（this.refs.main）.数据表({
dom:“”，
数据：数据，
语言：{
“可清空”：“正在加载…”，
},
柱，
顺序：对，
订单：[0，'asc']，
德斯托里：没错，
B过滤器：是的，
固定标题：{
标题：true
},
i显示长度：100，
滚动：“79vh”，
ScrollX:“100%”，
对,，
“drawCallback”：函数（设置）{
var dataTableId=$（“#To_Scroll_List”）.find（“.dataTables_scrollBody table”）.attr（“id”）；
$（“.fixed row”）.css（'display'，'none'）；
$（“#”+dataTableId+“_包装表”）.find（'tbody tr:last'）。在（$（'.fixed row'））之后；
$（“.fixed row”）.show（）；
},
createdRow：函数（行、数据、索引）{
如果（data.UnitsPerLine==999）{
$（行）.addClass（'fixed-row'）；
} 
},
initComplete：函数（设置，json）{
$（“#To_Scroll_List”）.find（“.dataTables_scrollbodtable”）.attr（“id”）；
$（“#”+dataTableId+“thead tr”）.remove（）；
});
DatatableSearch（dataTableId+“_包装表”、“AverageUnitsPerLineReport”）；
}     
});  
}

如中所述：

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

例如：

<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日发布。

在不使用类的情况下，您可以执行以下步骤：

从表体中删除必须保持未排序的行

如果是最后一行，则在表的页脚中包含要添加的行

---

我在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);
    }
}

---

这里排序的意思是什么？上面的代码只是一个示例表：）我已经编辑过了..您可以在

aoColumns

def中将这些列的

bSortable

设置为false。检查这个例子，在我知道的第一列和第二列上禁用排序，先生，但是给定的代码总是在第一列中设置，尽管我们可以通过它的脚本来设置。下面的答案可以用作“排序被禁用”的类的动态代码。

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