4

I am using the excellent jQuery Datatables plugin.

I have a simple table, where the first column of each row is a checkbox with class .chk-items.

I want users to be able to select a number of rows, and then perform an action on all those rows which have had the checkbox checked. This may include checking one or more boxes, using the SEARCH facility to filter, then checking other boxes. This of course does mean that some rows which are checked are no longer visible (i.e. they have been filtered out).

I currently have the following to handle the checked rows:

var tableData = new Array([]);
var idx = 0;
$('.chk-items').each(function() {
//Add checked items to next tab
    if($(this).is(':checked')) {
        //Get the selected row data into an array
        var rowData = (this).closest('tr').children("td").map(function() {
            return $(this).text();
        }).get();
        tableData[idx] = rowData;
        idx = idx + 1;
    }
})

However, this doesn't work when one of the checked rows is filtered out by a search.

Can anyone suggest a way to change this to also handle checked rows filtered out by the search?

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
Si Stone
  • 121
  • 2
  • 12
  • what happens when rows are filtered, do they get a class to check for. like i.e. .invisible, .filtered. or are filtered items completely removed from the dom? – optimisticupdate Sep 28 '15 at 15:38
  • They might, but as they are no longer visible in the DOM panel in Firebug thats not straightforward to answer. I am guessing I can use something like `var rows = $("#myTable").dataTable().fnGetNodes();` but I am struggling to get that to work correctly. – Si Stone Sep 28 '15 at 15:44
  • I don't think the rows are removed entirely as removing the filter string brings the hidden rows back. – Si Stone Sep 28 '15 at 15:45

1 Answers1

1

SOLUTION

Use DataTables API method $() to perform a jQuery selection action on the full table.

var table = $('#example').DataTable();

// ... skipped ...

var tableData = [];
table.$('.chk-items').each(function() {
   // Add checked items to next tab
    if($(this).is(':checked')) {
        // Get the selected row data into an array
        var rowData = $(this).closest('tr').children("td").map(function() {
            return $(this).text();
        });

        tableData.push(rowData);
    }
});

DEMO

See this jsFiddle for code and demonstration.

LINKS

See jQuery DataTables - How to add a checkbox column for more information on using checkboxes with jQuery DataTables.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • Thanks, but this isn't quite working. Have added this in and now get `TypeError: a is null ...ce,e)}));null!==c&&(b=h.Event(c+".dt"),h(a.nTable).trigger(b,e),d.push(b.result)...` (copied from FireBug console output). – Si Stone Sep 28 '15 at 15:59
  • @SiStone, Did you change `example` to your table ID? Also use unminified DataTables JS file to see where the error occurs. Can you produce a fiddle demonstrating the error? – Gyrocode.com Sep 28 '15 at 16:01
  • Yes, I did change selector to my table ID. Will try unminified JS file, but the error was coming from jQuery.js not DataTables. Will try and put a fiddle together, but thats fiddly (sic) because of the table structure. Bear with me... – Si Stone Sep 28 '15 at 16:05
  • @SiStone, See [this jsFiddle](https://jsfiddle.net/1vuzskmt/1/) for demonstration of my solution. – Gyrocode.com Sep 28 '15 at 16:06
  • Ok, feel like a complete plonker now. Had changed the selector but introduced a typo... Have corrected the typo, but when I select my rows, I get an `undefined` output in the code which processes the selected rows. – Si Stone Sep 28 '15 at 16:15
  • @SiStone, I have corrected your code a bit, see my answer for details. – Gyrocode.com Sep 28 '15 at 16:20