Bootstrap Django Table Paginating

Having some difficulty implementing table pagination in a django-bootstrap project. The bootstrap's table pagination feature is not displaying on my template as expected. I am using one of the default bootstrap tables with custom styles, and seeking assistance on how to properly add pagination to my table.

<table id="table1" class="table table-bordered table-striped" style="width:1200px; margin-left:-45px">
  <thead>
    <tr>
      <th class="header1"> </th>
      <th class="header1">ID Riesgo</th>
      <th class="header1">Código Riesgo</th>
      <th class="header1">Característica</th>
      <th class="header1">Evento</th>
    </tr>
  </thead>
  <tbody>
    {% for riesgos in riesgos %}
    <tr style="height: -2px;">
      <td style="text-align:center;">
        <div class name="checkboxWrapper">
          <input type="checkbox" id="check" hidden="true" style="margin-top: 10px;" />
          <label for="check" class="checkmark"></label>
        </div>
      </td>
      <td style="color:#A9A9A9 ;">{{riesgos.id_ri}}</td>
      <td style="color:#A9A9A9;">{{riesgos.cod_ri}}</td>
      <td style="color:#A9A9A9;">{{riesgos.caracterisitica}}</td>
      <td style="color:#A9A9A9;">{{riesgos.evento}}</td>
      {% endfor %}
    </tr>
  </tbody>
</table>

Answer №1

This snippet showcases a table that is functioning properly, with added pagination in the code for your convenience.

To center the pagination, I included the d-flex justify-content-center classes in your nav tag. You are free to remove it if you prefer the pagination on the left side.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<table id="table1" class="table table-bordered table-striped" style="width:1200px; margin-left:-45px">
  <thead>
    <tr>
      <th class="header1"> </th>
      <th class="header1">ID Riesgo</th>
      <th class="header1">Código Riesgo</th>
      <th class="header1">Característica</th>
      <th class="header1">Evento</th>
    </tr>
  </thead>
  <tbody>
    <!-- {% for riesgos in riesgos %} -->
    <tr style="height: -2px;">
      <td style="text-align:center;">
        <div class name="checkboxWrapper">
          <input type="checkbox" id="check" hidden="true" style="margin-top: 10px;" />
          <label for="check" class="checkmark"></label>
        </div>
      </td>
      <td style="color:#A9A9A9 ;">{{riesgos.id_ri}}</td>
      <td style="color:#A9A9A9;">{{riesgos.cod_ri}}</td>
      <td style="color:#A9A9A9;">{{riesgos.caracterisitica}}</td>
      <td style="color:#A9A9A9;">{{riesgos.evento}}</td>
      <!-- {% endfor %} -->
    </tr>
  </tbody>
</table>

<nav class="d-flex justify-content-center" aria-label="Page navigation example">
  <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>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c1dec1c1d4c39fdbc2f1809f80879f81">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

HTML4 section tag failing to generate columns in proper alignment

Currently, I am organizing a list of movies by decade using the article and section elements. An issue has arisen: the alignment between the second and third rows is perfect while the first row seems slightly off-kilter. Below is the code snippet in questi ...

Position a div in the center of a section

Having trouble centering a <div> within a <section>? I've tried setting margin-left and margin-right to auto without success. Any other suggestions? Check out the jsFiddle illustrating the issue: http://jsfiddle.net/veWKh/ ...

What is the best way to line up inputs and button-styled links in Bootstrap v4?

I have designed a form using the grid system Within one row, I have a styled link that I want to be aligned with the input fields Despite trying various combinations of align-button and align-items-button classes, I have not been able to achieve the desi ...

Divide the number by the decimal point and then send it back as two distinct parts

Let's tackle a challenging task. I have a price list that looks like this: <span class="price">10.99€/span> <span class="price">1.99€/span> My goal is to transform it into the following format: <span class="price">10< ...

Enhance the efficiency of querying speed by implementing optimizations for multiple filters and excluding statements

I'm currently developing an application with features that include "social media capabilities". These features allow users to block someone or wave to someone, among other things. In my code, I have a method called get_queryset which retrieves all us ...

Creating a PDF document in Go by combining individual pages with go-wkhtmltopdf

I am in the process of developing a report generator with Go as the server-side language. The report will include a specified header with a logo image, a footer, and dynamic content displayed in a table format. Each page will consist of 20 rows of table da ...

Is there a way to execute a Python script when submitting an HTML form?

I have created an HTML form and my goal is to utilize Python to transfer the data from this form into an SQLite database file. Currently, I am attempting to achieve this using CGI. I don't require anything extravagant. Below is the code that I am work ...

The background image does not fully extend across the entire space

I am struggling to find the solution to a simple issue on my website, michelleforboe.com. The background image in a div is not covering the entire space as intended. I have tried using calc to set the height of the div, but it seems to be slightly off. A ...

Incorrect rendering of jcarousel in versions of IE earlier than 8

Encountering an issue with a slider on my website The slider is not displaying at all in IE8, and in IE7 and IE6, the images are out of place. Any insights on what could be causing this code error? ...

Which is the better approach for performance: querying on parent selectors or appending selectors to all children?

I currently have 2 mirror sections within my DOM, one for delivery and another for pickup. Both of these sections contain identical content structures. Here's an example: <div class="main-section"> <div class="description-content"> ...

Issues with adjusting the height using CSS transformations are not being resolved

There seems to be an issue with animating the height property of an element as it is not animating at all. Check out the fiddle where the animation is attempted. Here is the HTML: <ul> <li> li 1 </li> <li> ...

Node.js is throwing the error "error TS18003: Config file does not contain any inputs."

I'm encountering an error and need help fixing it. Currently, I am using Windows 11. Every time I attempt to run npm run build in the command prompt, I encounter this specific error: Error File package.json package.json File tsconfig.json "com ...

The functionality of Bootstrap seems to be malfunctioning within the Laravel React UI

I successfully configured my new laravel project with a react UI by utilizing the command php artisan ui react. Following that, I executed npm install and npm run dev. I then included the react ID and script link in the welcome.blade.php file. However, I n ...

Having trouble getting mongoose's updateOne with upsert feature to function properly

let basket = req.body.params.cart // array of objects that require updating if found in the database, or inserting if not present. let userID = req.body.params.uid for (let i = 0; i < basket.length; i++) { Cart.updateOne({ user: userID, 'cart ...

How can I extract information exclusively from child nodes with Jsoup?

Currently, I am facing an issue with extracting first-level <li> elements from a <ul> element. Even though I attempt to retrieve only the first-level <li> elements using Jsoup selector or getElementsByTag, the nested <li> elements w ...

Identifying when a browser is closed with multiple tabs open in Internet Explorer

I need to detect when a browser tab is closed in order to trigger a Struts action. I have successfully implemented this for a single tab using the following JavaScript code: <script type="text/javascript> function loadOut() { if ((window.event.c ...

What could be the reason for the absence of 'server' and 'client'?

Trying to retrieve data from db.json but facing some challenges. Below is the content of my db.json file: { "posts": [ { "id": "react-hooks", "title": "React Hooks", "content": "The greatest thing since sliced bread!", "author": "ali" }, ...

Implementing react router functionality with Material-UI tabs

Could you please provide some insight on how to integrate my routes with MUI tabs? I'm not very familiar with MUI and could use some guidance on how to get it working. Any suggestions would be appreciated. To simplify the code, I have removed the imp ...

Obtaining the target object for update in Django's UpdateView

Currently I am utilizing the django.views.generic.edit.UpdateView to update specific fields in a model. Instead of passing the primary key or slug of the object to be updated, I have chosen to override the get_object method: def get_object(self, queryset= ...

The submit button on the form containing the image field is not working properly and is

I have a comment model in my Django project. Initially, I was only submitting the content with the form. Now, I want to include an image as well, but I am facing issues with it despite trying numerous approaches. views.py: def post_detail(request, pk): p ...