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

时间:2016-02-02 14:38:48

标签: javascript sorting 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 },
        ], */
	
    });

    });
&#13;
<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>D.O.J</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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

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

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

要禁用可排序的列

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

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

这是我在使用没有合适的模板引擎的部分/视图时通常会采用的方法

答案 1 :(得分:1)

列中定义的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 ] }
    ], 

});

});