Page number button between previous, next button

  • Resolved anishsoft

    (@anishsoft)


    4 years ago

    Dear TobiasBg (@tobiasbg)
    Could you check my link and let us know, which short code/ CSS modification could help to resolve my issue.
    I would liked to add pagination numbers as buttons, between the Previous & Next button. I have removed the text (label) of next previous button by made the color: transparent and added padding on the i.e. ::next with background color to create a button. Now I have to add number button between the arrow button. Hence the total number of pages could be noticed by users, they can easily navigate to the ordinal status.

    Thank you in advance.

    Custom CSS That I use

    The below shows the table.
    [table id=2 datatables_fixedheader=top datatables_fixedheader_offsettop=90 datatables_pagination_scrolltotop=true datatables_columnfilter=true /]

    Kindly advice the path forward.
    Thank you once again.

    Anish.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years ago

    Hi,

    thanks for your post, and sorry for the trouble.

    For this, you can check out the different pagination types that the external DataTables JS library that TablePress uses, offers. For example, you could add this to the “Custom Commands” text field on the table’s “Edit” screen:

    "paging_type": "full_numbers"

    All possible values are documented at https://datatables.net/reference/option/pagingType

    Please note: When testing this, please remove all CSS that is related to the pagination (like those transparent arrow icons) to rule out any interference, and only add the needed CSS again after finding the desired pagination type.

    Regards,
    Tobias

    Thread Starter anishsoft

    (@anishsoft)

    4 years ago

    Dear TobiasBg.

    I have made the changed as suggested and still the same as old state.
    When I do the changes, even the next/ previous button were also not showing and I have tried by removing the additional CSS options, then the previous/ next arrow come back but the “paging_type”: “full_numbers” doesn’t appear.
    Could you advice, what should be the next. I am not good at coding on JS.

    Could you check the link, and let me know.
    https://healthandsafetyshopper.com/portfolio-item/students-zone/

    Thank you so much for the support.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years ago

    Hi,

    ah, my bad, I made a typo. Please try again with

    "pagingType": "full_numbers"

    in the “Custom Commands” text field. (Note that this has nothing to do with CSS, so any field that is named CSS would be the wrong field!)

    Regards,
    Tobias

    Thread Starter anishsoft

    (@anishsoft)

    4 years ago

    Dear Tobias,

    Good day.
    Thank you for the suggestion, hence it is not working for me.
    When I add the “pagingType”: “full_numbers” to the custom command text field, all the controls/ buttons/ search, etc. disappeared.

    Navigation: https://ibb.co/MNR7fDj disappeared.
    Search bar: https://ibb.co/Bz3H1Kj not showing.

    It is not compatible I think, is it possible you to help me identify the issue?
    Thank you.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years ago

    Hi,

    ah, now I see. You already added a “Custom Command” to change the text of the search field placeholder. You must then add the new “Custom Command” separated with a comma, and not just a new line. Also, what you added ("pagingType: simple") is not complete (missing two quotation marks), and simple is already the default value. So, please try this full “Custom Command”

    "language": { "search": "", "searchPlaceholder": "Search the category here I.E. Institute, Country, Course, Specialization, etc. " }, "pagingType": "full_numbers"

    Regards,
    Tobias

    Thread Starter anishsoft

    (@anishsoft)

    4 years ago

    Hi Tobias,

    Yes it is working now, thank you so much.
    Now I would like to add instead of just showing number and the text (previous/ next) can I have button. Previously, I have brought padding and background color on the arrow to create the button. Is there any other way to bring buttons there?

    Kindly advice.
    Anish

    Thread Starter anishsoft

    (@anishsoft)

    4 years ago

    Hi Tobias,

    Thank you so much for the support.
    In the meantime, I have found some coding to change the button style.
    It is now resolved.

    Thank you once again.
    Love your plugin.

    BR
    Anish.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias
     
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Page number button between previous, next button’ is closed to new replies.