I am currently utilizing the datatable feature with bootstrap version 4.3.1. The necessary CSS and JS files have been integrated as shown below:
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
For exporting to Excel and other custom actions, I am using an HTML5 button.
The pagination feature is consistently displaying in a new line separate from the entries info in the footer section, illustrated here:
https://i.sstatic.net/4qNzC.png
Despite altering the sequence of CSS and JS files in various ways, the issue remains unresolved.
Here is the HTML code snippet used:
<div class="col-lg-8">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>L</th>
<th>W</th>
<th>H</th>
<th>W</th>
<th>N</th>
<th>Y</th>
<th>P</th>
<th>Pr</th>
</tr>
</thead>
<tbody id="tbl">
<tr>
<td>12</td>
<td>11</td>
<td>14</td>
<td>61</td>
<td>1</td>
<td>2019</td>
<td>abc</td>
<td>320800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>L</th>
<th>W</th>
<th>H</th>
<th>W</th>
<th>N</th>
<th>Y</th>
<th>P</th>
<th>Pr</th>
</tr>
</tfoot>
</table>
</div>
And this is the JavaScript snippet being utilized:
$(document).ready(function () {
for (var i = 0; i < 99; i++) {
$('#tbl').append("<tr><td>" + i + "2</td><td>1" + i + "</td><td>" + i + "4</td><td>6" + i + "</td><td>1</td><td>2019</td><td>abc</td><td>32080" + i + "</td></tr>");
}
$('#example').DataTable({
dom: 'Bfrtip',
lengthMenu: [
[10, 25, 50, -1],
['10 rows', '25 rows', '50 rows', 'Show all']
],
buttons: [
{
text: 'Show Radar Chart',
action: function (e, dt, node, config) {
$('#chartModal').modal('show');
}
},
{
extend: 'excelHtml5',
text: 'Export to Excel'
},
"pageLength"
]
});
});
The loop seen above serves the purpose of populating the table by repeating data entries.