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)
});
});
Aucun commentaire:
Enregistrer un commentaire