【问题标题】:Pagination using AJAX and JSON format in Codeigniter在 Codeigniter 中使用 AJAX 和 JSON 格式进行分页
【发布时间】:2017-08-17 17:20:54
【问题描述】:

如何在 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>

阿贾克斯:

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

【问题讨论】:

  • 你可以修改你的分页请检查这个。 stackoverflow.com/questions/31553329/… 但是我会建议您使用数据表 js 库,因为您的视图中有表 stackoverflow.com/questions/42697776/… 如果有任何混淆,请告诉我
  • loadmore功能不是分页吧?就像点击按钮会加载更多数据一样?
  • 您是否使用数据加载 ajax 进行了分页? @shafiq
  • 是的,我做到了。通过加载更多可以使Ajax 分页。我会和你分享代码。但是我建议检查数据表。它具有内置的 Ajax 分页功能。检查我评论中的第二个链接
  • 您能帮我解决这个问题吗?是的,我知道它内置了分页,但遗憾的是我不知道如何在我的 ajax 代码上实现。

标签: jquery json ajax codeigniter pagination


【解决方案1】:

1.Codeigniter用ajax分页

控制器

/** 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);
        }
    });
})
  1. 使用数据表(服务器端 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>

控制器

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 将创建您的分页。

【讨论】:

  • 未定义变量:为 foreach() 提供的数据和无效参数我收到此错误@shafiq 我尝试了您的第一个示例
  • 它不会在这里 if ($this->input->is_ajax_request()) { /*** 如果它的 ajax 调用只返回表格视图 **/ $data['ajax'] = true ; echo json_encode($this->load->view('trademark',$data,true)); }
  • @GeninaAnneGabuten 更改此 $data = $query->result();到 $data['data'] = $query->result(); if ($this->input->is_ajax_request()) 仅在其 ajax 调用和返回表时才执行。我们将用 javascript 替换它
  • 现在它不返回数据,但不能在我的桌子它只是这样的.. 1POWERTRANS KC 51Actions2100Actions3101Actions41031Actions5104Actions6107Actions7108Actions8108-2085--01-HB1Actions91084Actions101168Actions11122Actions12136Actions13137Actions14145Actions151496Actions1615118Actions1715553Actions1815901Actions1916118Actions20162Actions ID商标行动 SPAN>
  • 在您的页面加载时,它应该进入 else 语句。然后我们在分页点击时将其称为 ajax。所以它应该进入 if 条件。
【解决方案2】:

你试过CodeIgniter Pagination类吗?

【讨论】:

    猜你喜欢
    • 2013-09-07
    • 1970-01-01
    • 2013-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多