checkbox column in jquery datatable

» javascript » checkbox column in jquery datatable

By : KeroKeroCola

Date : December 01 2020, 05:00 PM

Any of those help Set value attribute for your checkbox and use below code to get values of only checked checkbox :

code :

var arr = [];
$("#tbldriver input[type='checkbox']:checked").each(function () {
    arr.push($(this).val());
});
console.log(arr);

Share :

Checkbox checked property is not working in JQUERY Datatable column

By : Ahmed Yusuf

Date : March 29 2020, 07:55 AM

it helps some times I have a jquery datatable in which first coloumn is checkboxes.In the application while editing ,i need to display the selected items as thier checkbox checked.I am getting the data from ajax response.Data binding is working fine,but the checked attribute isn't. , Try this:

code :

activityCust.row.add({ 0: '<input class="checkboxCust" ' + response[i].IsSelected? checked="checked":""+'  value="' + response[i].ID + '" data-id="' + response[i].ID + '" type="checkbox" />', 1: response[i].Name, 2: response[i].Hours }).draw();

How to get First column of Jquery Datatable as Checkbox

By : Adisak Amornsak

Date : March 29 2020, 07:55 AM

I wish did fix the issue. I have a requirement where I need to add the first column and its subsequent row values as Checked or Unchecked checkbox. The issue that I am facing as of now is one of dynamic data from the server side. Here, both column Name and Row Values are coming from the server side. Here is the code. , you can use columnDefs to render custom html

code :

var dataObject = [{
  "columns": [{
    "title": "Select"
  }, {
    "title": "DbColumn Name"
  }, {
    "title": "UserColumn Name"
  }],
  "data": [
    ["False", "STARTDATE", ""],
    ["True", "ENDDATE", ""],
    ["False", "CLASS ", ""],
    ["True", "AUDIT_DATE ", ""]
  ]
}];

$('#SettingsDatatable').dataTable({
  "order": [],
  "dom": "Bfrtip",
  "buttons": ["copy", "csv", "excel", "pdf", "print"],
  "columnDefs": [{
    "targets": 0,
    "render": function(data, type, full, meta) {
      return '<input type="checkbox" ' + (data == 'True' ? 'checked' : '') + ' />';
    }
  }, {
    "className": "dt-center",
    "orderable": false,
    "width": 20
  }],
  "columns": dataObject[0].columns,
  "data": dataObject[0].data
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css" rel="stylesheet" />
<table id="SettingsDatatable"></table>

Select All/None checkbox inside jquery datatable column filters

By : billmack30

Date : March 29 2020, 07:55 AM

Any of those help You already have the object that contains the checkboxes in the variable ddmenu
Instead of this:

code :

$('ul.cb-dropdown').find('input[type="checkbox"]').prop('checked', this.checked)

$(ddmenu).find('input[type="checkbox"]').prop('checked', this.checked)

$(ddmenu).find('input[type="checkbox"]').prop('checked', false)

Enable or Disable Jquery Datatable Checkbox base of the value of a column

By : Vasdor

Date : March 29 2020, 07:55 AM

this one helps. Use the code below for the column containing checkboxes.
Please note that I assumed closed tickets contain "Closed" in the status column, but change the code accordingly.

code :

{
    "data": "Id", 
    "autoWidth": true,
    "render": function (data, type, full) {
        if(type === 'display'){
             var attrDisabled = '';

             // If ticket is closed
             if(full['CurrentStatus'] === 'Closed'){
                // Disable the checkbox
                attrDisabled = 'disabled';
             }

             data = '<input type="checkbox" id="cticket" name="cticket" value="' + full.Id + '" ' + attrDisabled + '/>';
        }

        return data;
    }
}

jQuery DataTable - Bind a checkbox column dynamically with server data

By : Paul Uselton

Date : March 29 2020, 07:55 AM

fixed the issue. Will look into that further In jQuery datatable, how to bind a checkbox column dynamically, when binding server data? , you can do this like below code: