Haven't yet seen an example of this anywhere. My multi-selection datatable loads from an array and uses a Gyrocode checkbox plugin to build a checkbox column. I'm fine with assigning user selections to an array - see button at top of table which outputs to console. However, I need to send one, or several, pre-selections to the datatable on initialisation so that the table starts up with those selections already highlighted and checked. Those selections can change, so I guess they'd need to be sent to the table as a variable of some sort. I'm stumped as to how to do this with my data structured as it is, although ideally I want to keep it as it is. Any ideas anyone? https://jsfiddle.net/sg0o3bwL/1/
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css" rel="stylesheet" />
<button id="myselections" type="button" style="height: 20px; width: 150px;">See selections</button>
<form id="frm-example" action="/nosuchpage" method="POST">
<table id="example" class="display select" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<!-- invisible col. for enable/disable separation -->
<th>Order</th>
<th>Sort</th>
<th>Sort</th>
<th>Sort</th>
<th>Province</th>
<th>City</th>
<th>Status</th>
<th>Sort</th>
<th>Type</th>
</tr>
</thead>
</table>
</form>
$(function() {
var MYdataSet1 = [
["", "1", "Bahrain", "Foulath", "Bahrain Steel BSCC", "Cobham", "Venice", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
["", "2", "Bombay", "Foulath", "United Stainless Steel Company", "Ealing", "Rome", "x", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
["", "3", "Bahrain", "Foulath (51%) :: Yamato Kogyo (49%)", "United Steel Company (Sulb)", "Kingston", "Milan", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
["", "4", "Universal Rolling", "", "", "acton", "Arson", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
["", "5", "Abul Khair Steel Products (AKSP)", "Jackson", "", "Barnes", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM", ""],
["", "6", "Bangladesh", "Anwar Isphat", "", "Sheen", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
["", "7", "Baizid Steel", "Baizid Steel", "", "Mayfair", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
["", "8", "Bengalh Steel Rolling Mills (BSRM)", "", "", "Park lane", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
];
// 'Initialise' DataTable
var TradeDatatable = $('#example').DataTable({
data: MYdataSet1,
orderCellsTop: true,
fixedHeader: true,
scrollCollapse: true,
paging: false,
processing: true,
orderCellsTop: true,
'columnDefs': [{
targets: 0,
visible: false
}, // This refers to the invisible column only - used to sort enabled from disabled rows
{
'targets': 1, // Refers to the Checkbox col. only
'checkboxes': {
'selectRow': true
},
},
],
'select': {
'style': 'multi'
},
"order": [
[2, "asc"]
], // Default sorted column no.
orderFixed: [0, 'desc'],
});
//------------------
// List all ticked row selections
$('#myselections').click(function(e) {
var form = this;
// Assume chkbxes to be in column 1 (col 0 is purposely blank)
var rows_selected = TradeDatatable.column(1).checkboxes.selected();
// Iterate over all selected checkboxes
$.each(rows_selected, function(index, rowId) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
// Raw list of selected rows
var RawRowNumbers = rows_selected.join(",");
var CurrentSelectedArray = RawRowNumbers.split(','); // split string on comma
function sortNumber(a, b) {
return a - b;
}
CurrentSelectedArray.sort(sortNumber);
console.log('Table selected_rows:', CurrentSelectedArray)
});
});
There are a couple of things you can do here, but either way, you need to add
select: true,
to your table settings...like so:
data: MYdataSet1,
orderCellsTop: true,
fixedHeader: true,
scrollCollapse: true,
paging: false,
processing: true,
orderCellsTop: true,
select: true,
Then after the table is loaded, you can run something like this:
TradeDatatable.rows([1,2]).select();
This will select rows 2 and 3 (row 1 actually is 0). However, it selects BEFORE the sorting you have applied. If you take out your sorting, you'll see the rows selected exactly in the order in the array above. There are lots of ways besides the row number that you can use to select what you need. See here: https://datatables.net/reference/api/rows().select()
You can select by a class on the row (which you can add) or the content of a specific column of the row, but without knowing what parameters you want your search based on, it's hard to say.
UPDATE:
You can also select based on the content in a column:
TradeDatatable.rows( function ( idx, data, node ) {
return data[2] === 'Bahrain';
} )
.select();
This would select any row where the 3rd column (2nd in index) has the word "Bahrain"