I want to change the style of the select-checkbox of the datatable

Januraj

i am using datatable with select, i am actually getting the row selected but the styling of the checkbox is different compared to the normal checkbox selection
How to style the checkbox similar to normal checkbox selection?
<input class="chk-select" type="checkbox">
Current usage:
impactedTable["select"]= {
style: 'os',
selector: 'td:first-child',
};

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Januraj

	acc	Status	Product Type	Art Group	Contact Information	Step Up Details

JS::

impactedTable["select"]= {
style: 'os',
selector: 'td:first-child',
};
this.impactedList = this.$('#impacted-rangestable').dataTable(impactedTable);

tangerine

Please re-read Colin's answer, and provide a link to a test case.

Januraj

Test case : http://live.datatables.net/hagifizo/1/
similar to the : https://datatables.net/extensions/select/examples/initialisation/checkbox.html

I want to use the same styling of the The checkbox <input type="checkbox"> element.
Because in all other pages we are using <input type="checkbox"> element, but in one new page i am using the extension , which has different style.
Please help in this regard

colin

Ah, I see, thanks for the test case. You can use columns.render for that, see updated example here.

Colin

Januraj

@colin, i am not able to see the updated changes , can u please explain where are the changes and what are they?

colin

Not sure what happened there, but here it is again: http://live.datatables.net/namiwige/1/edit

The important bit of code is here:

          render: function(data, type) {
            return type === 'display'? '<input class="chk-select" type="checkbox">' : '';
          }

Colin

Januraj

Thanks @colin , it worked like charm.

i have few doubts, for this checkbox event is not habndled with 'click', it is getting handled on 'change', why is that so?

One more question, how to check whether the checkbox is selected or not for particular row,

this.$('#impacted-ranges-table tbody').on('change', '.chk-select', function (e) {
e.preventDefault();
var table =$('#impacted-ranges-table').DataTable();
var row = $(this).closest('tr');
that.rowSelected= table.row( row ).data();
});

colin

Can you update that test case to demonstrate that, please.

Colin

Januraj

@colin, I have updated the test case, it is always logging the value, even if the checkbox is unselected.
I see row always has some value, not sure how to get the checkbox status
can u please tell me how to check whether checkbox is checked or not?

colin

Can you post the link to that change, please - the URL changes on each edit.

Colin

Januraj

@colin, Link to test case : http://live.datatables.net/namiwige/2/edit

I have updated the test case, it is always logging the value, even if the checkbox is unselected.
I see row always has some value, not sure how to get the checkbox status
can u please tell me how to check whether checkbox is checked or not?

kthorngren

This SO Thread shows options to determine the checkbox checked state.

Kevin

Januraj

@colin, http://live.datatables.net/namiwige/1/edit in this test case, it is allowing multi select, But i need single selection to happen on the table.
Can you please help to make it as single select?

allan

That's really outside the scope of the support we provide for free since it isn't DataTables specific.

However, the first thing I would say, is to use radio inputs rather than checkboxes, since then the browser will do single selection for you.

If you must use checkboxes then what you would do is add a listener for the input event on the input checkboxes - inside that event listener you'd check to see if any other checkboxes are checked. If they are, uncheck them.

Allan