How to set total records in table count manually to effect paging button generation

redfish411

I am using datatables with server side paging. I do not use ajax and cannot for this project. Records are paged to the client based upon the page size etc. sent to server. Everything works fine - except one item - I need to tell the table there 'x' number of total records in the overall data so the paging buttons will calculate correctly and I can use them to send page number to server to obtain paged records for that page.

Example - there a 200 records total. At any given time there will be only 1 page of actual data records in the grid based upon page size and number sent to server. An initial page size of 10 and page number of 1 are sent to the server. The server returns that page of records and a total count tag of 200 (not 200 records, only 10 are returned, 200 is just a json item in the GET return). I want use that 200 record count and cause the table to display 20 (200 recs / 10 per page) page buttons. Obviously only showing the appropriate number of page buttons as per the display options, but for illustration purposes here imagine all 20 being displayed.

I know this can be done - saw mention of this is how CloudTables actually works, but I cannot find any example or figure it out myself. I cannot find anything I can 'set' which effects rows count or length etc. Any guidance would be most appreciated.

allan

I'm not clear how you are doing this without Ajax in DataTables - could you give me a link to the page you are working on or show me screenshots and the code you are working with?

What you describe sounds like server-side processing in DataTables terminology, and that is how CloudTables works (it uses a socket rather than "Ajax").

Allan

redfish411

The client requests data (GET to RESTApi) from server. The server returns data as JSON. The JSON is then passed to the table (iterated via Angular in tr to appear in table). Yes, part of the process is Angular and am not asking for any Angular related assistance. I am just trying to understand in the given scenario of data being handed to table as JSON is it possible to set the page count (total recs / page size = number of pages button) manually. I can get all the info I need from the table to hanlde paging etc. and do not need ajax, but cannot find a way to tell the table how many pages to show in the display. It seems to only allow internal to itself calculation of page buttons to display. The table does not appear to allow, or I cannot find a way, to set the number of page buttons to display programmatically.

In other words is there some way to do something like dtTable.xx.yy.recordsTotal = SomeNumber to force the table to calculate the desired number of page buttons? In this example total records would be 200 and and actual records in the table would be 10 (page size sent to server to fetch 10 records), but there would be 19 'pseudo' page buttons (no actual data on page and data is fetched on click event and page number sent to server to get clicked page data).

redfish411

Btw - thank you responding previously!

allan

It sounds like you are using Ajax if you are getting the data from a REST API. You might not be using $.ajax or XMLHTTPRequest, or even fetch, but unless I'm misunderstanding, something it making a request from the page, without it reloading to get the current page of data for display.

To have complete control over DataTables when in server-side processing mode, you would use the ajax option as a function. Inside there, do whatever it is you are doing to get the data and then have DataTables display it.

I have a feeling we might be approaching this from different angles - are you drawing the HTML table with Angular, and then initialising DataTables on it. Then for the next page of data, draw the HTML for that and initialise again? If so, that's not how DataTables is designed to operate. I can't immediately think of a hack that would allow that to work I'm afraid.

Allan

redfish411

I very well be trying to use the table outside of its design, and that is fine if I am ... just need to be sure before I move on to another solution.

Is there a way in the AJAX settings to point the table to JSON I have pulled from server? That might work, but all the syntax I have tried wants a file, or http, etc. etc. I can't seem to find anything that would allow to point it to something like this.list, for example. The Angular code does all the actual data work, so I have no need for the ajax function to actually go hit a server or anything of that sort.

Thanks again for helping with clarifying. I really like the table and would like to use it, but I may be in a scenario where its out side of scope for the functionality of the table. I have a plan B where I know other tables will work, but I thought I would try DataTables first since so many folks rate it highly.

kthorngren

You could create your own paging element and code to fetch the proper page. Then let Angular update the table. Datatables won't know about the updates since Datatables APIs are performing the updates. Use rows().invalidate() to update the Datatables data cache. See this FAQ for details. Datatables sorting and searching will only apply to the data at the client. You can disable searching and sorting if desired.

The infoCallback can be used to customize the information element with your total row count, etc.

The custom paging element can be displayed with the Datatables elements using the solution in this example.

Kevin

redfish411

Thanks for the thought Kevin! I'll - just use another pager component ( in my case ngb-Pagination) and feed the table the chunks of data I want to display, in this scenario a page of data corresponding to pager page clicked. I'll turn off pagination and any other unneeded items on DT and this should work fine.

redfish411

I'll post back on how the solution turns out and what I did in case someone else has a similar scenario.

redfish411

Ok, problem solved. Keep in mind this is an Angular (v13) specific 'fix' I describe, but it might help others when faced with the requirements I mentioned above. The logic of having a separate pager and not using DT paging is applicable in js also, but in js fashion.

I used ngb-Pagination to handling paging and just handed DT the json I fetched as needed for display. Psuedo buttons displayed for all possible pages in dataset as I needed and data is fetched based upon the button number clicked. Paging occurs on page button click. Turned off saveState, paging, and info in DT. Handles table state save by saving those items ngb-Pagination needs to go to a last visited DT view. Also made the save state time sensitive and configurable as to length of save.