在Codeigniter中的AJAX分頁

Question

有人可以幫助我在Codeigniter中使用JQuery進行簡單的AJAX分頁嗎？我正在檢索數組的行，我不知道如何分頁。我的AJAX響應將是多行，我想要顯示它們在每頁10行。親切地幫助我通過。

我認爲文件

<script> 
$(document).ready(function(){ 
$("#getreport").click(function(){ 
var fromdate = $('#date1').val(); 
var todate = $('#date2').val(); 
$("#header").css("visibility", "visible"); 
$("#bodycontent").empty(); 
$("#bodycontent").html('<div id="subcontent"></div>'); 
data = 
{ 
"from" : fromdate, 
"to" : todate 
} 
$.post('<?=site_url("report_controller/managesuppliers_report"); ?>', data ,function (result) { 
for(i=0;i<result["count"];i++){ 
$('#subcontent').after(
' <tr class="style"> '+ 
' <td><img src="<?php echo base_url(); ?>/uploads/images/' +result["records"] [i]["picture"] + '" width="30px" height="30px"></td> '+ 
' <td>' +result["records"][i]["suppliername"] + '</td> '+ 
' <td>' +result["records"][i]["contactperson"] + '</td> '+ 
' <td>' +result["records"][i]["mobilenumber"] + '</td> '+ 
' <td>' +result["records"][i]["phone"] + '</td> '+ 
' <td>' +result["records"][i]["email"] + '</td> '+ 
' </tr> '); 
} 
});  
}); 
}); 
</script> 
<div class="panel" id="header" style="visibility: hidden;"> 
<div class="panel-heading"> 
<span class="panel-title"></span> 
</div> 
<div class="table-responsive"> 
<table class="table allcp-form theme-warning fs13"> 
<thead> 
<tr class="bg-light"> 
<th class="">Image</th> 
<th class="">Supplier Name</th> 
<th class="">Contact Person</th> 
<th class="">Mobile Number</th> 
<th class="">Phone</th> 
<th class="">Email</th> 
<th class=""></th> 
</tr> 
</thead> 
<tbody id="bodycontent"> 

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

我的控制文件中的輔助

public function managesuppliers_report() 
{ 
$query = $this->reportmodel->report_select($this->input->post('from'),$this->input->post('to')); 
$data['records'] = $query['records']; 
$data['count'] = $query['count']; 
$this->output->set_content_type('application/json'); 
$this->output->set_output(json_encode($data)); 
return $data; 
} 

我的模型文件

public function report_select($date1,$date2) 
{ 
$this->db->where('date >=', $date1); 
$this->db->where('date <=', $date2); 
$query=$this->db->get('suppliers'); 
$row = $query->result(); 
return array(
'records' => $row, 
'count' => count($row)); 
} 

Answer 1

製作功能得到補償：

function getoffset($page=1,$per_page_val=10){ 
    if ($page == 1) 
    { 
     $offset = 0; 
    } 
    else 
    { 
     $offset = ($page - 1) * $per_page_val; 
    } 
    return $offset; 
} 

現在，如果你點擊第1頁或第2頁，通過參數頁值控制器，

現在主控制器， 如果第2頁，所以$頁= 2，和你想的10條記錄，$ per_page_val = 10.

$offset = getoffset($page,$per_page_val); 

現在我們可以有兩種方式， 您可以使用array_slice，

$recordsArr = array_slice($records,$offset,$per_page_val); 

OR

您可以使用限制和抵消查詢， 在模型中，

$this->db->limit($per_page_val, $offset); 

我希望這會幫助你。

Answer 2

首先你需要獲取表中有多少條記錄。

 $total_records = $this->db->count_all('table_name'); 
     $item_per_pg = 10; 
     if ($total_records > 10)  
    { 
      $total_pages = ceil($total_records/$cat_per_pg); 

     echo "<ul class='pagination' id='disp_pagination_links'>"; 
       echo "<li id='0' class='item_prev'><a> &laquo; </a></li>"; 
       for ($page = 1; $page <= $total_pages; $page++) { 
        echo "<li id='" . $page . "'><a>" . $page . "</a></li>"; 
       } 
    echo "<li id='2' class='cat_next'><a> &raquo; </a></li>"; 


    } 
// In above code we have created pagination links. 

現在添加按鈕單擊事件如下 -

$(document).on('click', '#disp_cat_data_pagi li', function() 
{ 
var page_no = $(this).attr('id'); // Get page no as id and send it to php 

    $.ajax({ 
      url: base_url + 'disp_records', 
      type: 'post', 
      data: {page_no: page_no}, 
      success: function (data) { 
       $('#disp_records').html(data); 

}); 

控制器

public function disp_records() 
{ 
$page = $this->input->post('page_no'); 
$page -= 1; 
      $per_page = 10; 
      $start = $page * $per_page; 
      $data = $this->model_name->model_function($start, $per_page); 
} 

，終於開火模型選擇查詢，爲後續

public function model_function() 
{ 
    $this->db->select("*"); 
     $this->db->from("table_name"); 
     $this->db->limit($per_page, $start); 
     $query = $this->db->get(); 
     return $query->result(); 
} 

我希望它會幫助你。