Bootstrap 4 Table Pagination
Ich hoffe Ihr könnt mir helfen.
Ich habe eine BS4 Tabelle mit SEARCH und PAGINATION erstellt.
Über der Tabelle neben der Suche kann man über "SHOW ME 10 oder 25 oder 50 oder 100 ENTRIES" die Anzahl der Treffer pro Seite definieren.
Unter der Tabelle kann man die Tabelle nach Seiten durchklicken 1,2 3 usw.
Der hier verwendete Code
<html>
<head>
<style>
#example_filter {
border: 1px solid red;
float: none;
text-align: center;
}
.dataTables_wrapper .dataTables_filter input {
width: 300px;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody id="rein">
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<script>
var lnk = document.createElement('link');
lnk.rel = 'stylesheet';
lnk.href = '/css_webseite/jquery.dataTables.min.css';
document.head.appendChild(lnk);
$(document).ready(function() {
$('#example').DataTable( {
"lengthChange": false,
"info": false,
"language": {
"search":"",
},
} );
} );
inne=document.getElementsByTagName('TBODY')[0];
for(k=0;k<10;k++){
k1=k*0.8;
inne.innerHTML+="<tr><td>"+k1+"</td> <td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>$86,500</td></tr>";
}
</script>
</body></html>