4

我有一个通过 AJAX 加载的表格，并且分页也通过 AJAX 加载。该表包含我网站上所有用户的列表，一次限制为 30 个。

这就是我从控制器返回对 JavaScript 的响应的方式： 

    $users = $this->users_m->get_users($type, $offset);
    $num_rows = $this->users_m->user_stats($type);

    $config['per_page'] = 30;
    $config['num_links'] = 5;
    $config['total_rows'] = $num_rows[0];
    $this->pagination->initialize($config);

    echo json_encode(array(
        'users' => $users,
        'pagination' => $this->pagination->create_links()
    ));

一切都很好，只是分页永远不正确。第一次是，但在随后的请求中不是。

在非 AJAX 页面中使用分页类时，我点击的页码变为活动页码。此处第 1 页始终处于活动状态（被<strong>标签包围，而不是链接）。其次，数字永远不会改变。我得到：

[1] [2] [3] [4] [5] [6] [>] [Last >]

每次。即使我最后一次点击我得到相同的数字，它也不会改变。

如何让分页类与 AJAX 一起工作？

4

2 回答 2

4

好的，我想出了一个可行的解决方案，如果其他人有同样的问题，我会在这里发布。

我使用了在这里找到的分页类：

http://www.catchmyfame.com/2007/07/28/finally-the-simple-pagination-class/ https://github.com/catchmyfame/PHP-Pagination-Class/blob/master/paginator.class。 php

但将其修改为既可用作 CI 库，也可与我的特定 javascript 一起使用。创建一个名为的新文件

Pagination_ajax.php

并将其放在与默认分页类相同的位置

/system/libraries.

这是修改后的类：

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

/*
 * PHP Pagination Class
 * @author admin@catchmyfame.com - http://www.catchmyfame.com
 * @version 2.0.0
 * @date October 18, 2011
 * @copyright (c) admin@catchmyfame.com (www.catchmyfame.com)
 * @license CC Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) - http://creativecommons.org/licenses/by-sa/3.0/
 */

class Pagination_ajax {
    
    var $items_per_page;
    var $items_total;
    var $current_page;
    var $num_pages;
    var $mid_range;
    var $low;
    var $limit;
    var $return;
    var $default_ipp;
    var $querystring;
    var $ipp_array;

    function Paginator()
    {
        $this->current_page = 1;
        $this->mid_range = 7;
        $this->ipp_array = array(10,25,50,100,'All');
        $this->items_per_page = (!empty($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp;
    }

    function paginate()
    {
        if(!isset($this->default_ipp)) $this->default_ipp=25;
        if($_GET['ipp'] == 'All')
        {
            $this->num_pages = 1;
//          $this->items_per_page = $this->default_ipp;
        }
        else
        {
            if(!is_numeric($this->items_per_page) OR $this->items_per_page <= 0) $this->items_per_page = $this->default_ipp;
            $this->num_pages = ceil($this->items_total/$this->items_per_page);
        }
        $this->current_page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1 ; // must be numeric > 0
        $prev_page = $this->current_page-1;
        $next_page = $this->current_page+1;
        if($_GET)
        {
            $args = explode("&",$_SERVER['QUERY_STRING']);
            foreach($args as $arg)
            {
                $keyval = explode("=",$arg);
                if($keyval[0] != "page" And $keyval[0] != "ipp") $this->querystring .= "&" . $arg;
            }
        }

        if($_POST)
        {
            foreach($_POST as $key=>$val)
            {
                if($key != "page" And $key != "ipp") $this->querystring .= "&$key=$val";
            }
        }
        if($this->num_pages > 10)
        {
            $this->return = ($this->current_page > 1 And $this->items_total >= 10) ? "<a data-page=\"$prev_page\" class=\"paginate\" href=\"#\">&laquo; Previous</a> ":"<span class=\"inactive\" href=\"#\">&laquo; Previous</span> ";

            $this->start_range = $this->current_page - floor($this->mid_range/2);
            $this->end_range = $this->current_page + floor($this->mid_range/2);

            if($this->start_range <= 0)
            {
                $this->end_range += abs($this->start_range)+1;
                $this->start_range = 1;
            }
            if($this->end_range > $this->num_pages)
            {
                $this->start_range -= $this->end_range-$this->num_pages;
                $this->end_range = $this->num_pages;
            }
            $this->range = range($this->start_range,$this->end_range);

            for($i=1;$i<=$this->num_pages;$i++)
            {
                if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... ";
                // loop through all pages. if first, last, or in range, display
                if($i==1 Or $i==$this->num_pages Or in_array($i,$this->range))
                {
                    $this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a class=\"current\" href=\"#\">$i</a> ":"<a data-page=\"$i\" class=\"paginate\" href=\"#\">$i</a> ";
                }
                if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... ";
            }
            $this->return .= (($this->current_page < $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All') And $this->current_page > 0) ? "<a data-page=\"$next_page\" class=\"paginate\" href=\"#\">Next &raquo;</a>\n":"<span class=\"inactive\" href=\"#\">&raquo; Next</span>\n";
            $this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a data-page=\"1\" data-all=\"true\" class=\"paginate\" style=\"margin-left:10px\" href=\"#\">All</a> \n";
        }
        else
        {
            for($i=1;$i<=$this->num_pages;$i++)
            {
                $this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a data-page=\"$i\" class=\"paginate\" href=\"#\">$i</a> ";
            }
            $this->return .= "<a data-page=\"1\" data-all=\"true\" class=\"paginate\" href=\"#\">All</a> \n";
        }
        $this->low = ($this->current_page <= 0) ? 0:($this->current_page-1) * $this->items_per_page;
        if($this->current_page <= 0) $this->items_per_page = 0;
        $this->limit = ($_GET['ipp'] == 'All') ? "":" LIMIT $this->low,$this->items_per_page";
    }
    function display_items_per_page()
    {
        $items = '';
        if(!isset($_GET[ipp])) $this->items_per_page = $this->default_ipp;
        foreach($this->ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n";
        return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value+'$this->querystring';return false\">$items</select>\n";
    }
    function display_jump_menu()
    {
        for($i=1;$i<=$this->num_pages;$i++)
        {
            $option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n";
        }
        return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page$this->querystring';return false\">$option</select>\n";
    }
    function display_pages()
    {
        return $this->return;
    }
}

你可以在这个和原始下载之间做一个差异，看看我改变了什么。

控制器代码：

    public function get_users() {

        // pagination
        $this->load->library('pagination_ajax');
        $pages = new Pagination_ajax;
        $num_rows = $this->users_m->user_stats(); // this is the COUNT(*) query that gets the total record count from the table you are querying
        $pages->items_total = $num_rows[0];
        $pages->mid_range = 10; // number of links you want to show in the pagination before the "..."
        $pages->paginate();

        $users = $this->users_m->get_users($pages->limit); // your query

        echo json_encode(array(
            'users' => $users,
            'pagination' => $pages->display_pages()
        ));

    }

型号代码：

public function get_users($limit) {

    $sql = "SELECT *
            FROM `users`
            $limit";

    $query = $this->db->query($sql);

    $users = array();
    foreach ($query->result() as $row) {
        $users[] = array(
            'user_id'   => $row->user_id,
            'username'  => $row->username,
            'email'     => $row->email
        );
    }

    return $users;
}

查询：

// pagination
$('#pagination a').live('click', function() {
    var $this = $(this);
    var page = $this.data('page');
    var ipp = ($this.data('all')) ? 'All' : 30; // I am returning 30 results per page, change to what you want

    $.ajax({
        url: '/admin/users/get_users?page=' + page + '&ipp=' + ipp,
        dataType: 'json',
        success: function(response) {

            for(var i=0; i<response.users.length; i++) {
                var user = response.users[i];
                var tr = '<tr>' +
                            '<td>' + user.user_id + '</td>' +
                            '<td>' + user.username + '</td>' +
                            '<td>' + user.email + '</td>' +
                        '</tr>';

                $('table tbody').append(tr);
            }

            // pagination
            $('#pagination').html(response.pagination);             
        },
        error: function() {
            alert('An error occurred');
        }
    });

    return false;
});

HTML

    <h1>Users</h1>

    <table>
        <thead>
            <th>ID</th>
            <th>Username</th>
            <th>Email</th>
        </thead>
        <tbody></tbody>
    </table>                        
    
    <div id="pagination"></div>

CSS

#pagination { overflow: hidden; margin-bottom: 10px; text-align: center; }
#pagination a { display: inline-block; padding: 3px 5px; font-size: 14px; color: #333; border-radius: 3px; text-shadow: 0 0 1px #fff;  border: 1px solid #ccc;

    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
#pagination a:hover { border: 1px solid #333; }
#pagination a.current { color: #f00; }

希望有人觉得这很有用。

于 2012-07-08T19:28:35.303 回答
0

我是这样做的，添加jquery库

分页类：

 $html = "<a style=\"cursor:pointer\"  onclick=\"pagination('$url','$par','$div')\" >$text</a>";
        else:
        $html = "<a style=\"cursor:pointer\" onclick=\"pagination('$url','','$div')\" >$text</a>";

JS

var ServerCall = function(_url,_data,callback){

    $('#Spinner').center().show();
    _data = (_data == null)?'':_data;
    $.ajax({
           type: "POST",
           url: _url,
           data: 'ajax=1&'+_data,
           dataType:'html',
           success: 
             function(result) {
             $('#Spinner').hide();
                callback(result);
           },
            error: function (data, status, e){
                $('#Spinner').hide();
            }
        });
};


var pagination = function (_url,_params,_div)
{
    ServerCall(_url,_params,function(data){

        $('#'+_div).html(data);
        $('.editTableRow').bind('click',editfunction);
    });
};
于 2012-07-08T16:54:31.760 回答