agdar/static/data/table-manage/scroller.json
2025-11-02 14:35:35 +03:00

35 lines
1.7 KiB
JSON
Executable File

<!-- required files -->
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css" rel="stylesheet" />
<script src="../assets/plugins/datatables.net/js/dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="../assets/plugins/datatables.net-scroller-bs5/js/scroller.bootstrap5.min.js"></script>
<!-- html -->
<table id="data-table-scroller" width="100%" class="table table-striped table-bordered align-middle text-nowrap">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>ZIP / Post code</th>
<th>Country</th>
</tr>
</thead>
</table>
<!-- script -->
<script>
$('#data-table-scroller').DataTable({
ajax: "../assets/js/demo/json/scroller_demo.json",
deferRender: true,
scrollY: 300,
scrollCollapse: true,
scroller: true,
responsive: true
});
</script>