使dataTables.js jQuery插件無法生成列

Question

我正在使用dataTables.js jQuery插件。

我的表的第一列是行計數器，所以我不希望它可以由用戶排序。最後一列包含用戶可以在一行上執行的一些操作鏈接。我怎樣才能使這兩列無法使用？

注意：我正在使用流水線（服務器端進程）模式的數據表。

Answer 1

aaSortingFixed

此參數是基本相同 到aaSorting參數，但不能被 通過用戶交互與 表中重寫。這意味着，你可以 具有排序總是 被迫在第一列（可見或隱藏 ） - 之後的任何排序是（從用戶），屆時將根據需要進行 。這可以是 用於將行分組在一起。使用的

實施例：

$(document).ready(function() { 
    $('#example').dataTable({ 
     "aaSortingFixed": [[0,'asc'],[5,'asc']] 
    }); 
}); 

0是你 '不可排序' 的行數（左起）。 （所以在這個例子中，第一和六分之列是固定的）

Official Documentation

Answer 2

這是通過設置bSortable爲false完成：

/* Using aoColumnDefs */ 
$(document).ready(function() { 
    $('#example').dataTable({ 
     "aoColumnDefs": [ 
      { "bSortable": false, "aTargets": [ 0 ] } 
     ] }); 
}); 

/* Using aoColumns */ 
$(document).ready(function() { 
    $('#example').dataTable({ 
     "aoColumns": [ 
      { "bSortable": false }, 
      null, 
      null, 
      null, 
      null 
     ] }); 
}); 

Answer 3

您可以定義一個回調函數的支持不變的號碼順序在單獨的列中：

$('#someId').dataTable({ 
     // ... 
     "aoColumns": [ 
      // ... 
      {"bSortable": false}, // set unsortable this column 
      // ... 
     ], 
     fnDrawCallback: function(oSettings) { 
      $(this).find('tbody tr').each(function(index) { 
       $(this).find('td').eq(1).text(index + 1); // .eq([index of column]) 
      }); 
     } 
    }); 

Answer 4

有幾種方法禁用對特定列進行排序。

最直截了當的方法是使用所述aoColumnDefs參數來配置列（多個）：

/* 
* aoColumnDefs must be an array of objects (definitions) 
* each definition must contain the aTargets property that 
* specifies the columns on which the definition applies 
* and other properties such as bSortable, bSearchable, bVisible 
*/ 
var aoColumnDefs = [ 
    { 
     "aTargets": [0, 6], 
     "bSortable": false 
    } 
]; 
var dataTable = $('#example').dataTable({ 
    "aoColumnDefs": aoColumnDefs 
}); 

其他的，不靈活的選項是使用aoColumn參數來配置列（多個）：

/* 
* aoColumn must be an array of objects 
* the array size must match the number of columns 
* use null to tell the plugin to use default settings for that column 
*/ 
var aoColumns = [ 
    /* 0 */ { "bSortable": false }, 
    /* 1 */ null, 
    /* 2 */ null, 
    /* 3 */ null, 
    /* 4 */ null, 
    /* 5 */ null, 
    /* 6 */ { "bSortable": false } 
]; 
var dataTable = $('#example').dataTable({ 
    "aoColumns": aoColumns 
}); 

演示：

• Default behavior
• Make un-sortable using aoColumnDefs option
• Make un-sortable using aoColumn option

文檔：

• Column options
• Reference

Answer 5

數據表1.10+也supports HTML5 data- style attributes，包括data-sortable="false"，這使得柱沒有資格進行排序：

<table> 
    <thead> 
     <tr> 
      <th data-sortable="false">Row</th> 
      <th>Name</th> 
      <th>Join Date</th> 
      <th>Organization</th> 
      <th data-sortable="false">Options</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      [etc] 
     </tr> 
    </tbody> 
</table> 

See this demo in jsFiddle