How to get my values using the select checkbox?

lenamtl · December 2019

Hi,

I need a checkbox for each row / line (multi selection) that would be use to select item for let say delete items.

I know there is a plugin to select using checkbox I have tried it it seems to work ok but
but how can I use it to get my own values let say each row have a $item_id how can I pass that to the plugin?

I know I can add the code manually into the table but if there is a way to achieved the same using datatables select plugin
<td><input type='checkbox' id='delete' value='<?php echo $item_id; ?>' name='deleteitem' ></td>

I just need a little example to start with

Also I'm wondering is this working fine with responsive?

Thanks

kthorngren · December 2019

Are you wanting to use the Select Extension Checkbox?

You can use the buttons for delete, etc and only enable the button when rows are selected, like this example

You can place teh checkbox into any column to avoid using the first column for the default location of the Response column control. Or you can move the Responsive column control to another column as shown in this example

Kevin

lenamtl · December 2019

Hi,

If I use the select extension, it populate the checkbox automatically into the column.

My question is how can I set a value for each checkbox for each line
value='<?php echo $item_id; ?>'

I guess that will be easier to do code it manually ...

lenamtl · December 2019

Is this can be done with Get selected items?
https://datatables.net/extensions/select/examples/api/get

Any example on how to get a specific value from a row?

kthorngren · December 2019

You would use either rows().data() or row().data() depending on whether you are dealing with one or multiple rows.

Kevin

lenamtl · December 2019

Could you give me an example with multiple row...

is there a way just to set a value to the checkbox?

kthorngren · December 2019

Here is an example:
http://live.datatables.net/cekoqazu/1/edit

It also uses the pluck() and toArray() APIs.

is there a way just to set a value to the checkbox?

Not sure what you mean The checkbox is either off or on.. What value do you want to set?

Kevin

lenamtl · December 2019

Let say I need the $item_id when selecting a row

this value is an hidden value not displayed directly into the table.

So If I could pass the value to the checkbox
then on click of a button get the array of ids

Right now
I populate manually the checkbox so I'm wondering if I could pass my value to the generated checkbox if I do not generate the check box manually, using Select or
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

The manual way using the checkbox value $item_id

<td><input type='checkbox' class='delete_check' value='<?php echo $item_id; ?>' ></td>

                $('#checkall').click(function(){
                    if($(this).is(':checked')){
                        $('.delete_check').prop('checked', true);
                    }else{
                        $('.delete_check').prop('checked', false);
                    }
                });

    $('#delete_record').click(function(){
    
                    var deleteids_arr = [];
                     $("input:checkbox[class=delete_check]:checked").each(function () {
                        deleteids_arr.push($(this).val());
                    });
                    
                     if(deleteids_arr.length > 0){
    
                        var confirmdelete = confirm("Do you really want to Delete records?");
                        if (confirmdelete == true) {
                            /* $.ajax({
                                url: 'ajaxfile.php',
                                type: 'post',
                                data: {request: 2,deleteids_arr: deleteids_arr},
                                success: function(response){
                                    dataTable.ajax.reload();
                                }
                            });
                            */
                            alert(deleteids_arr);
                        } 
                    }
                });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren · December 2019

this value is an hidden value not displayed directly into the table.

Where is it hidden? Is it part of the row data even though its not displayed?

If the value $item_id is part of the row data then you can access it using the above techniques.

I guess the question is how is $item_id tied to the row data?

I could be wrong but as far as I know there is nothing built into the select extension to allow for setting the checkbox value.

You can use cell().node() to get the td or row().node() to get the tr. From this you should be able to get the checkbox value.

Kevin

lenamtl · December 2019

Hi,

the $item_id is not displayed, it is accessible because it is a part of the result of my MySQL query, I use it to set the edit button ect but this is not a table column value at the moment.

I wish we could set the checkbox value of the select extension...

I will make some test and let you know if I find a way...
Thanks

kthorngren · December 2019

One option is to create a hidden column with the $item_id instead of a checkbox. Then you can use the select extension and with Datatable's APIs get the value of the $item_id column.

Kevin

lenamtl · December 2019

ok thanks that would do the job

I endup using Select with checkboxes extension
https://jsfiddle.net/lenamtl/j3er1on5/

Do you know the differences between using

Select & Checkbox
https://datatables.net/extensions/select/

VS
Select & jquery-datatables-checkboxes
https://github.com/gyrocode/jquery-datatables-checkboxes

kthorngren · December 2019

The Gyrocode Checkboxes plugin uses the Select extension and it provides some interesting API's as documented here:
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

One thing it easily does is add a check all checkbox into the header. I haven't used it but it does seem useful. Basically its your preference of which to use as the underlying code (select extension) is the same.

Kevin

DonMurphyCanada · April 2021

Is there really no way to set a checkbox to the checked state on page load?

I have this same issue.

Running the Chrome Developer Tool Console I found the selector of the cell I want to enable is

Selector

-tbody->-tr.odd.selected->-td.select-checkbox">-tbody->-tr.odd.selected->-td.select-checkbox" href="#tguests->-tbody->-tr.odd.selected->-td.select-checkbox">tguests > tbody > tr.odd.selected > td.select-checkbox

The structure is:
<tbody><tr class="odd selected"><td class="sorting_1">1</td><td class=" select-checkbox">1</td><td>Don</td><td>Juan</td></tr><tr class="even"><td class="sorting_1">2</td><td class=" select-checkbox">1</td><td>Cathi</td><td>Juan</td></tr><tr class="odd"><td class="sorting_1">3</td><td class=" select-checkbox">0</td><td>Dave</td><td>Yee</td></tr><tr class="even"><td class="sorting_1">4</td><td class=" select-checkbox">1</td><td>Anne</td><td>Yee</td></tr></tbody>

<td class=" select-checkbox">1</td>
::before
"1"
::after

::after shows up after you check the box

Is there no way to set this checkbox to checked without adding a plugin?

    $(document).ready(function() {
        var events = $('#events');


        $('#tguests').DataTable( {
            dom: 'Bfrtip',
            columnDefs: [
                {
                    "searchable": false,
                    "visible": true,
                    "targets": 0
                },
                {
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 1
                }

DonMurphyCanada · April 2021

One other thing

tr class="odd" when cleared
tr class="odd selected" selected

Is it just as simple as setting the class to "odd selected" or "even selected"

kthorngren · April 2021

Is there really no way to set a checkbox to the checked state on page load?

You can set the checkbox states when the Datatable loads. See this Editor example of checkboxes being set based on the value in the DB. How to do this with your page depends on your requirements. We can help if you tell us what you are trying to do.

Is there no way to set this checkbox to checked without adding a plugin?

You can manage the checkboxes on your own. The Select extension is used for selecting rows. You can use APIs to get or select rows using the Select extension. Apps like the Editor use the extension to know which rows are selected for editing. You can use the Select extension classes to provide a checkbox, see this example.

The choice of using the Select extension is based on the table's requirements.

Here is a simple example without the Select extension:
http://live.datatables.net/mutavegi/1/edit

Kevin

How to get my values using the select checkbox?

How to get my values using the select checkbox?

Answers

-tbody->-tr.odd.selected->-td.select-checkbox">-tbody->-tr.odd.selected->-td.select-checkbox" href="#tguests->-tbody->-tr.odd.selected->-td.select-checkbox">tguests > tbody > tr.odd.selected > td.select-checkbox

Howdy, Stranger!

Categories

DataTables

How to get my values using the select checkbox?

How to get my values using the select checkbox?

Answers

-tbody->-tr.odd.selected->-td.select-checkbox">-tbody->-tr.odd.selected->-td.select-checkbox" href="#tguests->-tbody->-tr.odd.selected->-td.select-checkbox">tguests > tbody > tr.odd.selected > td.select-checkbox

Howdy, Stranger!

Quick Links

Categories

DataTables