JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script>
$(document).ready(function () {
alert("part1");
GetDepotList();
});
function GetDepotList() {
var url = "https://api.myjson.com/bins/1us28";
table = $('#DepotTable').DataTable({
"processing": true,
"ajax": {
"url": url,
},
'columnDefs': [
{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
order: [1, 'asc'],
scrollY: "400px",
scrollX: true,
paging: false,
});
$('#example-select-all').on('click', function () {
var rows = table.rows({ 'search': 'applied' }).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
$('#example tbody').on('change', 'input[type="checkbox"]', function () {
if (!this.checked) {
var el = $('#example-select-all').get(0);
if (el && el.checked && ('indeterminate' in el)) {
el.indeterminate = true;
}
}
});
$('#frm-example').on('submit', function (e) {
var form = this;
table.$('input[type="checkbox"]').each(function () {
if (!$.contains(document, this)) {
if (this.checked) {
...
JavaScript
$(document).ready(function() {
$('#example').DataTable({
scrollY: "500px",
scrollX: true,
paging: false
});
});
function CloseDepot()
{
string selectedDepot = 'Here to store all the selected DepotNo'
}