使用jquery数据表禁用列排序-Java 学习之路

145

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

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

我也尝试了以下代码：

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

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

23 回答

这就是你要找的东西：

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

回复于 2024-05-02T15:29:50+08:00

从DataTables 1.10.5开始，现在可以使用HTML5 data- *属性定义初始化选项 .

dataTables documentation: HTML5 data-* attributes - table options

因此，您可以在不希望排序的列的 th 上使用 data-orderable="false" . 例如，下表中的第二列"Avatar"将不可排序：

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

见a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/ .

回复于 2024-05-02T15:29:50+08:00

77
要使第一列排序禁用，请尝试使用datatables jquery中的以下代码 . null表示此处的排序启用 .
```
$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );
```
Disable Sorting on a Column in jQuery Datatables
回复于 2024-05-02T15:29:50+08:00

使用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 ]
        } ]
    });
});

EDIT:

您甚至可以使用 <th> 上的 no-sort 类禁用，

并使用此初始化代码：

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

EDIT 2

在这个例子中，我正在使用带有Bootstrap的Datables，遵循旧的博客文章 . 现在有一个链接，其中包含有关styling Datatables with bootstrap的更新资料 .

回复于 2024-05-02T15:29:50+08:00

我使用的只是在thead 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>

用于初始化数据表的JavaScript将是（它将动态地从表自身获取排序信息;）

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});

回复于 2024-05-02T15:29:50+08:00

columnDefs 现在接受一个 class . 我想在你的标记中指定要禁用的列：

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

然后，在你的JS中：

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});

回复于 2024-05-02T15:29:50+08:00

以下是禁用某些列的禁用方法：

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

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

回复于 2024-05-02T15:29:50+08:00

$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);

回复于 2024-05-02T15:29:50+08:00

1
截至 1.10.5 ，只需包括

'orderable：false'

在columnDefs中并使用

'目标：[0,1]'

表应该像：
```
var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});
```
回复于 2024-05-02T15:29:50+08:00

对于单列排序禁用尝试此示例：

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

回复于 2024-05-02T15:29:50+08:00

1
如果将FIRST列 orderable 属性设置为false，则 must 也会设置默认的 order 列，否则它将赢得't work since first column is the default ordering column. Example below disables sorting on first column but sets second column as default order column (remember dataTables'索引为零 . ）
```
$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
```
回复于 2024-05-02T15:29:50+08:00
6
```
"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]
```
这里 0 是列的索引，如果你想要多列没有排序，请提及由 comma(,) 分隔的列索引值
回复于 2024-05-02T15:29:50+08:00

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

回复于 2024-05-02T15:29:50+08:00

使用课程：

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

回复于 2024-05-02T15:29:50+08:00

这适用于单列

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

回复于 2024-05-02T15:29:50+08:00

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

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

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

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

然后我把它合并到 "aoColumnDefs"

回复于 2024-05-02T15:29:50+08:00

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

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

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

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

回复于 2024-05-02T15:29:50+08:00

-1

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

回复于 2024-05-02T15:29:50+08:00

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

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

回复于 2024-05-02T15:29:50+08:00

代码如下所示：

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

回复于 2024-05-02T15:29:50+08:00

这是答案！

targets 是列号，它从0开始

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

回复于 2024-05-02T15:29:50+08:00

171

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

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

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

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

回复于 2024-05-02T15:29:50+08:00

1

在表格中设置类“no-sort”然后添加css .no-sort {pointer-events：none！important; cursor：default！important; background-image：none！important;通过它，它将隐藏头部中的箭头updown和disble事件 .

回复于 2024-05-02T15:29:50+08:00

使用jquery数据表禁用列排序

23 回答

相关问题