Question

controller：test.php

public function get_exam_college($offset=null)
    {
      $this->load->library('table');
      $this->load->library('pagination');

      $field=$this->input->post('field');

      $config['base_url'] = base_url('index.php/').'test/';
      $config['total_rows'] = $this->dependent_field->count_field_exam($field);
      $config['per_page'] = 10;
      $config['full_tag_open'] = '<ul class="pagination" id="search_page_pagination">';
      $config['full_tag_close'] = '</ul>';
      $config['cur_tag_open'] = '<li class="active"><a href="javascript:void(0)">';
      $config['num_tag_open'] = '<li>';
      $config['num_tag_close'] = '</li>';
      $config['cur_tag_close'] = '</a></li>';
      $config['first_link'] = 'First';
      $config['first_tag_open'] = '<li>';
      $config['first_tag_close'] = '</li>';
      $config['last_link'] = 'Next';
      $config['last_tag_open'] = '<li>';
      $config['last_tag_close'] = '</li>';
      $config['next_link'] = FALSE;
      $config['next_tag_open'] = '<li>';
      $config['next_tag_close'] = '</li>';
      $config['prev_link'] = FALSE;
      $config['prev_tag_open'] = '<li>';
      $config['prev_tag_close'] = '</li>';
      $config['page_query_string'] = FALSE;
      $this->pagination->initialize($config);

      $data['field'] = $this->dependent_field->field_exam_college($field,$config['per_page'],$offset);
      $this->load->view('exam-colleges',$data);
    }

观点：exam-colleges.php

<div id="container">
    <div id="body">
        <?php
            foreach ($field as $fetch) 
            {
        ?>
                <p id="name"><?php echo $fetch['college_name']; ?></p>
        <?php   
            }
        ?>
        <?php
            echo $this->pagination->create_links();
        ?>
    </div>
</div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('body').on('click','ul#search_page_pagination>li>a',function(e){
        e.preventDefault();
        var Pagination_url = $(this).attr('href');
            $.ajax({
                url:Pagination_url,
                type:'POST',
                success:function(data){
                    var $page_data = $(data);
                    $('#container').html($page_data.find('div#body'));
                    $('table').addClass('table');
                }
            });
        });
    });
</script>

我在codeigniter中创建ajax分页。当我搜索结果数据显示完美时，每页限制10，并且还显示分页。但问题是，当我点击分页时，它会更改网址并显示任何内容，例如我的链接是：

http://localhost/cs/index.php/test

点击分页按钮后，url链接变为

http://localhost/cs/index.php/test/10

什么都没显示。那么，如何删除此问题并以分页方式显示数据？请帮帮我。

谢谢

Answer 1

看来你在jQuery函数中有一个错误的选择器。您应该$('#body')使用<div id="body">。

Answer 2

在你的控制器上为分页创建一个单独的函数并使用json

在Ajax URL和分页URL上，请确保将其更改为您的内容想要它只是一个例子。

<?php

class Example extends CI_Controller
{

public function __construct()
{
    parent::__construct();
}

public function index()
{
    $this->load->view('common/example_view');
}

public function pagination()
{
    $json = array();

    $this->load->library('pagination');

    $config['base_url'] = base_url('example/pagination');
    $config['total_rows'] = $this->pagination_total_rows();
    $config['per_page'] = '2';
    $config['uri_segment'] = 3;
    $config["use_page_numbers"] = TRUE;
    $config['num_links'] = "16";
    $config['full_tag_open'] = "<ul class='pagination'>";
    $config['full_tag_close'] = "</ul>";
    $config['num_tag_open'] = '<li>';
    $config['num_tag_close'] = '</li>';
    $config['cur_tag_open'] = "<li class='disabled'><li class='active'><a href='#'>";
    $config['cur_tag_close'] = "<span class='sr-only'></span></a></li>";
    $config['next_tag_open'] = "<li>";
    $config['next_tagl_close'] = "</li>";
    $config['prev_tag_open'] = "<li>";
    $config['prev_tagl_close'] = "</li>";
    $config['first_tag_open'] = "<li>";
    $config['first_tagl_close'] = "</li>";
    $config['last_tag_open'] = "<li>";
    $config['last_tagl_close'] = "</li>";

    $this->pagination->initialize($config);

    $page = $this->uri->segment(3);
    $start = ($page - 1) * $config["per_page"];

    $json = array(
       'pagination_links'=> $this->pagination->create_links(),
       'pagination_results' => $this->pagination_data($config["per_page"], $start)
    );

    $this->output
    ->set_content_type('application/json')
    ->set_output(json_encode($json));
}

public function pagination_data($limit, $start)
{
    $this->db->limit($limit, $start);
    $query = $this->db->get($this->db->dbprefix . 'movie');
    return $query->result_array();
}

public function pagination_total_rows()
{
    $query = $this->db->get($this->db->dbprefix . 'movie');
    return $query->num_rows();
}

}

然后在视图中使用ajax之类的

view：example_view.php

<div class="container">

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="page-header">
<h1>Ajax Pagination</h1>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="body">
</div>
<div id="pagination_links"></div>
</div>
</div>

</div>

<script type="text/javascript">
function loadpag(page){
    $.ajax({
        url: "<?php echo base_url('example/pagination');?>/" + page,
        type: 'get',    
        dataType: 'json',       
        success: function(json) {
            table = '<table class="table table-striped table-bordered">';
            table += '<thead>';
            table += '<tr>';
            table += '<th>SomeName</th>';
            table += '<th>SomeName</th>';
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
            $.each(json['pagination_results'], function(key, value) {
                table += '<tr>';
                table += '<td>' + value['movie_id'] + '</td>';
                table += '<td>' + value['movie_name'] + '</td>';
                table += '</tr>';
            });
            table += '</tbody>';
            table += '</table>';

            $('#body').html(table); 

            $('#pagination_links').html(json['pagination_links']);
        },
    });
}

loadpag(1);

$(document).ready(function(){

    $(document).on("click", ".pagination li a", function(event){
        event.preventDefault();
        var page = $(this).data("ci-pagination-page");
        loadpag(page);
    });

});
</script>

如何在不刷新的情况下显示ajax分页数据或在codeigniter中重新加载页面？

2 个答案: