Question

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

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

加载所有数据的java脚本

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

控制器功能

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

您必须将视图拆分为两部分的 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>

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

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

1 个答案: