j查询数据表禁用特定行中的排序

jquery datatable disable sort in specific row

本文关键字:排序 查询 数据表      更新时间:2023-09-26

如何使用类禁用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');
    });

上面的代码有效,但如果我单击下一列,谁有排序,它再次显示一个箭头。 虽然它不可点击;(

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

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

// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "sorting_disabled" ]
} ]
$('#example').dataTable( {
  "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 1 ] }
   ]});

那应该可以做到..;)

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

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

如数据表文档中所述:

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

请尝试以下答案.it对我有用。

<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

<th class="sorting_disabled">&nbsp;</th>
$(document).ready(function () {
    $('#yourDataTableDivID').dataTable({
        "aoColumnDefs": [
           {
               "bSortable": false,
               "aTargets": ["sorting_disabled"]
           }
        ]
    });
});

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

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

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

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

在创建的行中,我将固定行

类添加到我想要保持固定且不可排序的行中,并且我抽回了该行,然后将其附加到表本身。

希望这对您有用:

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

不使用class,您可以按照以下步骤操作:

  1. 从表的正文中删除必须保持未排序的行。
  2. 如果要添加到表的页脚中的行是最后一行,则包括该行。

我做到了,包括下面的代码在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);
    }
}