如何显示Ajax分页数据而无需刷新或在Codeigniter中重新加载页面? [英] how to show ajax pagination data without refresh or reload a page in codeigniter?

问题描述

控制器:test.php

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

view: 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个，并且分页也显示.但是问题是，当我单击分页时，它会更改网址，并且什么都不显示，例如，如果我的链接是:

I am creating ajax pagination in codeigniter. When I search result data are showing perfectly with limit 10 per page and pagination are also showing. But the problem is that when I click on pagination it change the url and display nothing for example if my link is :

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

点击分页按钮后，URL链接更改为

after click on pagination button url link change into

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

什么都不显示.因此，如何解决此问题并通过分页显示数据?请帮助我.

Where it display nothing. So, how can I remove this problem and showing data with pagination ? Please help me.

谢谢

推荐答案

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

On your controller create a function seperate for pagination and use json

在Ajax URL和分页URL上，确保将其更改为您要更改的内容 希望它只是下面的一个例子.

On the Ajax URL and pagination URL make sure you change it to what you want it is only an example below.

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

}

然后在视图上使用

视图:example_view.php

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中重新加载页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！