pageLength with Ajax not working (all rows is on one page)

grossik

Hello.
I have problem with pageLength parametr, that doesn't work with Ajax. Ajax return json with parametrs draw, recordsTotal, recordsFiltered and data (of course).
My javascript code:

            table = $('#ticketTable').DataTable({
                "order": [[ 0, "asc" ]],
                "columnDefs": [
                    { "targets": [0], "sortable": false }
                ],
                "lengthChange": false,
                "processing": true,
                "serverSide": true,
                "pageLength": 25,
                paging: true,
                "ajax": {url: "/getSeznamServisuJSON"},
                "columns" : [
                    { "data" : ....
                ]      
            });

Below the table is message "Showing 1 to 25 of 555 entries", but all rows is on one page. I can go to next page, however data are same. What's wrong?

btw: sorry for my bad English

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

sandy

Hi grossik,

"ajax": {url: "/getSeznamServisuJSON"},

This error suggests that this script is not implementing server side processing. Details on how to perform server side processing can be found here.

If you only have 500 or so records then don't use server side scripting, it just introduces network latency. Have a look at this FAQ Page for more details.

Hope this helps,

Sandy

grossik

Hi sandy,
no this is not my problem.

I see all 555 records on page and if I click Next page I see all 555 records too.
(I use spring-mvc that I post ajax to Java)

allan

What Sandy said is true. If you have server-side processing enabled (which you do, since you have serverSide enabled) then it is up to the server-side script to limit the data returned to the client to that needed only for the current page. The whole point of server-side processing is that the server will return only data for the current page!

It sounds like you don't need server-side processing, so I'd suggest just removing that option.

It would also be worth your reading over this section of the manual which describes the fundamental difference between client-side and server-side processing for DataTables.

Allan

grossik

Thanks allan!
I thought I need serverSide: true for ajax.
Sorry

Mausino

@Alan

My question is to similar that i don't want open new thread in forum.

I have set up in options pageLength: 10,

My server side searching working great.. if i change length to 25 it will render me the 25 of results from database and shows in dataTables.

Now i am showing this results on maps from looping value mapData

var mapData = table.rows().data();

This shows me in console 10 results on fist load of table which is ok, but on change to for example 25 or 50 entities in datables, i'm still getting only 10 results when i call value mapData in console...

Do i need somehow on flow change the value pageLenght somehow ? or need to add some value to json which i sending by Ajax to dataTables (like totalItems ) that rows().data() will generate me correct number of results if the number by dropdown in datatable is changed ?

i saw page.len() api but dont know how to use it if number of entities in datables are changed bu length value which i receive to php.

Sorry for my english

kthorngren

using rows().data() with server side processing works in this example:
http://live.datatables.net/dumeyuyi/1

Default page length 10:

$('#example').DataTable().rows().data();
r(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, context: Array(1), selector: {…}, tables: ƒ, table: ƒ, draw: ƒ, …]

Change to page length 25:

$('#example').DataTable().rows().data();
r(25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, context: Array(1), selector: {…}, tables: ƒ, table: ƒ, draw: ƒ, …]

i still getting only 10 results when i call value in console.

How are you doing this?

Kevin

Mausino

@kthorngren hi, in live.datatables cant console log the data but on browser it is working like below var table you put

var dataFromTable = table.rows().data();
console.log(dataFromTable);

and you should get the the array of rows. Problem is that if you change number of rows or filter data... the rows().data() will give you only initial data on load of page.. but after cant reflect on changes in datatables. Same issue with length

Mausino

I think that something with this discussed problem. https://datatables.net/forums/discussion/36636

and i can't find any relevant simple example how i cant get the data from datatables without refresh of the page if it is receiving data via ajax to table, type:'POST'

Maybe whole idea about lenght is wrong and the main issue is that i need update more time rows().data() but i have no glue how

kthorngren

Open my example. Then use File > Clone from within the JS BIN menu. Then click the upward right facing arrow in the Output tab:

This will give you a regular web page. I then followed these steps which seem to work:

Please provide a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Mausino

@kthorngren i have same result as you.. now i know that everytime if is some change on datatable like sort, filter, pagination or pageLenght changed...

I must reinitialize the variable again like you did

var dataFromTable = table.rows().data();

still again and again if something happend with DataTable object

I thinked that will automatically updated on every change in table.
JS is not my strong part..still need to lean more (and jquery much more if i want work on higher level with it)

I want mention 2 points which will good to say in documentation

A: if you're using ajax loading data.. sometimes if you have to much js resources or other staff to load.. sometimes you in async load first dataTable and after the ajax request and the rows().data() will load no arrays... think about async:false; //option)

B: if you're want reuse the array from object of rows().data(); for example to show markers on maps based on filtering, sorting, etc in dataTable.. dont forget reinitialize and assign the rows().data(); every time to your variable

Now i know how to reinitialize the variable on everytime if i do something with datables in console.. could i please you show me some example in live.datatables how i can reinitialize object to variable automaticaly on any changes which user do with datatables (like sorting, paging, filter etc) by rows().data; ???

@kthorngren Thank so much for your help

Mausino

@kthorngren i didnt want to block this discussion if the my problem isn't related to lenght option... i created separate discussion about rows().data() https://datatables.net/forums/discussion/68147/how-reinitialize-reset-variable-on-every-touch-of-datatable-if-i-receive-data-by-rows-data/p1?new=1

Abdulwahabdev

@allan
thanks allan , I also thought server side must be true