how to submit id using jQuery DataTables Checkboxes

Question

I have a table and I am calling the rows using php.

    foreach ($rowData as $row) : $id = $row->_kpnID; ?>
    <tr class="editable details-control collapsed" data-values="action" id="{{ $id }}"...

My output looks looks like this:

    <thead><tr role="row" class="selected">
    <th>Checkbox</th>
    <th>Ticket No</th>
    <th>Name</th>
    </thead>
    <tbody>
    <tr class="editable details-control collapsed odd selected" data-values="action" id="152808" rel="row-152808" data-key="152808" data-url="show/152808" role="row">
    <td><input type="checkbox" class="ids" name="ids[]" value="152808"></td>                    
    <td id="bookingdata" data-values="152808" data-field="_kpnID" data-format="152808">W-152808</td>
    <td id="bookingdata" data-values="SIMPSONS" data-field="tGuestName" data-format="SIMPSONS">SIMPSONS</td>
    </tr>
    <tr class="editable details-control even expanded" data-values="action" id="152868" rel="row-152868" data-key="152868" data-url="show/152868" role="row">
    <td><input type="checkbox" class="ids" name="ids[]" value="152868">  </td>                  
    <td id="bookingdata" data-values="152868" data-field="_kpnID" data-format="152868">DPAW-152868</td>
    <td id="bookingdata" data-values="Wade Harris" data-field="tGuestName" data-format="Wade Harris">Wade Harris</td></tr></tbody>

I came across to the jQuery DataTables Checkboxes plugin which allows to select and post the selected row id.

I don’t call the rows as json format. One day I would like to call them in json format but at the moment I just simply use the html code above.

I am not sure how to submit the the id(s) using Checkboxes plugin since I am not retrieving the id's via ajax. The id 152808 above is simply been called with $id in my php file. I would appreciate if you could edit the this jsfiddle and show me how to submit the id(s).

is best to keep your id unique, instead of using id, try make it to class? — Se0ng11
– Se0ng11, Commented Apr 13, 2017 at 14:52
I am using for different id for each row because the rows are expanding using ajax and showing additional data below the row after the row is selected. So, to do that the only way for me was to use different id for each row. — Johnny
– Johnny, Commented Apr 13, 2017 at 15:06

Gyrocode.com · Accepted Answer · 2017-04-13 21:30:38Z

1

There was an issue with 1.2 branch affecting tables with HTML- or JavaScript-sourced data, that has been updated in 1.2.4 release. Please download the latest version from jquery-datatables-checkboxes page.

Also you don't need to generate <input type="checkbox"> elements, just wrap your ID in <td></td>.

See this example for code and demonstration.

edited Apr 13, 2017 at 21:30

answered Apr 13, 2017 at 17:59

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johnny Over a year ago

Thank you very much. Great plugin! I am trying it now. It seems like you have a lot of knowledge about the datatables. Can I ask you to have a look to stackoverflow.com/questions/43393796/… this question? I am also trying to use keys feature. If I use checkboxes plugin I don't need to use select plugin right? Could you please show me how to add the keys feature on the example you provided? When I add keys: true it doesn't work.

Gyrocode.com Over a year ago

@hijacker83, thanks for reporting the issue, just released an update to the latest version fixing it. I will try to look at your other question too.

Johnny Over a year ago

The only thing I was trying to achieve there was to use the keys and selects plugins at the same time. On the example you povided it seems that checkboxes plugin is acting as select plugin when selecting the rows. Even multiple selection is working by pressing the ctrl button. So, I guess no need to use select plugin. If I can use checkboxes plugin with keys plugin to select the rows that would be awsome. Meaning when I press down arrow it must deselect the previous selected row & checkbox. jsfiddle.net/snqw56dw/526 this is what I did so far but couldn't make them work together.

Collectives™ on Stack Overflow

how to submit id using jQuery DataTables Checkboxes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related