[COMPLETE SOLUTION] - Passing Filtered and/or Paginated Form Fields with Optional Check All Feature

Joyrex · March 2014

I'm posting this "complete solution" (hopefully it is for the vast majority of you) of how to handle passing form fields that are visible or hidden (due to pagination or filtering) and optionally, having a "check all" checkbox. I spent the last few days culling together various bits to come to this complete solution that met all my needs - hopefully it will save others time in future and possibly help less experienced users understand what is possible with the power of dataTables. Let's get started.

PROBLEM: You need to pass form fields (usually in the form of a checkbox) from rows in your dataTable to another script via a FORM. You need to account for not only form fields that are not visible (say due to pagination or filtering), but also the visible fields as well. A "check all" feature would aid users with large datasets if they wanted to do a "check all", filtering or not.

It's important to understand dataTables removes hidden nodes (aka rows in your dataTable) from the DOM, so simply wrapping a FORM around your dataTable will NOT pass all the checkboxes that are there - it will only pass the visible ones (visible because of the current page in the pagination set you are viewing, or due to filtering of the dataset, or a combination of both).

By including two plugins (one of which is detailed in the dataTables API) (http://datatables.net/plug-ins/api), we can solve these issues.

To include these plugins, you must save the following code to a .js file, or include them BEFORE you initialize the dataTable (e.g.: before the $('yourtable').dataTable() in your script block). If you are including them as a file, they must come AFTER jQuery, and AFTER the dataTables JS script includes. For example:

```html

```

Notice the two filenames - fnGetHiddenNodes and fnGetFilteredNodes - each one handles different aspects of our problem, and as you might surmise, the fnGetHiddenNodes handles any nodes that are hidden (by pagination), and fnGetFilteredNodes handles any nodes that are filtered (whether they are hidden by pagination or not).

Since fnGetFilteredNodes is not in the API Documentation (the link I provided above), here is the script:

```js
$.fn.dataTableExt.oApi.fnGetFilteredNodes = function ( oSettings )
{
var anRows = [];
for ( var i=0, iLen=oSettings.aiDisplay.length ; i

allan · March 2014

Fantastic - thanks for compiling this information and putting it all together. I'm sure it will benefit a number of others!

Regards,
Allan

Haruya · June 2014

Hi Joyrex..

I've read the instruction above, and seems like i cannot get the code to run properly..

the code still send the current page value, i'm trying to insert the checked value to database, but my code seems like only send the first page of the tables.

Rollout · September 2014

Hi, I am trying to get a "Check All" checkbox in the the DataTables TH area to check all the boxes in all the rows - WHEN using pagination. Presently, it checks all the boxes in the current page, but not subsequent pages (page 2, 3, etc). I am using the following initialization code:

$(document).ready(function () { var table = $('#tblDisplay').DataTable({ scrollX: true, paging: true, bFilter: false, ordering: false, pagingType: 'full_numbers', }); new $.fn.dataTable.FixedColumns(table, { leftColumns: 5, }); });

Any idea how I can extend this code to include page 2, 3, etc?

perelli · February 2015

Very nice :)

I have a question - do you know how to make this work when "bDeferRender": true is set? When this is set, only items on first page is selected.

allan · February 2015

The whole point of deferRender is that the nodes aren't created until they are needed (i.e. drawn on the page). So simply put the solution above is not compatible with deferred rendering since it requires the nodes to be available.

Allan

kshitijahuja · June 2015

Hey Guys,

Some nice work there. Does this applies to the newer versions of DataTables (1.10 onwards)? I am using sbadmin2 with datatables the above code doesnt seems to work for me.

Any suggestions?

Thanks!

Joyrex · July 2015

No, the API for DataTables 1.10 is different - it's actually a lot simpler as you don't need the functions anymore mentioned above as the new API can handle things. For instance:

This is the update version of the check all (filtered, paginated or both) script:

$('#emailMembers #check_all').change(function() {

    var checked = $(this).is(":checked");

    $("input", table.rows({search:'applied'}).nodes()).each(function(){
        if(checked){
            $(this).attr("checked", true);
        }
        else {
            $(this).attr("checked", false);
        }
    });

});

Just make sure when you initialize the DataTable, you are using DataTable() versus dataTable (note the uppercase "D") - that will invoke the new API.

allan · August 2015

I would even simplify that:

$('#emailMembers #check_all').change(function() {
    var checked = $(this).is(":checked");

    $("input", table.rows({search:'applied'}).nodes()).prop( 'checked', checked );
} );

No need for the loop, since jQuery will do that for you :-). Also you don't need the if statement for a boolean setting, since you already have the boolean value you want to set.

Allan

Joyrex · August 2015

@Allan: Nice! Learn something new every day! Thanks!

ViniciusMachado · August 2015

Hi Joyrex, I'm having problem with the input and select fields. I tried to use your solution but I could'nt. I'm using the new version of Datatables any clue for me? The data still not sending from the form via post. When I submit I got nothing.

Regards,

Joyrex · August 2015

@ViniciusMachado: Not sure quite what you mean about the input and select fields - can you make a JSFiddle or DataTables Live of your code?

ViniciusMachado · August 2015

Hi @Joyrex thanks for the response but I've just realized I was making a stupid mistake ;(

There was a tag not closed at my code. Regards

Joyrex · August 2015

Ah, good! Glad you got it sorted out!

noguer19 · September 2015

@Allan, I´m using your code but i don´t know why it only works twice. I mean, i click the select all checkbox the first time and it chek them all, then i click it again and it uncheck them all too, but if i want to check them all again it does not work anymore. Can you suggest something? this is the code i´m using:

<script>
    $(function () {
        var table = $('#MyTable').DataTable({
            "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]]
        });

        $("#check_all").change(function () {
            var checked = $(this).is(":checked");
            alert(checked);
            $("input", table.rows({ search: 'applied' }).nodes()).attr('checked', checked);

        });
    });
</script> 

then into the thead i´ve got this:  <input name="checkboxname" type="checkbox" value="All" id="check_all">&nbsp; <label>Select All</label>

noguer19 · September 2015

Well i found the solution in stackoverflow and it´s just using the prop() method instead of attr(). not so sure what the difference is but now it works fine..

allan · September 2015

Yes - $().prop() is the correct method to use here, not $().attr(). I've updated my post. Thanks for pointing this out.

Allan

[COMPLETE SOLUTION] - Passing Filtered and/or Paginated Form Fields with Optional Check All Feature

[COMPLETE SOLUTION] - Passing Filtered and/or Paginated Form Fields with Optional Check All Feature

Replies

Howdy, Stranger!

Categories

DataTables

[COMPLETE SOLUTION] - Passing Filtered and/or Paginated Form Fields with Optional Check All Feature

[COMPLETE SOLUTION] - Passing Filtered and/or Paginated Form Fields with Optional Check All Feature

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables