Question

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

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

HTML：

<div>
    <table id="my-table" class="table table-striped table-hover table-bordered" width="100%">
        <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")
            })
        }
    })
})

请注意，单击某行时，警报会在表格指示选中该行之前打开，“已选择”行数表示单击前选择的行，而不是单击后选择的行。 / p>

我考虑过根据点击的项目，点击的方式（即按住Ctrl键单击，按住Shift键单击）以及是否在点击时选择了所选行的列表来手动确定所选行的列表。对于简单的用例，这一开始看起来很容易，但是当我开始挖洞时，我意识到它比我想要处理的更复杂。

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

Answer 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

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

1 个答案: