使用jquery数据表禁用列排序

时间:2010-10-14 11:21:03

标签: javascript jquery sorting datatables

我正在使用jQuery datatables plugin对表字段进行排序。我的问题是如何禁用特定列的排序?我尝试使用以下代码,但它不起作用:

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

我也尝试过以下代码:

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

但这仍未产生预期效果。

23 个答案:

答案 0 :(得分:173)

这就是你要找的东西:

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

答案 1 :(得分:82)

  

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

- dataTables documentation: HTML5 data-* attributes - table options

因此,您可以在不想要排序的列的set.seed(10239) data<-data.frame(V1=sample(c(test[1:10],LETTERS[1:10]),10)) > data V1 1 D 2 A 3 E 4 Potrs000006 5 Potrs000001 6 Potrs000007 7 Potrs000008 8 Potrs000003 9 B 10 Potrs000002 setDT(data) > data[,.(V1[V1 %in% test], "chr9")] V1 V2 1: Potrs000006 chr9 2: Potrs000001 chr9 3: Potrs000007 chr9 4: Potrs000008 chr9 5: Potrs000003 chr9 6: Potrs000002 chr9 上使用data-orderable="false"。例如,第二列&#34;阿凡达&#34;在下表中将无法排序:

th

请参阅a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/

答案 2 :(得分:63)

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

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

Disable Sorting on a Column in jQuery Datatables

答案 3 :(得分:60)

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

修改

即使您使用no-sort上的<th>课程

,也可以停用此功能

并使用此初始化代码:

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

编辑2

在这个例子中,我正在使用带有Bootstrap的Datables,跟随一篇旧的博客文章。现在有一个链接包含有关styling Datatables with bootstrap的更新资料。

答案 4 :(得分:27)

我使用的只是在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
    });
});

答案 5 :(得分:13)

columnDefs现在接受一个班级。如果您想在标记中指定要禁用的列,我会说这是首选方法:

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

答案 6 :(得分:10)

您可以使用以下内容禁用某些要禁用的列:

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

所以你要做的就是将&#34; orderable&#34;:false添加到你不想排序的列中。

答案 7 :(得分:6)

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

答案 8 :(得分:5)

1.10.5 开始,只需添加

即可
  

'orderable:false'

在columnDefs中

并使用

定位您的列
  

'目标:[0,1]'

表格应该像:

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

答案 9 :(得分:4)

对于单列排序禁用,请尝试以下示例:

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

答案 10 :(得分:4)

如果您将FIRST列orderable属性设置为false,那么必须也会设置默认的order列,否则它将无效,因为第一列是默认排序柱。下面的示例禁用第一列的排序,但将第二列设置为默认顺序列(请记住dataTables的索引基于零)。

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

答案 11 :(得分: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>

答案 12 :(得分:3)

"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

此处0是列的索引,如果您希望不对多列进行排序,请提及comma(,)分隔的列索引值

答案 13 :(得分:2)

使用class:

O_CREAT
  

现在您可以将“nosort”类提供给&lt; TH&gt;

答案 14 :(得分:2)

这适用于我的单列

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

答案 15 :(得分:1)

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

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

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

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

然后我将其合并到"aoColumnDefs"

答案 16 :(得分:1)

  1. 使用以下代码禁用第一列的排序:

    $('#example').dataTable( {
      "columnDefs": [
        { "orderable": false, "targets": 0 }
      ]
    } );
    
  2. 要禁用默认排序,您还可以使用:

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

答案 17 :(得分:1)

你可以直接在列

上使用.notsortable()方法
SAFE

答案 18 :(得分:1)

有两种方法,一种是在定义表标题时在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
        }
        ]
    }
    );
}
);

答案 19 :(得分: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": []
  });
});

答案 20 :(得分: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 ] }
    ]
});

答案 21 :(得分:0)

这是答案!

targets是列号,它从0开始

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

答案 22 :(得分:-1)

设置课程&#34; no-sort&#34;在桌子上 然后添加CSS .no-sort {pointer-events:none!important; cursor:default!important; background-image:none!important; } 通过它,它将隐藏头部的箭头updown和disble事件。