Question

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

这是我的完整代码。

三江源

型号：

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

控制器

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.Cignigniter与ajax的分页

控制器

XElement element = document.Descendants("Setting")
    .Where(x => x.Attribute("name").Value == "ToolTipVariables")
    .FirstOrDefault();

查看制造商

/** 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');
}

<强>的Javascript

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

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

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

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

您的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">

现在你的ajax电话

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

<强>控制器

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

数据表将创建您的分页。

Answer 2

您是否尝试过CodeIgniter Pagination课程？

在Codeigniter中使用AJAX和JSON格式的分页

2 个答案: