How to get my values using the select checkbox?

How to get my values using the select checkbox?

lenamtllenamtl Posts: 265Questions: 65Answers: 1
edited December 2019 in Free community support

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1

    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 ...

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1

    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?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1

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

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1
    edited 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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • lenamtllenamtl Posts: 265Questions: 65Answers: 1

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • DonMurphyCanadaDonMurphyCanada Posts: 2Questions: 0Answers: 0

    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">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
                    } 
    
  • DonMurphyCanadaDonMurphyCanada Posts: 2Questions: 0Answers: 0

    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"

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

This discussion has been closed.