Geek Answers Handbook

Aligning the list of swap numbers in datatable

I'm having trouble aligning swap numbers in datatables, the code is below.

The Datatables library is used to dynamically generate a table that includes the paginate and search functions. I set the pagination using CSS, however the alignment looks like a grid.

.dataTables_paginate a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.dataTables_paginate a.active {
    background-color: #4CAF50;
    color: white;
}

.dataTables_paginate a:hover:not(.active) {background-color: #ddd;}

Paging

Paging does not align to the grid.

Datatable ejs

<h2><% var projectlist = JSON.parse(data); %></h2>
<table id="example" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">CSI ID</th>
      <th scope="col">App Name</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
     <!-- get projects array from the data property -->
<% var counter = 0; %>
<% var evale = 'CSI:'; %>

<% for (var key in projectlist) { %>

  <% if (projectlist.hasOwnProperty(key)) { %>
    <% var csiid = projectlist[key].name.substring(projectlist[key].name.lastIndexOf(":")+1,projectlist[key].name.lastIndexOf("]")); %>
    <% if (projectlist[key].name.match(evale)) { %>
    <% counter = counter + 1; %>
    <tr>
    <td><%= counter %></td>
    <td><%= csiid %></td>
    <td><%= projectlist[key].name.replace(/\[.*?\]\s?/g, '') %></td>
     <td>TESTED</td>
    </tr>
  <% } %>
  <% } %>
   <% } %>


  </tbody>
</table>

Runtime HTML generated using datatables.js

<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
    <a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="0" tabindex="0" id="example_previous">Previous</a>
    <span>
        <a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">33</a>
    </span>
    <a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a>
</div>
+6
source share
3 answers

you can easily do this using the css below:

.dataTables_paginate{
display:flex;
align-items:center;
}
.dataTables_paginate a{
padding:0 10px;
}

The flex display will wrap all items in one line. The alignment center of elements positions the elements vertically in the center.

+3

" " .

, , - .

, !important float. display, .

...
.dataTables_paginate a {
    color: black;
    display: block !important;
    float: left !important;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
 }
 ...

, , CSS .

+2

.dataTables_paginate a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.dataTables_paginate a.active {
    background-color: #4CAF50;
    color: white;
}

.dataTables_paginate a:hover:not(.active) {background-color: #ddd;}
<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
    <a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="0" tabindex="0" id="example_previous">Previous</a>
    <span>
        <a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">33</a>
    </span>
    <a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a>
</div>
Run code

This one is yours. I work great. Check the html file and make sure that you are referencing the css file correctly. You may have indicated the wrong path to the css file.

+1
source

More articles:


All Articles