Get all rows and values of what is in DOM with html elements

firehawk

Hi all,

so I am obtaining my data from the server and then giving the data to the DataTables.
I also am rendering checkboxes for a column so I can do a select all. The twist here is that the same column holds the value from the data source, so I am rendering the checkbox value (true/false) based on the data then applying the select all to the column.

So far so good however I have noticed that if I alter the state of the checkbox and try to get the data using

$('#MyTable').DataTable().rows().data().toArray()

it retrieves the old values that were bound.

How can I iterate through each row to obtain values of each columns including a hidden column (which would be the record ID) which is set in the columnDefs to not be visible?

 function BindData(theData) {

            table = $('#MyTable').DataTable({
                data: theData,
                searching: true,
                processing: true,
                filtering: true,
                "pagingType": "simple_numbers",
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": false,
                        "searchable": false,
                        "render": function (data, type, full, meta) {
                            return '<input type="hidden" name="id[]" value="' + $('<div />').text(data).html() + '">';
                        }
                    },
                    {
                        "targets": [1],
                        "className": "dt-body-center",
                        "orderable": false,
                        "checkboxes": { selectAllPages: false },
                        "render": function (data, type, full, meta) {
                            return '<input type="checkbox" name="checkBoxId[]" value="' + $('<div />').text(data).html() + '">';
                        }
                    }
                 ],
                columns: [
                    { "data": "Id"},
                    { "data": "Completed", "render": simple_checkbox },
                    { "data": "LastName" },
                    { "data": "FirstName" },
                    { "data": "Comments"}
                ]
            });

            // Handle click on "Select all" control
            $('#example-select-all').on('click', function () {
                // Get all rows with search applied
                var rows = table.rows({ 'search': 'applied' }).nodes();
                // Check/uncheck checkboxes for all rows in the table
                $('input[type="checkbox"]', rows).prop('checked', this.checked);
            });

            // Handle click on checkbox to set state of "Select all" control
            $('#MyTable tbody').on('change', 'input[type="checkbox"]', function () {
                // If checkbox is not checked
                if (!this.checked) {
                    var el = $('#example-select-all').get(0);
                    // If "Select all" control is checked and has 'indeterminate' property
                    if (el && el.checked && ('indeterminate' in el)) {
                        // Set visual state of "Select all" control
                        // as 'indeterminate'
                        el.indeterminate = true;
                    }
                }
            });
        }

So upon a button click, I want to obtain all the rows with the fields of my choice whether its through the DOM and getting the elements for that row I am iterating through OR via the DataTables API.

Thank you

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

colin

Because the checkbox is active, you would need to get the node for that cell, then get the value, something like $(cell(1,2).node()).val(). To get the node, there are a few options, such as cell().node(), cells().nodes(), and then similar methods for rows and columns,

Colin