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; } }
