Javascript 禁用jQuery数据表中特定列的排序

我正在使用jQuery对表字段进行排序。我的问题是：如何禁用特定列的排序？我已尝试使用以下代码，但不起作用：

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

我还尝试了以下代码：

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

---

但这仍然没有产生预期的结果。

要禁用第一列排序，请尝试使用datatables jquery中的以下代码。null表示此处启用的排序

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

---

这就是您要寻找的：

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});

---

您也可以像这样使用负索引：

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

$(".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": []
  });
});

$（'.datatable'）.datatable({
“sDom”：“t”，
“sPaginationType”：“引导程序”，
“aoColumnDefs”：[
{'bSortable'：false，'aTargets'：[-1]}
]
});

我使用的只是在AD td中添加一个自定义属性，并通过自动检查attr值来控制排序

因此，HTML代码将是

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

---

使用Datatables 1.9.4，我已使用以下代码禁用第一列的排序：

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

编辑2

在这个例子中，我在一篇旧的博客文章后面使用带有引导的数据库。现在有一个链接与更新的材料有关

---

此处

0

是列的索引，如果您不想对多个列进行排序，请提及以

逗号（，）

分隔的列索引值。以下是您可以用来禁用某些要禁用的列的方法：

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

---

因此，您所要做的就是将“orderable”：false添加到您不希望排序的列中。

columnDefs

现在接受一个类。如果要在标记中指定要禁用的列，我认为这是首选方法：

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

---

如果您已经必须隐藏某些列，如我隐藏姓氏列。我只需要连接fname，lname，所以我进行了查询，但从前端隐藏了该列。在这种情况下，禁用排序的修改如下：

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

注意，我在这里有隐藏功能

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

---

然后我将其合并到

“aoColumnDefs”

中，代码如下所示：

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

$(".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": []
  });
});

$（“.data cash”）。每个（函数（索引）{
$（此）.dataTable({
“sDom”：“t”，
“sPaginationType”：“引导程序”，
“语言”：{
“SLENGHMENU”：“每页记录”，
“oPaginate”：{
“以前的”：“以前的”，
“sNext”：“下一步”
}
},
“bSort”：错误，
“aaSorting”：[]
});
});

---

从数据表1.10.5开始，现在可以定义初始化 使用HTML5数据-*属性的选项

-从

因此，您可以在不希望排序的列的

th

上使用

data orderable=“false”

。例如，下表中的第二列“化身”将不可排序：

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

名称
阿凡达
开始日期
薪水
老虎尼克松
2011/04/25
$320,800
加勒特温特斯
2011/07/25
$170,750
…[等等]。。。

---

请参阅。

有关单列排序禁用，请尝试以下示例：

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

$（文档）.ready（函数（）
{
$（“#示例”）.dataTable({
“aoColumnDefs”：[
{'bSortable'：false，'aTargets'：[0]}
]
});
});                                         

对于多个列，请尝试以下示例：您只需要添加列号。默认情况下，它从0开始

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>  

$（文档）.ready（函数（）
{
$（“#示例”）.dataTable({
“aoColumnDefs”：[
{'bSortable'：false，'aTargets'：[0,1,2,4,5,6]}
]
});
});                                         

---

此处仅

第3列

自1.10.5起生效

，仅包括

'可订购：false'

在columnDefs中，使用

'目标：[0,1]'

表应类似于：

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});

使用类：

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

员工姓名
发送日期
发件人
亚历山大·施瓦茨
27.12.2015
dummy@email.com
$（文档）.ready（函数（）{
$（'#tableID'）。数据表({
“iDisplayLength”：100，
“aaSorting”：[[0，“asc”]]，
“aoColumnDefs”：[{
“bSortable”：错误，
'目标'：['nosort']
}]
});
});

现在您可以将“nosort”类设置为

答案就在这里

targets

是列号，从0开始

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

---

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

要求
自动化
创建于

这对我来说只适用于一列

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

在表的th中设置类“no sort” 然后添加css .no sort{指针事件：无！重要；光标：默认值！重要；背景图像：无！重要；}

---

这样，它将在头部隐藏上下箭头和disble事件。

如果将第一列

orderable

属性设置为false，则必须同时设置默认的

order

列，否则它将不起作用，因为第一列是默认的排序列。下面的示例禁用对第一列的排序，但将第二列设置为默认顺序列（请记住，dataTables的索引是基于零的）

使用以下代码禁用第一列上的排序：

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

要禁用默认排序，还可以使用：

$('#example').dataTable( {
     "ordering": false, 
} );

---

您可以直接在列上使用.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()
        ];

---

有两种方法，一种是在定义表头时在html中定义的

<thead>
  <th data-orderable="false"></th>
</thead>

另一种方法是使用javascript，例如

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

$('#example').dataTable( {
     "ordering": false, 
} );

 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()
        ];

<thead>
  <th data-orderable="false"></th>
</thead>

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);