Bug with Pagination text input plugin - datatables 2.x

surfwebby

Hi.

I use datatables to visualize the data are taken with Server-side processing. If I use default paging and there are 0 results the paging is completely disabled. If I use the pagination plugin with the input field instead the latter shows as page the 1 out of 0 results and therefore does not disable the buttons to view more data.

Does anyone have the same error and know how to fix it?

I attach an image to understand the error.

Thanks.
surfwebby

kthorngren

It sounds like your server side processing script isn't returning the correct values for recordsTotal and recordsFiltered for Datatables to properly calculate the number of pages. See the SSP returned data docs for more info.

Are you using a Datatables supplied server side processing library?

If you still need help then please post your JSON response when the issue occurs.

Kevin

surfwebby

Hi @kthorngren ,

Thank you for your response. I don't use any library but implemented everything with laravel.

This is the JSON response coming from the server side script:

{"draw":"1","recordsFiltered":0,"recordsTotal":0,"data":[]}

Thanks.
surfwebby

kthorngren

Looks like you need to fix the calculations for recordsTotal and recordsFiltered. This is from the docs I linked to:

recordsTotal: Total records, before filtering (i.e. the total number of records in the database)

recordsFiltered: Total records, after filtering (i.e. the total number of records after filtering has been applied - not just the number of records being returned for this page of data).

The response with "recordsFiltered":0,"recordsTotal":0 is telling Datatables there are no records in the table thus there are no pages.

Kevin

surfwebby

Hi @kthorngren .

I have not figured out how to solve the problem: If I have no data in the table the query returns 0 results. How should I set the recordsFiltered and recordsTotal values?

With the previous version of datatables (Version 1.x) and the previous version of the plugin I had no problem.

Thanks.
surfwebby

kthorngren

Sorry, I should have been more clear. The "recordsFiltered":0,"recordsTotal":0 response is telling datatables that there are no records at the data source, the DB or whatever is the source of the data.

The easiest way to demonstrate with with this example. Open the browser's network inspector and view the XHR responses. First reload the page an you will see this:

"recordsTotal":57,"recordsFiltered":57

The data source has a total of 57 records and the filtered result set contains 57 records. However the data object contains only the 10 rows for the page.

In the search filed type w. The response response will have this:

"recordsTotal":57,"recordsFiltered":20

Still a total of 57 records at the data source. There are 20 in the filtered result set but only 10 returned in the data object. Note the information element looks like this:

Showing 1 to 10 of 20 entries (filtered from 57 total entries)

And there are two paging buttons available.

If the search yields 0 records then recordsFiltered will be 0.

The SSP examples use this simple PHP script. It may help you see how to calculate these values.

With the previous version of datatables (Version 1.x) and the previous version of the plugin I had no problem.

That's possible, I'm not sure but the SSP protocol hasn't changed between 1.x and 2.x. If it did work then it was probably a bug in 1.x or the previous plugin.

Kevin

surfwebby

Hi @kthorngren .

Thank you very much for the explanation. I had already looked at that example and looked at XHR responses. The example has 57 records while I have 0.

In the example, when doing a search that has no results this is reported in the XHR responses:

“recordsTotal”:57, “recordsFiltered”:0”

In my case I have 0 Total Records and 0 Filtered Records.

I also tried to insert 1 record: all the pagination buttons are disabled but clicking on them again executes a call to the ajax script.

If I set the default pagination, leave the server-side script as it works now, everything works fine and I have no errors! If I click on the disabled pagination buttons the ajax call is not executed.

I just don't understand where I'm going wrong!

Thanks.
surfwebby

surfwebby

Hi @kthorngren .

I tried to use this simple example by integrating the pagination plugin: I get the same error that you can see in the image I had attached and also the pagination buttons to navigate the results from the second page onwards appear to be active and not disabled.

surfwebby

allan

Apologies for jumping in, but I think you'll need to provide a link to the page showing the problem. The simple example you linked to does not use server-side processing, whereas the rest of the discussion has been about server-side processing.

If that example doesn't work, then it suggests there is a problem with the paging plugin. Is this the plugin you are using? Or is it something else.

A link to the page would let us see the answer to this and a number of other questions, and better let us help you.

Allan

kthorngren

I agree with Allan. I'm confused as to the real problem. Will need to see the problem happen to help. You can start with one of these templates if you want to build up a test case for us to look at. Or provide a link to your solution.

Kevin

surfwebby

Hi allan.

You don't have to apologize: I tried to explain the problem as best I could but evidently I was not able to.

The plugin you linked is exactly what I used.

I created an example on jsfiddle. As you can see there is no data and the pagination shows 1 of 0 and the pagination navigation buttons are active.

I hope in this way I was able to show the problem.

Thanks
surfwebby

kthorngren

Sorry, I definitely misunderstood the problem. I thought it was with the return data from the server.

Looks like the code in the plugin's event handler needs updated to account for the number of records total and records displayed. For example:

    api.on('draw', () => {
        let info = api.page.info();
        // Update the classes for the "jump" buttons to show what is available
        setState(first, tags.item.disabled, info.page === 0);
        setState(previous, tags.item.disabled, info.page === 0);
  
        // Set previous page to 0 if no records else to current page -1
        let prevPage = info.recordsTotal === 0 || info.recordsDisplay === 0 ? 0 : info.pages - 1;
        setState(next, tags.item.disabled, info.page === prevPage);
        setState(last, tags.item.disabled, info.page === prevPage);
  
        // If no records empty input value and disable input
        if (info.recordsTotal === 0 || info.recordsDisplay === 0) {
            input.value = '';
            input.disabled = true;
        } 
  
        // Set the new page value into the input box
        else if (input.value !== info.page + 1) {
            input.value = info.page + 1;
            input.disabled = false;  // Make sure input is enabled
        }
        // Show how many pages there are
        of.textContent = ' / ' + info.pages;
    });

This test case has 0 records:
https://live.datatables.net/newopihu/1/edit

The plugin code is at the top of the Javascript tab.

This example has records and shows when the table is filtered to 0 rows displayed the both the input and buttons are disabled.
https://live.datatables.net/fagupemi/1/edit

@allan may prefer to do this differently but you can modify the non-minified plugin code to meet your needs.

Kevin

surfwebby

Hi @kthorngren

Thank you very much for your reply. Don't worry if you didn't understand: I'm the one who misunderstood!

I use the plugin with npm. At the moment I can manually apply your change but I hope the plugin will be updated so it is easier to maintain the code.

Thanks again
surfwebby