User-entered page numbers?

User-entered page numbers?

nat5142nat5142 Posts: 20Questions: 7Answers: 0

I have a very large database that I'm pulling from, and the data rendered in my DataTable is usually on the order of >1000 pages. Is there a way to allow the user to enter an integer in a text box next to the page numbers so they can jump to any page they want?

Answers

  • gyrocodegyrocode Posts: 126Questions: 6Answers: 30
    edited July 2017

    See input pagination plug-in that shows an input element into which the user can type a page number.

    See this example for code and demonstration.


    See more articles about jQuery DataTables on gyrocode.com.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I'm curious about feedback on this. I've thought many times before about updating that plug-in to use a bit more modern code, but I've never been sure about how its UX should work. Should the page update as typed, or wait until the return key is pressed or something else?

    Allan

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    I use the "input" plug-in, and I'm happy with it updating as typed.
    My one issue is that the styling - especially "width: 30px;" - could be moved into a CSS file to make it override-able. But that's a pretty minor issue.

  • nat5142nat5142 Posts: 20Questions: 7Answers: 0

    I think there may be an issue with the script. I added it and see that input function working, but the First, Previous Page, Next Page, and Last buttons are no longer clickable or even separated by spaces. I'm pretty new to JS as a whole - is there something I can change on my end in order to patch this up?

    @tangerine @allan @gyrocode

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    You are probably missing a CSS file. What CSS are you using?

  • nat5142nat5142 Posts: 20Questions: 7Answers: 0
    edited July 2017

    @tangerine

    Using Bootstrap. I've had some issues involving CSS so far because I've accidentally added some of my own css for ids and classes defined by DT (#row, for example), so maybe that has something to do with it. I'll take a close look.

    Only thing is that I have the default pagination buttons working properly. It just becomes a problem when I add the input pagination script

  • nat5142nat5142 Posts: 20Questions: 7Answers: 0
    edited July 2017

    @tangerine

    So apparently the buttons are functional, but they haven't retained the styling that appears when I only use DataTables' standard pagination options. They're just plain black text elements. Clicking on them navigates properly and the DT responds, but the style isn't there. I've checked the classes and id's that I've declared in my custom CSS file, but none of those classes/ids appear in the developer tools for the buttons themselves.

    When I disabled the user-input pagination, I see that the default DT pagination is constructed with a unordered list where each page button has its own class and id built in. When I add the user-input pagination feature the unordered list element is no longer present. So I'm pretty sure that my custom CSS isn't the root of the problem.

    Not sure why this is happening

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    We'd probably need a link to the page showing the issue.

    Having said that, this might make a good topic for a blog post. I'd been wondering what to write about this month, so I might look into this in the next few days.

    Allan

This discussion has been closed.