162

jQuery DataTables プラグインを使用してテーブル フィールドを並べ替えています。私の質問は、特定の列の並べ替えを無効にするにはどうすればよいですか? 次のコードを試してみましたが、うまくいきませんでした:

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

次のコードも試しました。

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

しかし、これでも望ましい結果は得られませんでした。

4

23 に答える 23

178

これはあなたが探しているものです： 

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});
于 2011-10-05T09:32:31.440 に答える
93

DataTables 1.10.5 以降、HTML5 の data-* 属性を使用して初期化オプションを定義できるようになりました。

-DataTablesの例から - HTML5 データ -* 属性 - テーブル オプション

したがって、ソート可能にしたくない列で使用できdata-orderable="false"ますth。たとえば、次の表の 2 番目の列「アバター」は並べ替えできません。

<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/ で実際の例を参照してください。

于 2015-08-28T23:21:16.530 に答える
64

最初の列の並べ替えを無効にするには、datatables jquery で以下のコードを試してください。null は、ここでの並べ替えの有効化を表します。

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

jQuery Datatables の列の並べ替えを無効にする

于 2011-01-12T19:11:52.040 に答える
6 
$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);
于 2013-11-28T05:32:16.893 に答える
5

FIRST 列orderableプロパティを false に設定する場合は、デフォルトの列も設定する必要orderがあります。そうしないと、最初の列がデフォルトの順序付け列であるため機能しません。以下の例では、最初の列での並べ替えを無効にしていますが、2 番目の列をデフォルトの順序列として設定しています (dataTables のインデックスは 0 から始まることに注意してください)。

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
于 2017-01-04T19:30:40.757 に答える
5

1.10.5の時点で、単純に含める

「注文可能: false」

columnDefs で、列をターゲットにします

'ターゲット: [0,1]'

テーブルは次のようにする必要があります。

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});
于 2015-10-21T15:39:11.563 に答える
5

単一列の並べ替えを無効にするには、次の例を試してください。

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

ここでのみColumn 3機能します

于 2015-10-05T09:50:26.510 に答える
3

Bhavishの回答を更新するには（これは古いバージョンのDataTables用であり、私にはうまくいきませんでした）。彼らは属性名を変更したと思います。これを試して：

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
于 2016-01-24T22:37:42.247 に答える
2

これは、単一の列で機能します

 $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false 
 }]});
于 2016-04-01T10:15:41.913 に答える
2

クラスの使用:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

これで、「nosort」クラスを <TH> に与えることができます

于 2015-12-27T12:20:48.123 に答える
1

  1. 次のコードを使用して、最初の列での順序付けを無効にします。

    $('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

  2. デフォルトの順序付けを無効にするには、次を使用することもできます。

    $('#example').dataTable( {
     "ordering": false, 
} );
于 2017-04-12T17:27:34.190 に答える
0

次のように負のインデックスを使用することもできます。

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});
于 2012-12-06T12:18:40.010 に答える
0

これが答えです！

targetsは列番号で、0 から始まります

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
于 2016-01-17T21:48:14.733 に答える
0

コードは次のようになります。

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});
于 2015-06-22T08:42:18.707 に答える
0

列で .notsortable() メソッドを直接使用できます

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];
于 2017-10-17T12:29:47.120 に答える
-2

テーブルの th にクラス "no-sort" を設定し、次に css .no-sort { pointer-events: none !important; を追加します。カーソル: デフォルト !重要;背景画像: なし !重要; これにより、ヘッドの矢印アップダウンと無効化イベントが非表示になります。

于 2016-04-06T11:29:00.277 に答える