I'm encountering an issue with aligning the paging numbers in datatables. Here's the code snippet:
The table generated dynamically using the Datatables library includes pagination and search functionality. I've used CSS to customize the pagination numbering, but the alignment is not as expected.
.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;}
https://i.sstatic.net/twbBL.jpg
The pagination doesn't align properly on 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 for pagination generated by 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>