how can I show th(column header) as checkbox?

ChuckLu

Hi,
I want to make the column header show as a checkbox.
I have added class="select-checkbox" for th element in html, but it did not work.

I have checked the css file I got.
and I find the css contains the following code
why the th element is following tbody?

I tried to replace the the tbody with thead, then the column header can show as checkbox.
but the when I click it, it did not trigger (because the tr for thead did not have class with selected)
table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
content: '\2714';
margin-top: -11px;
margin-left: -4px;
text-align: center;
text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

I try to check the js file, but it's too complicated. I did not find the code where you set the class with selected for tr(which contains thead).

allan

I want to make the column header show as a checkbox.

It sounds like you want to do more than that - making the checkbox show is easy! Making it do something is more difficult since that isn't a feature offered by Select at the moment. What you would need to do is call the rows().select() method to select all rows (or rows().deselect() to deselect all rows, depending on its state).

Allan

ChuckLu

Hi @allan,
I already use rows().select() to select all.
And I don't want to use the select all button.

I want to make the column header as a checkbox, then click the header can support select all.

colin

Hi @ChuckLu ,

This example here uses rows().select() as Allan suggested - that's the way to go.

Cheers,

Colin

ChuckLu

Hi @ccolin,
thanks, I am using the same implementation as you.
The problem is the style for checkbox in the column header , is not the same as the style in column.

colin

That'll be a styling issue - you can change them to be the same in the CSS

C

ChuckLu

Hi @colin,
I tired to modify the css as I mentioned, then I set the class of the th element as select-checkbox.
I got the following

colin

Hi @ChuckLu ,

Styling is fiddly - you'll need to send a link to your page or create a test case. 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

ChuckLu

Hi @colin,
please check this demo
http://live.datatables.net/vamuneho/1/edit
I paste the whole css for datatables.css and add support for thead th .select-checkbox

allan

if ($('#select_all:checked').val() === 'on') {

this is wrong. Your checkbox doesn't have a value, so it can never be "on". Use the method shown in this SO post instead.

Allan

ChuckLu

Hi @allan,
http://live.datatables.net/decuxoda/2/edit
Tried with your suggestion, and it can check all,but the "select-checkbox" overwrite the original input type=checkbox.
And it seems the click still bound to the original checkbox, instead of the "select-checkbox".

ChuckLu

Hi @allan,
I tried add hide the input type=checkbox as following,
http://live.datatables.net/decuxoda/3/edit
then it stop working with the click event

bindrid

is this what you are looking for?
http://live.datatables.net/kuwaduta/1/edit

ChuckLu

Hi @bindrid ,
yes, it's exactly what I want.
maybe you can integrated this feature into the select extension.

By the way, there is a problem when I am using server-side model. when I switch to second page,the column header is still checked.
Currently, I just want the select all work with the current page. so, when I switch to second page, the checked on select all should be unchecked automatically.

ChuckLu

Hi @bindrid ,
I am using the table.rows().count() to get the count of rows.
http://live.datatables.net/kuwaduta/2/edit
I have read the definition for rows().nodes(), but I did not understand. What's it ?and When to use it?(https://datatables.net/reference/api/rows().nodes())

ChuckLu

Hi @bindrid ,@allan, @colin,
Thanks all guys.
Finally, I come up with the solution http://live.datatables.net/kuwaduta/18/edit
I use draw.dt event to get the selected class of headerRow to decide select all rows or not under server-side mode.
@bindrid thanks a lot, it's first time that I know there are methods like toggleClass, hasClass. I will take time to learn the basic usage of JQuery later.