DataTable : Add checkbox in jquery datatable and handle button event
How to add checkbox in jquery datatable and how to manage selected list on button click event. Solution is below,
HTML
<fieldset class="clearfix fs-border">
<legend class="fs-border">User's List:</legend>
<div class="box-body">
<table id="myTable" class="display responsive table table-striped dataTable no-footer" cellspacing="0" width="100%">
<thead>
<tr>
<th class="text-center"><input type="checkbox" name="select_all" value="1" id="example-select-all"></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Status</th>
</tr>
</thead>
</table>
<input type="button" id="btnSubmit" value="Submit Data" class="btn btn-default" />
</div>
</fieldset>
JQuery:
var table = "";
var count = 0;
var totalCount = 0;
var checkedCount = 0;
$(document).ready(function () {
$("#messagebox").hide();
table = $("#myTable").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"paging": true,
"responsive": true,
"ajax": {
"type": "POST",
"url": "ControllerName/GetJsonData",
"dataSrc": function (data) {
//Make your callback here.
if (data.value == "fail") {
window.location = "Unauthorised";
} else {
//console.log(data);
}
countall(data.data);
return data.data;
}
},
"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"]],
"columns": [
{
data: null,
orderable: false,
width: 100,
render: function (data, type, row) {
//console.log(data);
return "<input type='checkbox' id='" + data.userId + "'> "
}
},
{ "data": "FirstName", "name": "FirstName" },
{ "data": "LastName", "name": "LastName" },
{ "data": "Email", "name": "Email" },
{ "data": "Mobile", "name": "Mobile" },
{ "data": "Status", "name": "Status" },
]
});
function countall(data)
{
totalCount = data.length;
}
// Handle click on "Select all" control
$('#example-select-all').on('click', function () {
// Get all rows with search applied
var rows = table.rows({ 'search': 'applied' }).nodes();
// Check/uncheck checkboxes for all rows in the table
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
// Handle click on checkbox to set state of "Select all" control
$('#myTable tbody').on('change', 'input[type="checkbox"]', function () {
// If checkbox is not checked
if (!this.checked) {
var el = $('#example-select-all').get(0);
// If "Select all" control is checked and has 'indeterminate' property
if (el && el.checked && ('indeterminate' in el)) {
// Set visual state of "Select all" controlas 'indeterminate'
el.indeterminate = true;
}
}
/// Set select all checkbox tick and untick
checkedCount=0;
table.$('input[type="checkbox"]').each(function () {
if (this.checked) {
checkedCount++;
if(totalCount==checkedCount)
{
$('#push-select-all').prop("indeterminate", false);
$('#push-select-all').prop('checked', true);
}
}
});
});
// Handle send event for selected users
$('#btnSubmit').on('click', function (e) {
var membersList = [];
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function () {
if (this.checked) {
membersList.push({ userId: $(this).attr('id') });
//console.log($(this).attr('id'));
count++;
}
});
if (count == 0)
{
alert("Please select atleast one user to submit data.");
}
else {
$.ajax({
type: "POST",
url: "ControllerName/ActionMethodName",
contentType: 'application/json',
data: "{userList :" + JSON.stringify(membersList) + ",message :\"" + $("#Message").val() + "\"}",
success: function (retdata) {
if (retdata == "success")
alert("Message sent successfully.");
else
alert(retdata);
}
});
}
});
});
C# Code:
[HttpPost]
public JsonResult ActionMethodName(List<VMUsers> userList, string message)
{
var returnMessage = "business return message";
return Json(returnMessage, JsonRequestBehavior.AllowGet);
}
public class VMUsers
{
public string userId { get; set; }
}
Enjoy !!!
:)