DataTables/TableTools - 单击一行时是不是可以获得所选行的准确列表？

Posted 2023-05-09

【中文标题】DataTables/TableTools - 单击一行时是不是可以获得所选行的准确列表？

【英文标题】：DataTables/TableTools - Is it possible to get an accurate list of the selected row(s) when a row is clicked?DataTables/TableTools - 单击一行时是否可以获得所选行的准确列表？

【发布时间】：2015-06-22 01:11:53

【问题描述】：

我正在使用 DataTables 和 TableTools 开发管理应用程序，并且希望能够在选择 DataTable 中的行时实时启用/禁用元素（例如按钮）。目的是根据用户选择的项目以及其他因素来确定呈现给用户的管理选项，并让应用响应该决定。

我的问题是在选择行之前调用了行的“单击”回调，因此尝试在回调中调用 TableTools fnGetSelected 函数会导致数据不正确。这是一个jsfiddle，说明了我的意思：

html：

<div>
    <table id="my-table" class="table table-striped table-hover table-bordered" >
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody id="my-table-body"></tbody>
    </table>
</div>

javascript：

var dtColumns = [
    [ "title", "Column Number 1" ], 
    [ "title", "Column Number 2" ]
]

var dtData = [
    ["Some Data", "More Data"],
    ["Some Data", "More Data"],
    ["Some Data", "More Data"],
    ["Some Data", "More Data"],
    ["Some Data", "More Data"]
]

$(document).ready(function() 
    $("#my-table").dataTable( 
        dom: 'T<"clear">lRrtip',
        tableTools: 
            "sRowSelect": "os",
            "aButtons": ["sExtends": "select_none", "sButtonText": "Clear     Selection"]
        ,
        "data": dtData,
        "columns": dtColumns,
        fnRowCallback : function(row, data, index, indexFull) 
            $(row).on('click', function(e) 
                var ttInstance = TableTools.fnGetInstance("my-table")
                alert(ttInstance.fnGetSelected().length + " items selected")
            )
        
    )
)

请注意，当点击一行时，警报会在表格指示该行被选中之前打开，并且“选中”的行数表示点击前选中的行，而不是点击后选中的行。

我考虑过根据单击的项目、单击的方式（即 ctrl-click、shift-click）以及单击时是否已选择它来手动确定所选行的列表。对于简单的用例，一开始这似乎很容易，但当我开始进入兔子洞时，我意识到它比我想要处理的要复杂得多。

有没有什么方法可以在不重新实现 TableTools 选择功能的情况下做我想做的事情？如果不是这样，我可能会放弃使用“os”样式的行选择并做一些可以使手动确定所选行更容易的事情。

【参考方案1】：

也许是这样的？

$(document).ready(function() 
    $("#my-table").dataTable( 
        dom: 'T<"clear">lRrtip',
        tableTools: 
            "sRowSelect": "os",
            "aButtons": ["sExtends": "select_none", "sButtonText": "Clear Selection"],
            fnRowSelected: function(nodes) 
                var ttInstance = TableTools.fnGetInstance("my-table");
                alert(ttInstance.fnGetSelected().length + " items selected");
            
        ,
        "data": dtData,
        "columns": dtColumns
    )
);

使用fnRowSelected

见TableTools Initialisation

【讨论】：

哇。我很尴尬，我错过了。我只会责怪谷歌只返回有关点击回调的链接，并假装我在浏览文档时没有完全看清这一点:) 感谢您为我指明正确的方向。