jquery - 在 Codeigniter 中使用 AJAX 和 JSON 格式进行分页

Question

如何在codeigniter中使用ajax、json格式进行分页？我做了一个没有ajax的分页并且它正在工作。但我现在正在处理 ajax 和 json 格式来加载我的数据。我不知道如何添加分页。有谁可以帮助我吗？

这是我的完整代码。

谢谢

型号:

public function getManufacturerRecords(){ //retrieve data
    $query = $this->db->get('manufacturer');
    return $query->result();
}

Controller

public function index(){
    if($this->session->userdata('is_logged_in')){
        $this->load->view('../template/header');
        $this->load->view('manufacturer');
        $this->load->view('../template/footer');
    } else {
        redirect('main/restricted');
    }
}

public function manufacturer_list(){
    $result = $this->manufacturer_model->getManufacturerRecord();
    echo json_encode($result);
}

查看:

<table class="table table-condensed table-bordered table-striped" style="width:50%">
    <thead>
       <tr>
           <th>ID</th>
           <th>Manufacturer</th>
           <th>Actions</th>
       </tr>
    </thead>
    <tbody id="showdata">

    </tbody>
</table>

Ajax :

showRecords();
function showRecords(){
   $.ajax({
       url: "<?=base_url()?>manufacturer/manufacturer_list",
       type: 'POST',
       dataType: 'json',
       success: function(data){
           var html = '';
           for(i=0; i<data.length; i++){
               html += '<tr align="center">'+
                          '<td>'+data[i].id+'</td>'+
                          '<td>'+data[i].brand+'</td>'+
                          '<td>'+'<button class="btn btn-primary edit-data" data="'+data[i].id+'">Edit</button>'+ '&nbsp;'+
                          '<button class="btn btn-danger delete-data" data="'+data[i].id+'">Delete</button>'+'</td>'+
                       '</tr>';
           }
           $("#showdata").html(html);
       },
       error: function(){
           alert('Could not load the data');
       }
    });
}

Answer 1

1.Codeigniter使用ajax分页

Controller

/** Load pagination library **/
$this->load->library('pagination');
/** initialize the config **/
$config['per_page'] = 20; /** per page records **/
$config['uri_segment'] = 3; /** in case your url has different please use proper uri segment**/
$config['cur_page'] = $this->uri->segment(3) ? $this->uri->segment(3): '1';
$config['full_tag_open'] = '<ul class="pagination">'; /** we will use this class for ajax call or you can customize pagination as you want**/
$config['full_tag_close'] = '</ul>';
$config['num_tag_open'] = '<li>';
$config['num_tag_close'] = '</li>';
$config['cur_tag_open'] = '<li class="active"><a>';
$config['cur_tag_close'] = '</a></li>';
$config['next_tag_open'] = '<li class="next">';
$config['next_tag_close'] = '</li>';
$config['prev_tag_open'] = '<li class="prev">';
$config['prev_tag_close'] = '</li>';

$offset = $this->uri->segment(3);
if ($offset == 1 || $offset == '' || !intval($offset)) 
    $offset = 0;
$offset ? $offset : 0;
$limit = $config['per_page'];
$q = "SELECT * FROM TABLE NAME "; /** change your query or use model **/
$query = $this->db->query($q);
$config['total_rows'] = $query->num_rows();/** COUNT OF TOTAL RECORDS IN DATABASE **/;
/** get your data **/
$q .= " LIMIT $offset, $limit";
$query = $this->db->query($q);
$data['data'] = $query->result();
$config['base_url'] = 'SITE_NAME/CONTROLLER_NAME/METHOD_NAME';
$this->pagination->initialize($config);
$data['links'] = $this->pagination->create_links(); /** this will create  pagination  links **/
$data['ajax'] = false;
if ($this->input->is_ajax_request()) {
    /*** return only Table view if its ajax call **/
    $data['ajax'] = true;
    echo json_encode($this->load->view('manufacturer',$data,true));
}else{
    $this->load->view('../template/header');
    $this->load->view('manufacturer',$data);
    $this->load->view('../template/footer');
}

查看制造商

<?php if(!$ajax){?>
    <div class="loadData">
}?>
<table  id="showdata" class="table table-condensed table-bordered table-striped" style="width:50%">
    <thead>
       <tr>
           <th>ID</th>
           <th>Manufacturer</th>
           <th>Actions</th>
       </tr>
    </thead>
    <tbody>
        <?php foreach($data as $k=>$v){?>
            <tr><?php echo $v['id']?></tr>
           <tr><?php echo $v['Manufacturer']?></tr>
           <tr>Actions</tr>
        <?php }?>
    </tbody>
</table>
<?php if(!$ajax){?>
    </div>
<?php }?>
/** This will show pagination link**/
<?php echo $links;?>

Javascript

/** now we will prevent pagination default functionality and make it as ajax **/
$(document).on('click','.pagination li a',function(e){
    e.preventDefault();
    url = $(this).attr('href');    
    $.ajax({
        url:url,
        type:json, 
        success :function(data){
            $(".loadData").html(data);
        }
    });
})

使用数据表(服务器端 Ajax)和 codeigniter 进行分页。

将dataTable的js和css库包含到html文件中

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

您的 html 如下所示

<table class="table table-condensed table-bordered table-striped" id="example">
    <thead>
       <tr>
           <th>ID</th>
           <th>Manufacturer</th>
           <th>Actions</th>
       </tr>
    </thead>
</table>

现在你的ajax调用

<script>
        $(document).ready(function() {
            $('#example').DataTable({
                url: '<?php base_url(); ?>controllerName/index',
                processing: true,
                serverSide: true,
                paging: true,
                searching: true,
                ordering: true,
                order: [[0, "asc"]],
                scrollX: true,
                scroller: true,
                columns: [{data: id"}, {data: "manufacturer"}, {data: "action"}]               
            });
        });
    </script>

Controller

public function index() {
if($this->session->userdata('is_logged_in')){
        $data = array();
        if ($this->input->is_ajax_request()) {
            /** this will handle datatable js ajax call * */
            /** get all datatable parameters * */
            $search = $this->input->get('search');/** search value for datatable  * */
            $offset = $this->input->get('start');/** offset value * */
            $limit = $this->input->get('length');/** limits for datatable (show entries) * */
            $order = $this->input->get('order');/** order by (column sorted ) * */
            $column = array('id', 'manufacturer');/**  set your data base column name here for sorting* */
            $orderColumn = isset($order[0]['column']) ? $column[$order[0]['column']] : 'parameter';
            $orderDirection = isset($order[0]['dir']) ? $order[0]['dir'] : 'asc';
            $ordrBy = $orderColumn . " " . $orderDirection;

            if (isset($search['value']) && !empty($search['value'])) {
                /** creat sql or call Model * */

                /** I am calling sql directly in controller for your answer 
                 * Please change your sql according to your table name
                 * */
                $sql = "SELECT * FROM TABLE_NAME WHERE column_name '%like%'" . $search['value'] . " order by " . $ordrBy . " limit $offset,$limit";
                $sql = "SELECT count(*) FROM TABLE_NAME WHERE column_name '%like%'" . $search['value'] . " order by " . $ordrBy;
                $result = $this->db->query($sql);
                $result2 = $this->db->query($sql2);
                $count = $result2->num_rows();
            } else {
                /**
                 * If no seach value avaible in datatable
                 */
                $sql = "SELECT * FROM TABLE_NAME  order by " . $ordrBy . " limit $offset,$limit";
                $sql2 = "SELECT * FROM TABLE_NAME  order by " . $ordrBy;
                $result = $this->db->query($sql);
                $result2 = $this->db->query($sql2);
                $count = $result2->num_rows();
            }
            /** create data to display in dataTable as you want **/    

            $data = array();
            if (!empty($result->result())) {
                foreach ($result->result() as $k => $v) {
                    $data[] = array(
                         'id' =>  $v['id'],
                         'manufacturer'=>$v['manufacturer'],                         
                         'actions' =>  "<a href=''><strong>Edit</strong></a>" 
                    );
                }
            }
            /**
             * draw,recordTotal,recordsFiltered is required for pagination and info.
             */
            $results = array(
                "draw" => $this->input->get('draw'),
                "recordsTotal" => count($data),
                "recordsFiltered" => $count,
                "data" => $data 
            );
            echo json_encode($results);
        } else {
            /** this will load by default with no data for datatable
             *  we will load data in table through datatable ajax call
             */
        $this->load->view('../template/header');
        $this->load->view('manufacturer',$data);
        $this->load->view('../template/footer');

        }
    }else{
        redirect('main/restricted');
    }
}

Datatable 将创建您的分页。