[英]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.