How can each page have a different length?

How can each page have a different length?

engineer_yasinengineer_yasin Posts: 4Questions: 2Answers: 0

Hi
How can each page have a different length?
example:
* Page 1: 10
* Page 2: 12
* Page 3: 15
* Page 4: 10

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    You can use the page.len() API to dynamically set the page length.

    Kevin

  • engineer_yasinengineer_yasin Posts: 4Questions: 2Answers: 0

    Hi kthorngren
    This is not the solution
    I want to have pages of different lengths in a table

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    Datatables is not built to define multiple page lengths. You will need to control it through the use of the page.len() API.

    Maybe we can suggest a solution if you provide the details of how this is expected to work.

    Kevin

  • engineer_yasinengineer_yasin Posts: 4Questions: 2Answers: 0

    Please pay attention to the example
    live.datatables.net/docaqijo/1/

    I want each page to have a different length, for example,Name: "page 1" on the first page, "page 2" on the second page, and "page 3" on the third page, and so on.

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736
    edited April 2020 Answer ✓

    Thanks for the example, it helps to understand how you want to do this. I put together an example that I'm surprised works :smile:
    http://live.datatables.net/yadobasi/1/edit

    The example uses the preDraw event to change the page length before the table is drawn. In the event the value of the first column in the first row on the page is retrieved. The rows() API is used to count the number of rows that match the value using a function as the row-selector. Then it uses, you guessed it :smile: , page.len() to set the page length.

    EDIT: It also uses the pagingType to set the paging to have only PRevious and Next buttons.

    You will need to make sure that the column you are checking is always sorted. There are a few different ways to do this depending on how you want the table to behave. Take a look at the different order options documented on the Options Page.

    Others may offer better solutions.

    Kevin

  • CyrixInsteadCyrixInstead Posts: 3Questions: 0Answers: 0

    @kthorngren unfortunately, I don't think this works. It only works in the example JS Bin you created because the first two pages have the same number of rows. If every page has a different number of rows, it doesn't work. This can easily be tested by removing one of the rows on Page 1 and paging through the results.

    I have exactly the same problem as @engineer_yasin i.e. each page has a different number of rows. I think the reason why it doesn't work is that when the number of rows to display is changed, DataTables tries to render the new page you've navigated to as if the table always had the number of rows setting you have changed it to which wouldn't work properly with different amounts of rows on each page. That's not very clear so please see
    http://live.datatables.net/yadobasi/8/edit for an example, I just changed the number of rows in the source table.

    @kthorngren do you have a possible solution you can think of, or do I need to go back to the drawing board on it? I'm new to DataTables (well, revisiting after 9 years :smile: ) and I'm trying to think of the best way to approach it. Any suggestions would be appreciated.

  • kthorngrenkthorngren Posts: 20,149Questions: 26Answers: 4,736

    I don't think there is a way. Looks like Datatables calculates the first row to show based on the page length X page number. I added code to make sure to display the current page after changing the page length:
    http://live.datatables.net/yadobasi/9/edit

    When going to page two you can see that its displaying rows 6 to 10.

    Some options I can think of:

    • Create your own paging option with the values from the "Name", in this case column and use the Scroller Extension with the row().scrollTo() or scroller.toPosition() to scroll to the top of that group.
    • Filter the table using column().search() with the above code to show only the rows for the page. Sounds simpler than it will be to implement.
    • Create your own next and previous buttons then for each click fetch the appropriate records from the table using ajax.reload(). Also will need to use ajax.data as a function to fetch the "Name" to pass to the server for filtering the response data. Set the pagelength option to -1.

    If you are using ajax and have control over your server script the last option is probably the easiest to implement. But it depends on your requirements and environment.

    Kevin

  • CyrixInsteadCyrixInstead Posts: 3Questions: 0Answers: 0

    Thank you for the quick response Kevin, much appreciated. I think the last option is probably best for me in this case.

This discussion has been closed.