加載的Ajax頁面中的Codeigniter分頁表格

Question

PS。我知道有很多這樣的答案，但他們似乎很複雜，我只是一個初學者在codeigniter和jquery語義的用戶界面，所以我很難在web開發。

我想知道如何在加載了ajax函數的頁面中在我的代碼中實現分頁。我發現將ajax和codeigniter結合起來非常困難，我不是一個非常熟練的程序員，所以請幫助我解決這個問題。

它加載所有數據

function viewhardware(){ 
    $.ajax({ 
    type: "GET", 
    url: "gethw", 
     async: true, 
    }).done(function(data) { 
    $('#hardware').html(data); 
    }); 
} 

控制器功能的Java腳本

public function gethw(){ 
     $this->load->model('asset_model'); 
     $this->data['hwares'] = $this->asset_model->get_allhw(); 
     $this->load->view('gethware',$this->data); 
    } 

我的模型功能

public function get_allhw(){ 

     $this->db->select('*'); 
     $this->db->from('hardware h'); 
     $query = $this->db->get(); 
     if($query->num_rows() != 0) 
     { 
      return $query->result_array(); 
     } 
     else 
     { 
      return false; 
     } 

} 

和VIEW

<table class="ui compact table"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Name</th> 
     <th>Description</th> 
     <th>Date Installed</th> 
     <th>Serial No.</th> 
     <th>PC ID</th> 
     <th>Status</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 


    <center><i class="huge desktop icon""></i><h3>Hardwares</h3> 
       <hr> 
       <?php 

        if(!empty($hwares)){ 
         foreach($hwares as $hwares){ 
          $hw_id = $hwares['hw_id']; 
          $hw_name = $hwares['hw_name']; 
          $hw_description = $hwares['hw_description']; 
          $hw_dateinstalled = $hwares['hw_dateinstalled']; 
          $hw_serialno = $hwares['hw_serialno']; 
          $hw_comp_id = $hwares['hw_comp_id']; 
          $hw_status = $hwares['hw_status']; 
        ?> 
       <tr> 
        <th> 
        <?php echo $hw_id; ?> 
        </th> 
        <th> 
        <?php echo $hw_name; ?> 
        </th> 
        <th> 
        <?php echo $hw_description; ?> 
        </th> 
        <th> 
        <?php echo $hw_dateinstalled; ?> 
        </th> 
        <th> 
        <?php echo $hw_serialno; ?> 
        </th> 
        <th> 
        <?php echo $hw_comp_id;?> 
        </th> 
        <th> 
        <button class="ui basic button"> 
        <center><i class=" <?php if($hw_status==1){ echo 'green';}else{ echo 'red'; }; ?> 
           desktop icon"></i> 
        </button> 
        </th> 


        <th><a id="editpc" class="ui button mini yellow"><i class="write icon"></i></a> 
        <a class="ui mini red button" href="#"><i class="remove icon"></i></a></th>  


       </tr> 

        <?php 
         } 
         } 
         ?> 

</tbody> 
</table>  

Answer 1

您可以使用Ajax_pagination庫。

Here你會找到如何使用它的例子。

你的控制器應是這樣的：

function __construct() { 
     parent::__construct(); 
     $this->load->library('Ajax_pagination'); 
     $this->perPage = 1; 
    } 
public function gethw(){ 
     $this->load->model('asset_model'); 

     //total rows count 
     $totalRec = count($this->asset_model->getRows()); 

     //pagination configuration 
     $config['first_link'] = 'First'; 
     $config['div']   = 'div-to-refresh'; //parent div tag id 
     $config['base_url'] = base_url().'controller/ajaxPaginationData'; 
     $config['total_rows'] = $totalRec; 
     $config['per_page'] = $this->perPage; 

     $this->ajax_pagination->initialize($config); 

     //get the posts data 
     $this->data['hwares'] = $this->asset_model->getRows(array('limit'=>$this->perPage)); 
     $this->load->view('view1',$this->data); 
    } 
function ajaxPaginationData() 
    { 
     $page = $this->input->post('page'); 
     if(!$page){ 
      $offset = 0; 
     }else{ 
      $offset = $page; 
     } 

     //total rows count 
     $totalRec = count($this->asset_model->getRows()); 

     //pagination configuration 
     $config['first_link'] = 'First'; 
     $config['div']   = 'div-to-refresh'; //parent div tag id 
     $config['base_url'] = base_url().'controller/ajaxPaginationData'; 
     $config['total_rows'] = $totalRec; 
     $config['per_page'] = $this->perPage; 

     $this->ajax_pagination->initialize($config); 

     //get the posts data 
     $this->data['hwares'] = $this->asset_model->getRows(array('start'=>$offset,'limit'=>$this->perPage)); 

     //load the view 
     $this->load->view('view2', $this->data, false); 
    } 

你有2件 拆分視圖VIEW1

<div id="hardware"> 
<div id="div-to-refresh"> 
    <?php $this->load->view('view2',$this->data); ?> 
</div> 
<div id="pagination"><?php echo $this->ajax_pagination->create_links(); ?></div> 
</div> 

視圖2

<table class="ui compact table"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Name</th> 
     <th>Description</th> 
     <th>Date Installed</th> 
     <th>Serial No.</th> 
     <th>PC ID</th> 
     <th>Status</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 


    <center><i class="huge desktop icon""></i><h3>Hardwares</h3> 
       <hr> 
       <?php 

        if(!empty($hwares)){ 
         foreach($hwares as $hwares){ 
          $hw_id = $hwares['hw_id']; 
          $hw_name = $hwares['hw_name']; 
          $hw_description = $hwares['hw_description']; 
          $hw_dateinstalled = $hwares['hw_dateinstalled']; 
          $hw_serialno = $hwares['hw_serialno']; 
          $hw_comp_id = $hwares['hw_comp_id']; 
          $hw_status = $hwares['hw_status']; 
        ?> 
       <tr> 
        <th> 
        <?php echo $hw_id; ?> 
        </th> 
        <th> 
        <?php echo $hw_name; ?> 
        </th> 
        <th> 
        <?php echo $hw_description; ?> 
        </th> 
        <th> 
        <?php echo $hw_dateinstalled; ?> 
        </th> 
        <th> 
        <?php echo $hw_serialno; ?> 
        </th> 
        <th> 
        <?php echo $hw_comp_id;?> 
        </th> 
        <th> 
        <button class="ui basic button"> 
        <center><i class=" <?php if($hw_status==1){ echo 'green';}else{ echo 'red'; }; ?> 
           desktop icon"></i> 
        </button> 
        </th> 


        <th><a id="editpc" class="ui button mini yellow"><i class="write icon"></i></a> 
        <a class="ui mini red button" href="#"><i class="remove icon"></i></a></th>  


       </tr> 

        <?php 
         } 
         } 
         ?> 

</tbody> 
</table> 

我無法爲您編寫所有代碼，但這可以幫助您。 在您的模型中進行更改以與此匹配。