[轉貼]CodeIgniter 使用 DataTables AJAX Demo

[轉貼]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="&lt;script&gt;" title="&lt;script&gt;" />
  <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="&lt;script&gt;" title="&lt;script&gt;" />
  
  <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="&lt;script&gt;" title="&lt;script&gt;" />
</body>

</html>

 

內容出處: CodeIgniter 4 Server Side DataTable Listing

分類: 網頁, 網頁設計,標籤: , , 。這篇內容的永久連結

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *