Codeigniter ajax分页搜索结果不起作用

时间:2017-06-24 09:12:16

标签: php jquery ajax codeigniter pagination

我正在使用此网站的ajax分页方法并进行了一些小的更改:https://www.codexworld.com/codeigniter-ajax-pagination-with-search-filter/ 这似乎工作正常,直到我在搜索后尝试使用分页。

EG。当我搜索某些内容时,分页链接会正确显示,但是当我点击下一页时,它会重置为默认分页。我错过了什么吗?我一直在寻找和比较一整天,似乎无法找到问题所在。我希望有人能为我看看这个,看看我是否错过了什么。

这是ajax分页库

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');

class Ajax_pagination{

    var $base_url        = '';
    var $total_rows      = '';
    var $per_page        = 10;
    var $num_links       =  2;
    var $cur_page        =  0;
    var $first_link      = 'First';
    var $next_link       = '&#187;';
    var $prev_link       = '&#171;';
    var $last_link       = 'Last';
    var $uri_segment     = 3;
    var $full_tag_open   = '<ul class="pagination">';
    var $full_tag_close  = '</ul>';
    var $first_tag_open  = '<li>';
    var $first_tag_close = '</li>';
    var $last_tag_open   = '<li>';
    var $last_tag_close  = '<li>';
    var $cur_tag_open    = '<li class="active"><a href="#">';
    var $cur_tag_close   = '</a></li>';
    var $next_tag_open   = '<li>';
    var $next_tag_close  = '</li>';
    var $prev_tag_open   = '<li>';
    var $prev_tag_close  = '</li>';
    var $num_tag_open    = '<li>';
    var $num_tag_close   = '</li>';
    var $target          = '';
    var $anchor_class    = '';
    var $show_count      = false;
    var $link_func       = 'getData';
    var $loading         = '.loading';

    /**
     * Constructor
     * @access    public
     * @param    array    initialization parameters
     */
    function CI_Pagination($params = array()){
        if (count($params) > 0){
            $this->initialize($params);        
        }
        log_message('debug', "Pagination Class Initialized");
    }

    /**
     * Initialize Preferences
     * @access    public
     * @param    array    initialization parameters
     * @return    void
     */
    function initialize($params = array()){
        if (count($params) > 0){
            foreach ($params as $key => $val){
                if (isset($this->$key)){
                    $this->$key = $val;
                }
            }        
        }

        // Apply class tag using anchor_class variable, if set.
        if ($this->anchor_class != ''){
            $this->anchor_class = 'class="' . $this->anchor_class . '" ';
        }
    }

    function getCurrPage(){
        return $this->cur_page;
    }

    /**
     * Generate the pagination links
     * @access    public
     * @return    string
     */    
    function create_links(){
        // If our item count or per-page total is zero there is no need to continue.
        if ($this->total_rows == 0 OR $this->per_page == 0){
           return '';
        }

        // Calculate the total number of pages
        $num_pages = ceil($this->total_rows / $this->per_page);

        // Is there only one page? Hm... nothing more to do here then.
        if ($num_pages == 1){
//            $info = 'Showing : ' . $this->total_rows;
            $info = '';
            return $info;
        }

        // Determine the current page number.        
        $CI =& get_instance();    
        if ($CI->uri->segment($this->uri_segment) != 0){
            $this->cur_page = $CI->uri->segment($this->uri_segment);   
            // Prep the current page - no funny business!
            $this->cur_page = (int) $this->cur_page;
        }

        $this->num_links = (int)$this->num_links;
        if ($this->num_links < 1){
            show_error('Your number of links must be a positive number.');
        }

        if ( ! is_numeric($this->cur_page)){
            $this->cur_page = 0;
        }

        // Is the page number beyond the result range?
        // If so we show the last page
        if ($this->cur_page > $this->total_rows){
            $this->cur_page = ($num_pages - 1) * $this->per_page;
        }

        $uri_page_number = $this->cur_page;
        $this->cur_page = floor(($this->cur_page/$this->per_page) + 1);

        // Calculate the start and end numbers. These determine
        // which number to start and end the digit links with
        $start = (($this->cur_page - $this->num_links) > 0) ? $this->cur_page - ($this->num_links - 1) : 1;
        $end   = (($this->cur_page + $this->num_links) < $num_pages) ? $this->cur_page + $this->num_links : $num_pages;

        // Add a trailing slash to the base URL if needed
        $this->base_url = rtrim($this->base_url, '/') .'/';

        // And here we go...
        $output = '';

        // SHOWING LINKS
        if ($this->show_count){
            $curr_offset = $CI->uri->segment($this->uri_segment);
            $info = 'Showing ' . ( $curr_offset + 1 ) . ' to ' ;

            if( ( $curr_offset + $this->per_page ) < ( $this->total_rows -1 ) )
            $info .= $curr_offset + $this->per_page;
            else
            $info .= $this->total_rows;

            $info .= ' of ' . $this->total_rows . ' | ';
            $output .= $info;
        }

        // Render the "First" link
        if  ($this->cur_page > $this->num_links){
            $output .= $this->first_tag_open 
                    . $this->getAJAXlink( '' , $this->first_link)
                    . $this->first_tag_close;
        }

        // Render the "previous" link
        if  ($this->cur_page != 1){
            $i = $uri_page_number - $this->per_page;
            if ($i == 0) $i = '';
            $output .= $this->prev_tag_open 
                    . $this->getAJAXlink( $i, $this->prev_link )
                    . $this->prev_tag_close;
        }

        // Write the digit links
        for ($loop = $start -1; $loop <= $end; $loop++){
            $i = ($loop * $this->per_page) - $this->per_page;    
            if ($i >= 0){
                if ($this->cur_page == $loop){
                    $output .= $this->cur_tag_open.$loop.$this->cur_tag_close; // Current page
                }else{
                    $n = ($i == 0) ? '' : $i;
                    $output .= $this->num_tag_open
                        . $this->getAJAXlink( $n, $loop )
                        . $this->num_tag_close;
                }
            }
        }

        // Render the "next" link
        if ($this->cur_page < $num_pages){
            $output .= $this->next_tag_open 
                . $this->getAJAXlink( $this->cur_page * $this->per_page , $this->next_link )
                . $this->next_tag_close;
        }

        // Render the "Last" link
        if (($this->cur_page + $this->num_links) < $num_pages){
            $i = (($num_pages * $this->per_page) - $this->per_page);
            $output .= $this->last_tag_open . $this->getAJAXlink( $i, $this->last_link ) . $this->last_tag_close;
        }

        // Kill double slashes.  Note: Sometimes we can end up with a double slash
        // in the penultimate link so we'll kill all double slashes.
        $output = preg_replace("#([^:])//+#", "\\1/", $output);

        // Add the wrapper HTML if exists
        $output = $this->full_tag_open.$output.$this->full_tag_close;
        ?>
        <script>
        function getData(page){  
            $.ajax({
                method: "POST",
                url: "<?php echo site_url('/Common/Check'); ?>",
                success: function(data){
                    if(data==true){
                        console.log(page);
                        $.ajax({
                            method: "POST",
                            url: "<?php echo $this->base_url; ?>"+page,
                            data: { page: page },
                            beforeSend: function(){
                                $('<?php echo $this->loading; ?>').show();
                            },
                            success: function(data){
                                console.log("<?php echo $this->base_url; ?>"+page);
                                $('<?php echo $this->loading; ?>').hide();
                                $('<?php echo $this->target; ?>').html(data);
                            }
                        });
                    }else{
                        window.location.href="<?php echo site_url('/');?>";
                    }
                }
            });
        }
        </script>
        <?php
        return $output;
    }

        function getAJAXlink($count, $text) {
    $pageCount = $count?$count:0;
    return '<a href="javascript:void(0);"' . $this->anchor_class . ' data-per-
    page="'.$this->per_page.'" onclick="'.$this->link_func.'('.$pageCount.')">'. 
    $text .'</a>';
}
}

控制器

public function index()
    {
        $conditions = array();
        $data = array();
        $totalRec = count($this->ActivitiesModel->admin_get_and_search($conditions));
        $config['target']      = '#list';
        $config['base_url']    = site_url('/AdminActivities/Search');
        $config['total_rows']  = $totalRec;
        $config['per_page']    = $this->get_per_page();
        $this->ajax_pagination->initialize($config);
        $data['links'] = $this->ajax_pagination->create_links();
        $data['datatable'] = $this->ActivitiesModel->admin_get_and_search(array('limit'=>$this->get_per_page()));
        $data['user'] = $this->AccountModel->get_person($this->get_person_id());

        $this->load->view('layout/admins/common/header');
        $this->load->view('layout/admins/common/navigation');
        $this->load->view('layout/admins/common/title');
        $this->load->view('layout/admins/common/errors');
        $this->load->view('admins/activities/index',$data);
        $this->load->view('layout/admins/common/footer');
    }

    public function search(){
        $conditions = array();
        $page = $this->input->post('page');
        if(!$page){
            $offset = 0;
        }else{
            $offset = $page;
        }
        $keywords = $this->input->post('keywords');
        if(!empty($keywords)){
            $conditions['search']['keywords'] = $keywords;
        }
        $totalRec = count($this->ActivitiesModel->admin_get_and_search($conditions));
        $config['target']      = '#list';
        $config['base_url']    = site_url('/AdminActivities/Search');
        $config['total_rows']  = $totalRec;
        $config['per_page']    = $this->get_per_page();
        $this->ajax_pagination->initialize($config);
        $conditions['start'] = $offset;
        $conditions['limit'] = $this->get_per_page();
        $data['links'] = $this->ajax_pagination->create_links();
        $data['datatable'] = $this->ActivitiesModel->admin_get_and_search($conditions);
        $this->load->view('admins/activities/ajax_pagination', $data, false);
    }

查看

<script>

    function searchFilter() {
    // get current page number
    var page_num = parseInt($('li.active a').text()) - 1;
    // get active li parent element to get Data-Per-Page value
    var active_parent = $('li.active a').parent('li');
    console.log('page_num: ' + page_num);
    var item_per_page = parseInt(active_parent.prev('li').find('a').data('per-page'));
    // if NaN then use Next element
    if (isNaN(item_per_page)) {
        item_per_page = parseInt(active_parent.next('li').find('a').data('per-page'));
    }
    console.log('item_per_page: ' + item_per_page);
    // Query string Keyword
    var keywords = $('#search').val();
    console.log('keywords: ' + keywords);
    // Calculate the Offset
    var page = (page_num * item_per_page);
    console.log('page: ' + page);
    // attach custom payload to ajax post
    $.ajaxSetup({
        data: {
            'page': page_num,
            keywords: keywords
        },
    });
    $.ajax({
        method: "POST",
        url: "<?php echo site_url('/Common/Check'); ?>",
        success: function(data){
            if(data==true){
                $.ajax({
                    type: 'POST',
                    url: '<?php echo site_url('/AdminDocuments/Search/'); ?>'+page_num,
                    data:'page='+page_num+'&keywords='+keywords,
                    beforeSend: function () {
                        $('.loading').show();
                    },
                    success: function (html) {
                        $('#list').html(html);
                        $('.loading').fadeOut("slow");
                    }
                });
            }else{
                window.location.href="<?php echo site_url('AdminLogin');?>";
            }
        }
    });
    // Use same function to build filter output with pagination
    getData(page);
}        
</script>
<div id="maincontainer">
    <div class="row col-sm-8">
        <input type="text" name="search" id="search" class="form-control" placeholder="Search" onkeyup="searchFilter()"> 
    </div>
    <div id="list" class="row">
        <div class="col-sm-12 table-responsive">
            <table class="table">
                <tbody>
                    <?php 
                        if(!empty($datatable)){
                            foreach ($datatable as $data){
                    ?>
                        <tr class="text-left">
                            <td><?php echo $data['action']; ?> onto the <?php echo $data['page']; ?> Page on <?php echo $data['created_on']; ?></td>
                        </tr>
                    <?php 
                        }
                    }else{
                    ?>
                        <tr>
                            <td colspan="7">You do not have any items at the moment</td>
                        </tr>
                    <?php
                    }
                    ?>
                </tbody>
            </table>
        </div>
        <div class="pagination-links pull-right">
            <?php echo $links; ?>
        </div>
    </div>
    <div class="loading" style="display: none;">
        <div class="content">
            <img src="<?php echo base_url().'assets/images/loading/loading.gif'; ?>"/>
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

是的!,你错过了......

  

您错过了传递&#39; page_num &#39;在&#39; onkeyup="searchFilter()"&#39;

您正在使用功能 searchFilter(page_num){} 但不发送&#39; page_num &#39;值。因此,它始终是 0 &#39;当您使用AJAX进行POST时,您的分页将被重置..

另一种方法是使用getData(page)库类中编写的相同Ajax_pagination函数。在此之前更改Class中的一些代码:

更新Ajax_pagination&gt; getAJAXlink方法:

function getAJAXlink($count, $text) {
  $pageCount = $count?$count:0;
  return '<a href="javascript:void(0);"' . $this->anchor_class . ' data-per-
  page="'.$this->per_page.'" onclick="'.$this->link_func.'('.$pageCount.')">'. 
  $text .'</a>';
}

<强> JavaScript的:

<script type="text/javascript">
function searchFilter() {
    // get current page number
    var page_num = parseInt($('li.active a').text()) - 1;
    // get active li parent element to get Data-Per-Page value
    var active_parent = $('li.active a').parent('li');
    // get per page count
    var item_per_page = parseInt(active_parent.prev('li').find('a').data('per-page'));
    // if NaN then use Next element
    if (isNaN(item_per_page)) {
        item_per_page = parseInt(active_parent.next('li').find('a').data('per-page'));
    }
    // Query string Keyword
    var keywords = $('#search').val();
    // Calculate the Offset
    var page = (page_num * item_per_page);
    // attach custom payload to ajax post
    $.ajaxSetup({
        data: {
            'page': page_num,
            keywords: keywords
        },
    });
    // No Need to your Ajax Code Here, The getData already gives you filtered data
    // and will set in #list, basically getData posting Common/Check url and getting data
    // Here is getData post request analysis report.... :)    
    // Use same function to build filter output with pagination
    getData(page);
}
</script>

了解Ajax_pagination类中的getData Ajax请求流

<script type="text/javascript">
function getData(page) {
    // ajax start
    $.ajax({
        method: "POST",
        // sending request to Common/Check Controller/method
        url: "<?php echo site_url('/Common/Check'); ?>",
        success: function(data) {
            // if response returns
            if (data) {
                console.log(page);
                // call another ajax request
                $.ajax({
                    method: "POST",
                    // sending request to Class Ajax_pagination Config base_url link
                    url: "<?php echo $this->base_url; ?>" + page,
                    // sending payloads page e.g. 10, 20, 30...
                    data: {
                        page: page
                    },
                    beforeSend: function() {
                        $('<?php echo $this->loading; ?>').show();
                    },
                    success: function(data) {
                        // if response returns
                        console.log("<?php echo $this->base_url; ?>" + page);
                        $('<?php echo $this->loading; ?>').hide();
                        // set response inside Ajax_pagination Config target element e.g #list
                        $('<?php echo $this->target; ?>').html(data);
                    }
                });
            } else {
                window.location.href = "<?php echo site_url('/');?>";
            }
        }
    });
}            
</script>

一个好方法,使用CodeIgniter Builtin Pagination Class。它非常简单&amp;你可以通过谷歌搜索找到很多示例代码。

然后,您可以将 Controller,Model&amp;创建Ajax响应的视图 ,毕竟只需要返回带有数据的表html行来返回一些div花哨的内容< / em>的。逻辑背后你可以通过在Controller中使用 CodeIgniter Pagination Class来调用简单的ajax来构建你的内容,并且可以通过传递limit和amp;来获取模型的数据。抵消了它!

来源&amp;文档:CodeIgniter Pagination Class

@JianYA,请始终检查 浏览器网络面板 以查看我们在使用Ajax时获得的响应。它可能会让人更加怀疑而不是假设。您正在使用&#39; 普通/检查 &#39;在getData function内,所以这里有一些问题:

  1. 你有Common Controller&amp;检查方法?
  2. 您是否设置了$route['Common/Check'] = 'YourController/YourMethod'; 如果您没有此控制器,routes.phpconfig folder会这样?

答案 1 :(得分:1)

不使用数据库链接并且不使用ajax进行分页自动搜索的家伙,这是使用分页自动搜索的链接和代码。希望对您有所帮助。

https://datatables.net/examples/styling/bootstrap

代码:

<!DOCTYPE html>   


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

<body style="margin:20px auto">  
<div class="container">

<table id="example" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
            <th><div class="noCrsr">Name</div></th>
            <th><div class="noCrsr">Position</div></th>
            <th><div class="noCrsr">Office</div></th>
            <th><div class="noCrsr">Age</div></th>
            <th><div class="noCrsr">Start date</div></th>
            <th><div class="noCrsr">Salary</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>

        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$342,000</td>
        </tr>

        <tr>
            <td>Serge Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
        </tr>
        <tr>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
        </tr>
        <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
        </tr>
        <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>

</table>
  </div>
</body>  

</html>  


<script>
  $(document).ready(function() {
  $('#example').DataTable();
} );
  </script>

您曾经用来从数据库获取php值的表数据的位置,所以它仅过滤表数据本身中的搜索​​。