DataTables/TableTools - Is it possible to get an accurate list of the selected row(s) when a row is clicked?

Question

I am working on an administration app using DataTables and TableTools and would like to be able to enable/disable elements (e.g. buttons) in real time as rows in a DataTable are selected. The intent is to determine the administrative options presented to the user based on the items they select as well as other factors, and have the app respond to that determination.

My problem is that the row's on 'click' callback is called before the row is selected, so attempts to call the TableTools fnGetSelected function within the callback results in incorrect data. Here is a jsfiddle that shows what I mean:

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")
            })
        }
    })
})

Note that when a row is click, the alert opens before the table indicates that the row is selected, and the number of "selected" rows represents the rows selected prior to the click, not the rows selected after the click.

I thought about manually determining the list of selected rows based on the item clicked, how it was clicked (i.e. ctrl-click, shift-click), and whether or not it was already selected at the time of the click. For simple use cases this seemed easy at first, but as I started down the rabbit hole I realized it was more complex than I want to deal with.

Is there any way to do what I want to do without re-implementing the TableTools selection functionality? If not I may scrap my desire to use the "os" style of row selection and do something that would make manually determining the selected rows easier.

Answer 1

Maybe something like this?

$(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
    })
});

Use fnRowSelected

See TableTools Initialisation