Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg

However, what I would like to achieve is:

< 1 2 3 4 >
After clicking next, I want to see < 2 3 4 5 > (In both scenarios, we do not want to display ".." followed by 95 96 97.)

Do you have any suggestions on how this can be achieved? Below is the relevant HTML code:

<div class="pagination full">
  <span class="previous_page disabled">&lt; Previous</span>
  <em class="current">1</em>
  <a rel="next" href="/student/search?page=2">2</a>
  <a href="/student/search?page=3">3</a>
  <a href="/student/search?page=4">4</a>
  <a href="/student/search?page=5">5</a>
  <a href="/student/search?page=6">6</a>
  <a href="/student/search?page=7">7</a>
  <a href="/student/search?page=8">8</a>
  <a href="/student/search?page=9">9</a>
  <span class="gap">…</span>
  <a href="/student/search?page=95">95</a>
  <a href="/student/search?page=96">96</a>
  <a href="/student/search?page=97">97</a>
  <a class="next_page" rel="next" href="/student/search?page=2">Next &gt;</a>
</div>

Thank you!

htmlcssruby-on-rails

Answer №1

To optimize pagination using will_paginate, you will need to create a personalized renderer. The will_paginate helper has the option to specify a renderer parameter as shown below:

<%= will_paginate(@articles, :renderer => CustomPaginationRenderer) %>

You can then design your own CustomPaginationRenderer according to your requirements, such as displaying only 3 links or implementing unique styling features. Various resources and guides are available to help you with this customization process:


Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to measure the timing of consecutive events within a web browser, utilizing JavaScript within an HTML script tag?

Currently delving into the realm of JavaScript, transitioning from a Java/Clojure background, I am attempting to implement a basic thread-sleep feature that will display lines of text on the screen at one second intervals. Initially, I considered using t ...

javascripthtmlsettimeoutsetintervalthread-sleep

The breakdown of an object literal in JavaScript

What is the reason that we cannot access the second item in the object literal the same way as the first? var foo = {a:"alpha",2:"beta"}; console.log(foo.a) -> printing 'alpha' correctly console.log(foo.2) -> Error: missing ) after argumen ...

javascripthtml

Is it possible for a draggable position:absolute div to shrink once it reaches the edge of a position:relative div

I am facing an issue with draggable divs that have position:absolute set inside a position:relative parent div. The problem occurs when I drag the divs to the edge of the parent container, causing them to shrink in size. I need the draggable divs to mainta ...

javascripthtmlcsscss-positionabsolute

Modernizing web design with Bootstrap

Attempting to create a unique column layout for different device sizes. For medium (md) and larger devices, 2 columns are used: md-8 and md-4. However, on smaller devices, the intention is to display half of the content in the md-8 column, followed by half ...

htmlcsstwitter-bootstrapresponsive-design

Is there a way to create a header that fades out or disappears when scrolling down and reappears when scrolling up?

After spending some time researching and following tutorials, I have not made much progress with my goal. The task at hand is to hide the top header of my website when the user scrolls down and then make it reappear when they scroll back up to the top of t ...

javascriptcsshtml

The most efficient method for interacting with externally generated HTML in Rails

For my Rails page help documentation, I utilized the HelpNDoc help authoring tool to generate a folder containing HTML pages and additional folders for JavaScript, images, stylesheets, and libraries. Now I am seeking the most efficient way to integrate thi ...

htmlcssruby-on-rails-4helpndoc

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

Matching an apostrophe in an AutoHotkey script using regex

My autohotkey script is designed to search for a word in a bilingual dictionary when I double click on any word within a webpage. However, I am facing an issue where the script also copies the characters preceding the apostrophe when clicking on words like ...

htmlregexescapingautohotkeyapostrophe

What is the reason for parent rows not stretching fully across the width of the page?

I am working on creating a simple table in Vue.js with Bootstrap. When the arrow is clicked, the child row is displayed, and I want it to appear below the parent row. I achieved this by setting display:flexbox; flex-direction:column; Here is the HTML tabl ...

cssvue.jsbootstrap-5

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

htmlcss

Resolve Bootstrap 4 responsive table header alignment glitch

Utilizing the d-none and d-md-block classes on a responsive table to hide certain columns at smaller screen sizes has been successful overall. However, there is one issue - the hidden columns seem to be slightly misaligned with the rest of the table. Despi ...

htmlcssbootstrap-4responsive-design

How can we use Ruby on Rails (ROR) as a server-side language to create a post method that retrieves

Is there a way to retrieve data from the client side using an action called create? Specifically, how can data be fetched using the post method within the create function? Essentially, I am looking for guidance on accessing data from the client side throug ...

ruby-on-railsrubyjsonruby-on-rails-3post

Tips for utilizing CSS flexbox to create a row of squares that can scale while maintaining their aspect ratios

Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their containe ...

htmlcssflexboxcss-gridresponsive

"TailwindCSS opts for the inclusion of prefexied utilities instead of relying

Trying to set the height of the div to h-2, with a class that includes height animation on medium devices. The issue is that even though h-2 should be used on mobile, tailwindcss still uses h-20 instead. Any thoughts on why this may be happening? Here i ...

cssreactjsnext.jstailwind-css

Jquery bypasses original stylesheet settings when inline styles are removed

I have a CSS file with various styles defined within it. One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes. For example: .mystyle.blue { position: fixed; } Here, el ...

jquerycss

Is Angular4 preloaded with bootstrap library?

I started a new angular4 project and wrote the code in app.component.html <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class ...

csstwitter-bootstrapangular

The Link Element Does Not Appear Properly When Styled Using nth-of-type Selector

https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js Can anyone help me understand why the fourth .content <Link/> is not displaying when using the given CSS styling? Could it be a bug in the code, or am I overlooking something important? ...

javascriptcssreactjsreact-router-dom

I'm trying to position this div within a table so that it lines up with one of the cells. Can you help me figure out

After implementing the code, here is the current output: <table><tr> <td><div id="adt"></div></td> <!-- 336x280 ad code --> <td id="butw"><div id="butto">Follow @Twitter</div></td> ...

htmlcsshtml-tablealignment

Enhance Your Images with Hovering Icons

Is there a way to display an icon checkmark over the main image when a user hovers over it? The icon should appear in the top right corner of the image. <div> <img class="result-image" src="{{$property->photo}}"> <! ...

htmlcss

Tips for creating zoomed-in background images on small screens

I am currently implementing this code for a website project .homepage{ background-image: url(/wp-content/themes/ep/img/_.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background ...

twitter-bootstrapcss