Getting ALL rows to submit

dreadedmanraz

I have a datatable that I am using to display a large number of records. I am also using the table to update values for the collection.
However, when I Postback the page, I am only receiving the data for the visible pages.
I believe that Datatables removes the non-visible rows from the DOM.

How can I get the values for all of the rows in all of the pages (i.e. the dom to contain all pages)?

allan

Use the rows().nodes() method or $() method. Example.

Allan

dreadedmanraz

Thanks for that.

This is my code:

var table = $('#sort1').DataTable({
        etc...
   })

    $('#form2').on('submit', function () {
      // table.rows().invalidate().draw(); // This sends the data to the DOM correct, but then on next page load, the paging says '10' but shows all (stateSave = true).
    // table.rows().nodes().page.len(-1).draw(); // This has the same result as above
    });

So how do I get it to post to the DOM without wrecking the paging on the next load?

allan

The draw() option has the option to keep the paging where it currently is by passing false in as the first parameter. See the draw() documentation.

Allan

dreadedmanraz

This still has the same problem.
The paging on the next load does the same thing, showing 10 but displaying all.

allan

Can you link to the page and code that has this issue so we can debug it please. Using .draw( false ) should work.

Allan

dreadedmanraz

I think I found the issue. If stateSave: true, then when the page reloads, it remembers that the paging was disabled.

So is there a way I can make it post the whole collection of data, but still have stateSave: true?

allan

Can you link to the page please? I don't really understand the issue at the moment. It might be that you are using server-side processing in which case only the visible rows exist.

Allan

dreadedmanraz

I can't link to the code as it is a secured system. I am not using Server-side processing.

$(document).ready(function () {    
    var table = $('#sort1').DataTable({
        stateSave: true, // have to comment this out so on the next page load it still has paging, else it shows all rows from table
        filter: false,
        "pageLength": 25,
        "columnDefs": [
            {
                "type": "html",
                "targets": ['no-sort'],
                "orderable": false,
            },
        ],
        "autoWidth": false,
        "tableTools": {
            "aButtons": [
                {
                    "sExtends": "collection",
                    "sButtonText": "Export",
                    "aButtons": [ // Need to do for each export option because of lack of inheritance in Table Tools as at 2.2.2
                        {
                            sExtends: "csv",
                            "fnCellRender": renderColumn,
                            "mColumns": [0, 1, 2, 4,] //Only export the rows with useful values
                        },
                        {
                            sExtends: "xls",
                            "fnCellRender": renderColumn,
                            "mColumns": [0, 1, 2, 4]
                        },
                        {
                            sExtends: "pdf",
                            "fnCellRender": renderColumn,
                            "mColumns": [0, 1, 2, 4]
                        },
                    ]
                }],
            "sSwfPath": "/Scripts/plugin/datatables/TableTools/swf/copy_csv_xls_pdf.swf"
        },
        "initComplete": function (oSettings, json) {
            $(this).closest('#sort1_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function () {
                $(this).addClass('btn-sm btn-default btn-primary');
            });
        },        

        // This sets the resulting html layout i.e. https://datatables.net/reference/option/dom     
        "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'fi><'col-sm-6 col-xs-6 hidden-xs'plT>r>" +
                 't<"dt-toolbar-footer"<"col-sm-6 col-xs-12 hidden-xs"i><"col-xs-12 col-sm-6"p>><"clear">"',             
    });

    $('#form2').on('submit', function (e) {
        // Force all the rows back onto the DOM for postback
        table.rows().nodes().page.len(-1).draw(false);  // This is needed
        if ($(this).valid()) {
            return true;
        }
        e.preventDefault();
    });
});

// This extracts the value from the html inputs
function renderColumn(value, column, row, iDataIndex) {
    if (column == 2 || column == 3) {
        return $(value).val();
    }
    return value;
}

allan

I've just tried to reproduce this error here.

Steps:

1. Load the table with paging: false and stateSave: true. All rows shown.
2. Reenable paging, and leave stateSave enabling. Run and only ten rows are shown.

I'm afraid I would need a test case showing the issue to be able to understand and help address what is going wrong.

Thanks,
Allan

dreadedmanraz

I don't know how to do form submits on the live datatables.
The page needs to load with paging = true as I want the paging to work.

I'll explain the process:

1. Load page table with paging on and statesave = true.
2. OnSubmit function gets called: table.rows().nodes().page.len(-1).draw(false); This sends all the data to the DOM
3. Page submits - all data received server side.
4. Page reloads as the form posted to itself
5. Paging is lost - all rows are shown

Here is the problem, on step 5, I want to load the page with paging on so only some rows are shown. So the paging only goes off to submit the data to the server.
So this is my original question:
How do I get it to post ALL DATA to the DOM without wrecking the paging on the next page load?

allan

I'm only guessing, since I don't have a test case I can look at, but do you have state saving enabled? If so, then the page length of -1 will be saved. If that is not the case, then I would need a test case as I noted before.

Allan

dreadedmanraz

Yes I do have statesaved enabled. Is there a way around this to get it to work as I need?

allan

I would suggest trying to avoid showing all rows to be honest. Could you use an option like this: http://datatables.net/examples/api/form.html .

Allan

dreadedmanraz

I'm only showing all rows so I can post the data

allan

The example I gave above shows how you can Ajax submit the whole form without showing all rows.

However, if you want to do a full page reload submit, then what you could do is move all input elements out from the table at submit time and simply into the form.

The final alternative is to use stateSaveParams and set a flag when you submit the form that your state save parameters callback will check for and not save the -1 length option (replacing it with 10 for example).

Allan