javascript - 加载的 Ajax 页面表中的 Codeigniter 分页

Question

PS。我知道对此有很多答案，但它们看起来非常复杂，而且我只是带有语义 UI 的 codeigniter 和 jquery 的初学者，所以我在 Web 开发方面遇到了困难。

我想知道如何在我的代码中从加载ajax函数的页面实现分页。我发现将 ajax 与 codeigniter 结合起来非常困难，而且我不是一个非常熟练的程序员，所以请帮助我。

加载所有数据的java脚本

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

Controller 功能

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您将找到如何使用它的示例。

您的 Controller 应如下所示:

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);
    }

您必须将 View 分成两部分 View 1

<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>

View 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>

我无法为您编写所有代码，但这可以帮助您。对模型进行更改以与之匹配。