JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">
<a href="#" id="select-node">Select using node()</a><br />
<a href="#" id="select-index">Select using index (doesn't work)</a><br />
<a href="#" id="select-data">Select using data() (doesn't work)</a><br />
<table></table>
JavaScript
// Create table
var tableApi = $('table').DataTable({
dom: 'Ttp',
columns: [{ title: "Column", name: "Column", data: "Column" }],
deferRender: true, // When set to false 'Select using node()' works
tableTools: {
sRowSelect: "os",
aButtons: [ "select_all", "select_none" ]
}
});
// Get TableTools api
var tableToolsApi = TableTools.fnGetInstance($("table")[0]);
// Add rows
for (var i=0; i<1000; i++) {
tableApi.row.add({ Column: "row" + i });
}
// Draw table
tableApi.columns.adjust();
tableApi.draw(true);
// Selection methods
$('a#select-node').click(function() {
for (var i=0; i<1000; i++) {
var row = tableApi.row(i).node();
tableToolsApi.fnSelect(row);
}
});
$('a#select-index').click(function() {
for (var i=0; i<1000; i++) {
tableToolsApi.fnSelect(i);
}
});
$('a#select-data').click(function() {
for (var i=0; i<1000; i++) {
var row = tableApi.row(i).data();
tableToolsApi.fnSelect(row);
}
});