【问题标题】:DataTable sorting: make one column stay fixed数据表排序:使一列保持固定
【发布时间】:2015-10-11 13:20:12
【问题描述】:

我使用jQuery数据表插件。排序工作正常,但有一种方法,使一只停留总是一样的,不管排序是应用了哪些? P>

例如,第一列都只是简单订单编号:1,2,3,4,5 ... 当我按日期排序,或其他任何东西,第一列停留在相同的顺序:1,2,3 ..?

有没有办法做到这一点?所以,我并没有被第一列试图禁用排序,但要当由另一列应用排序第一列保持不变。 P>

【问题讨论】:

    标签: jquery sorting datatables


    【解决方案1】:

    在寻找相同问题的解决方案时遇到了这个问题。 这是docs 中包含的解决方案。

    $(document).ready(function() {
    var t = $('#example').DataTable( {
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );
    
    t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
    

    });

    基本上,每当触发ordersearch 事件时,索引列都会重新编号。 searchableorderable 设置为 false,因为它们对索引列没有影响(无论如何它仍然会重新编号)。

    【讨论】:

      【解决方案2】:

      您可以通过使用 orderFixed 选项来做到这一点,该选项定义了将始终应用于表格的排序。

      例如,始终按升序对第一列进行排序:

      $('#example').dataTable( {
          "orderFixed": [ 0, 'asc' ]
      } );
      

      【讨论】:

      • 谢谢你,正是我想要的
      【解决方案3】:

      您的 HTML 代码将如下所示。向要禁用排序的列添加一个类。

      <table class="table table-bordered" id="example" >
      <thead>
      <tr id="tbl_header1">
          <th  class="no-sort" name="prop_ref_no" style="min-width:80px">PropRef</th>
          <th  class="no-sort" name="title" style="min-width:80px">title</th>
          <th  name="publish_status" style="min-width:80px">Publish status</th>
          <th  name="Bedrooms" style="min-width:200px">Bedrooms</th>
      </tr>
      </thead>
      

      然后添加您的 dataTable 选项。

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

      SRC:https://datatables.net/forums/discussion/21164/disable-sorting-of-one-column

      【讨论】:

      • 感谢您的回答。然而,这正是我不想做的,我假设每个人都会建议,所以我在我的信息中明确表示:“所以,我不是试图禁用按第一列排序,而是让第一列保持不变其他列应用排序时也是如此。"
      猜你喜欢
      • 1970-01-01
      • 2011-12-12
      • 1970-01-01
      • 2019-12-31
      • 1970-01-01
      • 1970-01-01
      • 2023-03-05
      • 1970-01-01
      • 2016-03-20
      相关资源
      最近更新 更多