[轉貼]CodeIgniter 使用 DataTables AJAX Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Codeigniter 4 Server Side DataTable Tutorial - Online Web Tutor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>
</head>
<body>
<div class="container">
<h2>Codeigniter 4 Server Side DataTable Tutorial</h2>
<table class="table table-striped" id="tbl-students-data">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.5.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.datatables.net%2F1.10.22%2Fjs%2Fjquery.dataTables.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0A%20%20%20%20var%20site_url%20%3D%20%22%3C%3Fphp%20echo%20site_url()%3B%20%3F%3E%22%3B%0A%0A%20%20%20%20%24(document).ready(%20function%20()%20%7B%0A%0A%20%20%20%20%20%20%20%20%24('%23tbl-students-data').DataTable(%7B%0A%20%20%20%20%20%20%20%20%20%20lengthMenu%3A%20%5B%5B%2010%2C%2030%2C%20-1%5D%2C%20%5B%2010%2C%2030%2C%20%22All%22%5D%5D%2C%20%2F%2F%20page%20length%20options%0A%20%20%20%20%20%20%20%20%20%20bProcessing%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20serverSide%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20scrollY%3A%20%22400px%22%2C%0A%20%20%20%20%20%20%20%20%20%20scrollCollapse%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20ajax%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20site_url%20%2B%20%22%2Fajax-load-data%22%2C%20%2F%2F%20json%20datasource%0A%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22post%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20key1%3A%20value1%20-%20in%20case%20if%20we%20want%20send%20data%20with%20request%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20columns%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20data%3A%20%22id%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20data%3A%20%22name%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20data%3A%20%22email%22%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20data%3A%20%22mobile%22%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20columnDefs%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20orderable%3A%20false%2C%20targets%3A%20%5B0%2C%201%2C%202%2C%203%5D%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20bFilter%3A%20true%2C%20%2F%2F%20to%20display%20datatable%20search%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>