Scroll DataTable => Missing parameters on form submit

omega842

I'm trying to submit a form. Inside the form there is a table that is dynamically populated. 10 parameters are sent for each row. The submit works fine with small data but it seems to have a limit with large data. Some times the parameters of the first rows are missing and some times are the parameters of the last rows. This is totally random. But the limit seems to be always the same.

If I do not use Datatable the submit works just fine. Even if I'm not using pagination, Datatable is limiting the number of rows the form can POST.

Here is the DataTable code:

$('#tbl-stats').DataTable({
            deferRender: true,
            scrollY:     400,
            scroller:    true
});

I'm using DataTables 1.10.18 & jQuery v3.3.1

My users are used to DataTables and I'll want to continue using it. Any ideas on how to avoid that limit?

I've already tried this but result is still the same: https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/

Thanks in advance for your help!

kthorngren

Not sure how Datatables would be the limiting factor of the POST since the POST request is not initiated by Datatables.

Any ideas on how to avoid that limit?

Without seeing what you are doing it is impossible to say. Please post a link to your page or a test case replicating the issue. This will allow use to take a look.

Kevin

omega842

Thanks for the answer !

Not sure how Datatables would be the limiting factor of the POST since the POST request is not initiated by Datatables.

Well, when using pagination all rows are not created in the DOM and those rows will not be submitted. In that case POST request may not be initiated by Datatables.

So far so good.

But, as I said I'm not using pagination and all the rows are there. As I also said if I just delete the Datatable code all rows are submitted.

If I change the code with paging: false all rows are submitted. But I would really like to keep the scroll.

// All rows are submitted using this.
jQuery('#tbl-stats').DataTable({
     paging: false
});

So I really think scroll is limiting the POST submit some how.

Without seeing what you are doing it is impossible to say. Please post a link to your page or a test case replicating the issue. This will allow use to take a look.

This a private company's site so unfortunately I can not send a link.
I hope there is a simple answer to this without having to do a test case replicating the issue...

kthorngren

But, as I said I'm not using pagination and all the rows are there. As I also said if I just delete the Datatable code all rows are submitted.

Your description helps, thanks. Yes, with paging and with scroller the HTML table will only have the rows displayed. Instead of using the methods you are now to get the table data you will need to use Datatables API's such as rows().data(). This will get the data from Datatables data cache which contains all of the rows.

Kevin

omega842

Thanks Kevin for your answer.

I did test your solution I was still missing some rows. I was also getting some errors from the API. I also tested other Datatable's based solutions but I still was missing some rows.

At this point I think that other JS libraries on the project are interfering with jQuery's. I will study this when I will have the time.

What I finally did is to remove Datatable's initialisation on the table and to use a pure CSS solution to do the scroll. If someone is interested, my solution is based on this:

http://jsfiddle.net/hashem/CrSpu/557/

Thanks again for your help !

kthorngren

I looked at the Gyrocode solutions and updated one of them with scroller and it gets all the rows:
https://jsfiddle.net/xsyre7b6/

Maybe you can provide a test case showing what you are attempting so we can help debug.

Are you adding rows to the table after Datatables is initialized? If so that may be the problem if you aren't using Datatables API's to add the rows.

Kevin