JSFiddle - React, Tailwind, and code Playground
HTML
<table id="users" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>PID</th>
<th>Destination</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>PID</th>
<th>Destination</th>
</tr>
</tfoot>
</table>
JavaScript
$(document).ready(function () {
var selected = [];
$('#users').DataTable({
"processing": true,
"serverSide": true,
"ordering": false,
aLengthMenu: [
[10, 25, 50, 100, "-1"],
[10, 25, 50, 100, "All"]
],
"ajax": "/cgi-bin/users",
"rowCallback": function (row, data) {
if ($.inArray(data.DT_RowId, selected) !== -1) {
$(row).addClass('selected');
}
},
"columns": [{
"data": "id",
"searchable": false
}, {
"data": "name",
"searchable": true
}, {
"data": "pid",
"searchable": true
}, {
"data": "destination",
"searchable": true
}, {
"mRender": function (data, type, row) {
if (row.destination == 'Group') {
return '<a href=update_group.html?id=' + row.id + '&pid=' + row.pid + '&destination=' + row.destination + '&name=' + row.name.replace("'", "%27") + '>Edit</a> <a href=# onclick=delete(' + row.id + ',' + row.pid + ',true)>Delete</a>';
} else {
return '<a href=add_device.html?id=' + row.id + '&pager=' + row.pid + '&destination=' + row.destination + '&name=' + row.name.replace(" ", "%20") + '>Edit</a>  <a href=# onclick=delete(' + row.id + ',' + row.pid + ',0)>Delete</a>';
}
}
}
]
});
});
var delete = function (rowid, pid, group) {
$("#results").html("<img src=\"assets/images/ajax-loader.gif\" />");
$.ajax({
url: "/cgi-bin/test_delete",
dataType: "json",
data: {
pid: pid,
rowid: rowid,
group: group
},
success: function (data) {}
});
},
complete: function () {}
});
};