繁体   English   中英

如何在数据表的第一列上禁用排序效果

[英]how to disable sorting effect on the first column of a datatable

在下面给出的datatable构造中,如果单击列标题,则表内容将根据单击的列进行排序。 我想从第一列中删除此排序功能,即单击名称,不会进行排序。 我尝试了很少的机制,但似乎都没有。 有人可以建议一个解决方案吗?

代码如下:

 $(document).ready(function() { $('#table_1').DataTable({ "columns": [ { "width": "1%" }, null, null, null, ], "paginate": false, // "scrollY": "475px", // "scrollX": "100%", "bSort" : true, bFilter: true, bInfo: true, "scrollCollapse": true, "dom": '<"toolbar">frtip', "oLanguage": { "sSearch": "Search" }, "sScrollY": "200px", "bAutoWidth": false, /*"columnDefs": [ { "orderable": false, "targets": 0 }, // { targets: 'no-sort', orderable: false }, ], */ }); }); 
 <html> <head> <script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div> <table id="table_1" name="table_1" class="display cell-border compact" cellspacing="0" border ="1" align = "center" width="10%"> <thead> <tr bgcolor= "blue"> <th align=right>Name</th> <th align=right>Place</th> <th align=right>DOJ</th> <th align=right>Phone</th> </tr> </thead> <tbody> <tr> <td align=right>John</td> <td align=right>Bristol</td> <td align=right>03-09-2015</td> <td align=right>999999</td> </tr> <tr> <td align=right>Mark</td> <td align=right>Leeds</td> <td align=right>03-06-2015</td> <td align=right>9999777</td> </tr> </tbody> </table> </div> <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script> <script type="text/javascript" src ="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src ="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script> <script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> <script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> <script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> </head> <body> <style> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css"/> </style> </body> </html> 

只是为了变化。 你也可以去html属性路由并执行此操作

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

要禁用的列,您可以对其进行排序

请注意,如果您感兴趣,还应该按照您想要的方式设置oder

<table data-order='[[1, "asc"]]' ...

这是我在使用部分/视图时通常不使用正确的模板引擎的方法

在列的定义中指出bSortable,试试这个..

$(document).ready(function() {
 $('#table_1').DataTable({
   "columns": [
        { "width": "1%" },
        null,
        null,
    null,
    ],
     "paginate": false,
   // "scrollY": "475px",
   // "scrollX": "100%",
    "bSort" : true,
    bFilter: true,
    bInfo: true,
    "scrollCollapse": true,
    "dom": '<"toolbar">frtip',
    "oLanguage": {
    "sSearch": "Search"
    },
"aaSorting": [[ 1, "asc" ]],
    "sScrollY": "200px",
    "bAutoWidth": false,
"columnDefs": [
        { "bSortable": false, "aTargets": [ 0 ] }
    ], 

});

});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM