Issue with displaying the Bootstrap paginator stylingSomething seems to be

Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process.

After linking the necessary Bootstrap CSS file using the provided code snippet, I successfully styled my table according to Bootstrap standards. However, I encountered an issue with the paginator not displaying properly in the CSS format as shown below: https://i.stack.imgur.com/iIp0F.png.

I need help figuring out how to make the Bootstrap CSS style for the paginator appear correctly.

Here is the related code snippet:

The Paginator code used by the designated function is as follows:

public function createLinks( $links, $list_class ) { if ( $this->_limit == 'all' ) { return ''; }

$last       = ceil( $this->_total / $this->_limit );

$start      = ( ( $this->_page - $links ) > 0 ) ? $this->_page - $links : 1;
$end        = ( ( $this->_page + $links ) < $last ) ? $this->_page + $links : $last;

$html       = '<ul class="' . $list_class . '">';

$class      = ( $this->_page == 1 ) ? "disabled" : ""; 
$html       .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . ( $this->_page - 1 ) . '">&laquo;</a></li>';
... (the rest of the code follows) ...

return $html; }
}

Answer №1

It seems like the issue could be because the HTML generated is missing some essential Bootstrap classes.

While you have correctly assigned the pagination class to the <ul> element, it appears that the classes are missing in the <li> and <a> elements.

Referencing the Bootstrap documentation, the structure should resemble:

  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>

To resolve this issue, ensure that your PHP function adds the .page-item class to the <li> element and the .page-link class to the <a> element, generating correct HTML output.

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

Dynamic Navbar that Adapts to Your Scroll

I'm experiencing an issue with my navbar. I want it to stay at the top of the page when I scroll, but whenever I apply the "position: fixed;" property, the navbar disappears. Below is my HTML and CSS code: <nav> <div class="navbar"> <b ...

What are the reasons for the decrease in canvas text quality when using requestAnimationFrame?

I have created a unique canvas effect where text changes color using requestAnimationFrame: var text = 'Sample text'; ctx.fillText(text,canvas_width/2,100); requestAnimationFrame(animate); function animate(time){ ctx.fillText(text,-offset,100 ...

Align an element in the middle next to its sibling element

Utilizing the pagination component in Bootstrap, the structure of the pagination itself is quite straightforward: <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo; ...

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

Position footer at the bottom of the webpage and adjust the height to be filled with main content using Bootstrap 4

I am currently in the process of designing a bootstrap layout that includes a header navbar along with a footer. My goal is to ensure that the footer is always at the bottom of the page, even if there is limited content. Here's what I have implemente ...

Changing color of entire SVG image: a step-by-step guide

Check out this SVG image I found: https://jsfiddle.net/hey0qvgk/3/ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" width="90" height="9 ...

Limit next_post_link() in WordPress to display links only from the current child category

After creating a custom loop that displays only one post at a time, I encountered an issue with the navigation between posts using next_post_link() and previous_post_link(). The problem arises from my post hierarchy where there is a parent category common ...

retaining the scroll position of a window when refreshing a div

There's this issue that's been bothering me lately. I update the database via an ajax call, refresh the div, everything works fine, but it still scrolls to the top of the page. Here's what I have attempted: function postdislike(pid, user, ...

Using jQuery to dynamically insert a table row with JSON data into dropdown menus

I'm working on a web form that includes a table where users can add rows. The first row of the table has dependent dropdowns populated with JSON data from an external file. Check out the code snippet below: // Function to add a new row $(function(){ ...

What is the proper method in PHP to insert a space between numeric values?

Seeking a simple solution for those in the know. The Current Situation Numbers without spaces. $str = 10000; $str2 = 100000; Desired Outcome Transform above into below... $str = '10 000'; $str2 = '100 000'; Personal Reflections ...

Over the course of time, the performance of the Laravel importer routine gradually decreases

I have a process that retrieves data from a web service and saves it in my database. This data consists of over 20,000 items. In order to save them into the database, I need to gather some information first before storing them. Therefore, I have a foreach ...

Refresh MySQL database using AJAX

In my form, there are both a submit button and a close button. When a user enters information and clicks the submit button, an answer is posted and saved in the database. If the user chooses to click the close button instead, the entry in the database will ...

Extract data from a JSON-encoded array using JavaScript

I sent a JSON encoded array to JavaScript. Now I want to access that array to retrieve the different elements. When I print it out using console.log(), I see this array: array(1) { [16]=> array(2) { [3488]=> array(1) { [0]=> ...

running a prompt command from my PHP/HTML script

I currently run a puppeteer program by typing c:\myProgram>node index.js in the command prompt. However, I would like to automate this process through my PHP program instead of manually entering it each time. Something similar to this pseudo-code ...

Do not retrieve emails from the database if the cell is empty

I created a code that retrieves emails from all users and saves them in a text file. However, there are some users who don't have an email because they registered using their phone number. When I try to fetch the emails, it gets dumped into the text f ...

Identifying when a user is idle on the browser

My current project involves developing an internal business application that requires tracking the time spent by users on a specific task. While users may access additional pages or documents for information while filling out a form, accurately monitoring ...

Complete tasks at various times throughout the day

I am facing a challenge with running a list of over 20 tasks. The issue is that I cannot run them all simultaneously, and the number of tasks to be run each day varies. Here is my current approach : I have set up a cron job that runs daily This cron job ...

The Facebook JS SDK is causing an XSS error and returning a "user_denied" response, even though the Auth Popup for FB.Login is not being

I currently have a Facebook canvas app located at Previously, I was using an anchor link to direct users to the OAUTH login flow. After implementing the Facebook JavaScript SDK, I followed this logic: 1) Initialization of the FB API FB.init({ a ...

Elegant Modal Form Submission Using jQuery

Having trouble submitting a modal jQuery form? A code snippet was borrowed from a website with minor modifications and the JavaScript was moved to a separate file. The challenge lies in transmitting form data to a PHP script via AJAX. The serializedArray() ...

What steps should I take to resolve the issue with my various layouts in Thymleaf?

Encountering an issue while trying to incorporate another fragment from a layout page that contains two fragments. One is for the header and the other for a post form. Including just the first one results in a problem, but adding the second one leads to tw ...