Javascript 如何向dataTables表添加索引列？

我有一个

表

，它是使用jquerydatatables填充的。我想知道：

如何添加索引列。该网站提供了一个示例，说明如何为当前索引文件提供索引属性，而不是如何创建它

我想让我的一列成为音量滑块。它只有一个介于0-100之间的数字，并且希望使用jQueryUI滑块来创建它。我应该在哪里初始化滑块功能？在dataTables初始化函数之前或内部或之后，以及如何执行

---

添加索引列在此处的在线文档中有很好的介绍：

至于音量滑块，我确实找到了一个简单的方法让它工作。我在thead中添加了一个空th，在tbody中每行的开头添加了一个td。第一个td具有slider 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>

第1栏
第2栏
第1行数据1
第1行数据2

在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();

var-table=$（“#myTable”）.DataTable({
//这里的表格选项
“initComplete”：函数（）{
$（“#滑块”）.slider（sliderOpts）；
}
});
表.on（'order.dt search.dt'，函数（）{
table.column（0，{search:'applicated'，order:'applicated'}）.nodes（）.each（函数（单元格，i）{
如果（i==0）{
$（cell.attr（“rowspan”，“3”）.html（“”.css（“display”，“table cell”）；
$（“#滑块”）.slider（sliderOpts）；
}否则{
cell.innerHTML=''；
$（单元格）.css（“显示”、“无”）
}
})
}).draw（）；

以下是我的解决方案：