如何將索引列添加到dataTables表中？

Question

我有一個table這是填充使用jQuery數據表。我想知道：

1. 如何添加索引列。 dataTables.net站點有一個示例，它告訴如何給當前索引文件索引屬性而不是如何使它。

2. 我想讓我的列中的一個音量滑塊。它只有一個介於0-100之間的數字，並且想使用jQueryUI滑塊來製作它。我應該在哪裏啓動滑塊功能？在dataTables初始化函數之前或之後它又如何？

Answer 1

添加一個索引列覆蓋相當不錯的在線文檔在這裏：https://datatables.net/examples/api/counter_columns.html

至於音量滑塊，我沒有找到一個黑客-Y的方式得到它的工作。我在tad中添加了一個空的th，並在tbody的每一行的開頭添加了一個td。第一個TD有滑塊div和3個行距（我的例子只有3行）。其他tds是空的，具有顯示風格：無。

<table id="myTable" class="display"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td rowspan="3"> 
       <div id="slider"></div> 
      </td> 
      <td>Row 1 Data 1</td> 
      <td>Row 1 Data 2</td> 
     </tr> 
     <!-- Other rows here --> 
    </tbody> 
</table> 

在JS中，我使用文檔中顯示的示例索引列，並進行了一些更改。我正在初始化DataTable的「initComplete」上的滑塊，並且在對錶進行排序或搜索時再次進行。

var table = $("#myTable").DataTable({ 
    //Table options here 
    "initComplete":function(){ 
     $("#slider").slider(sliderOpts); 
    } 
}); 

table.on('order.dt search.dt', function(){ 
    table.column(0, {search:'applied', order:'applied'}).nodes().each(function(cell, i){ 
     if(i == 0){ 
      $(cell).attr("rowspan","3").html("<div id='slider'></div>").css("display","table-cell"); 
      $("#slider").slider(sliderOpts); 
     } else { 
      cell.innerHTML = ''; 
      $(cell).css("display","none") 
     } 
    }) 
}).draw(); 

這裏是我的解決方案的的jsfiddle：https://jsfiddle.net/r7jwv76L/2/