服務器端分頁jQuery數據表

Question

我有顯示數據。因爲它包含1000多行數據。我想有一個服務器端分頁，而不是什麼jQuery數據表提供。正如我注意到的，datatables加載所有1000個查詢，並只做客戶端分頁。 這是我的控制器

function view_ftth_report() 
{ 

    if ($this->data['permission_ftth_report'] == '1') { 
    $this->load->model('staff_activity_model'); 
    $this->data['records'] = $this->staff_activity_model->view_ftth_report(); 

    $this->data['main_template'] = 'staff_activity/staff_activity_main'; 
    $this->data['inner_template'] = 'staff_activity/ftth/staff_activity_ftth_report_view'; 
    $this->data['inner_nav'] = 'staff_activity/staff_activity_nav'; 
    $this->load->view('common/common', $this->data); 
     } 
    else{ 
     $this->data['main_template'] = 'staff_activity/staff_activity_main'; 
     $this->data['inner_template'] = 'staff_activity/staff_activity_denied'; 
     $this->data['inner_nav'] = 'staff_activity/staff_activity_nav_denied'; 
     $this->load->view('common/common', $this->data); 
    } 
} 

這是我的模型。

function view_ftth_report(){ 
    $sql = "SELECT * FROM ct_staff_activity_ftth ORDER BY date DESC limit 20 "; 
    $data = array(); 
    $result = $this->db->query($sql); 
    foreach($result->result_array() as $row) 
    { 
     $data[] = $row; 
    } 
    return $data; 
} 

這是我的看法。我用ajax來調用記錄。

<script type="text/javascript"> 

$(function() { 
    $("#data_tbl").dataTable({ 
     "iDisplayLength": 50 
    }); 

}); 
</script> 
<div class="row"> 
<div class="col-md-12"> 
    <div class="box "> 
     <div class="box-body"> 
      <div class="row"> 
       <div class="col-md-12"> 
         <a href="<?php echo base_url();?>staff_activity/date_report_index"><button style="margin: 15px; padding: 10px; border-radius: 10px; border-collapse: collapse " class="btn btn-success btn-sm">Filter By Date</button></a> 

        <div class="col-md-12 table-responsive"> 
         <table class="table table-striped table-responsive" id="data_tbl"> 
          <h4>Recent Entries</h4> 
          <thead> 
          <tr> 
           <th>Sn.</th> 
           <th>Client's Name</th> 
           <th>Address</th> 
           <th>Fiber Length</th> 
           <th>Phone Number</th> 
           <th>Package</th> 
           <th>Result</th> 
           <th>Date</th> 
           <th>Team Name</th> 
           <th>Remarks</th> 
           <th>Edit</th> 
           <th>Delete</th> 

          </tr> 
          </thead> 
          <tbody id="result"> 
<?php 

          $count = 0; 

          foreach($records as $rec){ 
           $count = $count+1; 

           ?> 
           <tr> 
            <td><?php echo $count; ?></td> 
            <td><?php echo $rec['client_name']; ?></td> 
            <td><?php echo $rec['address']; ?></td> 
            <td><?php echo $rec['fiber_length']; ?></td> 
            <td><?php echo $rec['phone_number']; ?></td> 
            <td><?php echo $rec['package']; ?></td> 
            <td><?php echo $rec['result']; ?></td> 
            <td><?php echo $rec['date']; ?></td> 
            <td><?php echo $rec['team_name']; ?></td> 
            <td><?php echo $rec['remarks']; ?></td> 
            <td><a href="<?php echo base_url(); ?>staff_activity/edit_ftth_report/<?php echo $rec['id']?>">Edit</a></td> 
            <td><a href="javascript:void(0)" onclick="chk('<?php echo base_url(); ?>staff_activity/delete_ftth_report/<?php echo $rec['id'] ?>')">Delete</a></td> 

           </tr> 

           <?php 

          } 

          ?> 
          </tbody> 

         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

我也是在我的項目整合DataTable最近。 其實在codeigniter有一些library可用於DataTable。 請找到下面的一些有用的libraries

1. Ignited-Datatables
2. Codeigniter-DataTables

所以，你只需按照readme給出的instraction。 我正在提供的示例Ignited-Datatables，我將其集成到我的項目中。

笨

在 application\library文件夾
1. 第一招DataTable.php。

2. 負載在controller的constructor

   $this->load->library('Datatables');

3. $this->datatables->select(pass the column which you want to display in table and manage order also respect to your table)。

4. $this->datatables->from('ct_staff_activity_ftth');在此處傳遞表名稱。

JAVASCRIPT

1. 包括在你的視圖文件dataTable.min.js。

2. 把代碼放在document ready階段。

   $('#data_tbl').dataTable({ processing: true, serverSide: true, ajax: { "url": "/index.php/DataTableExample/dataTable", "type": "POST" }, columns: [ { data: "s.s_name" }, {data : "c.c_name"}, {data : "c.c_zip"}, { data: "$.city_state_zip" } //refers to the expression in the "More Advanced DatatableModel Implementation" ], aaSorting: [ [0, 'desc'] // provide the default sorting column with order numer. ] });

希望它會幫助你。如果您需要任何進一步的幫助，請告訴我。