13

クラスを使用して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');
    });

上記のコードは機能しますが、ソートされている次の列をクリックすると、再び矢印が表示されます。クリックできませんが;(

テーブルを使用/再描画せずに、クラスを使用して並べ替えを無効にするにはどうすればよいですか。

4

12 に答える 12

9

定義内のクラスを使用してソートを無効にすることができます。このコードをデータテーブルの初期化に追加するだけです:

// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "sorting_disabled" ]
} ]
于 2013-06-17T22:20:03.953 に答える
3 
$('#example').dataTable( {
  "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 1 ] }
   ]});

それはそれをするべきです..;）

于 2012-10-17T09:37:40.200 に答える
3

Datatablesのドキュメントで述べたように：

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 日に最初にリリースされました。

于 2019-08-14T17:16:13.390 に答える
2 
<th class="sorting_disabled">&nbsp;</th>

$(document).ready(function () {
    $('#yourDataTableDivID').dataTable({
        "aoColumnDefs": [
           {
               "bSortable": false,
               "aTargets": ["sorting_disabled"]
           }
        ]
    });
});
于 2013-12-19T07:54:00.827 に答える
0 
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            { "bSortable": false },
            null,
            { "bSortable": false }
        ]
    });
});
于 2012-06-13T09:19:01.290 に答える
0

以下のコードがあなたのケースで機能することを願っています。

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

その特定の列の「bSortable」による並べ替えを無効にする必要があります。

于 2012-06-13T09:14:00.020 に答える
0

質問とほぼ同じ解決策で来ましたが、「fnHeaderCallback」を使用しました。私が理解している限り、ヘッダーが再表示されるたびに呼び出されるため、ターゲット列の隣の列をクリックした後に再び表示される「並べ替え」クラスについて心配する必要はありません。

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

コールバックに関する追加ドキュメント: http://datatables.net/usage/callbacks

于 2012-12-17T10:16:00.883 に答える
0

このコードは反応して私のために働きました。

作成された行で、固定行クラスを行に追加し、固定したままにして並べ替えられないようにし、drawcallback で行を非表示にしてから、それをテーブル自体に追加しました。

これがうまくいくことを願っています：

$(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");
        }     
    });  
}
于 2018-08-08T07:01:17.150 に答える