如何使在codeigniter工作分页类使用AJAX？ [英] How to make the pagination class in Codeigniter work with AJAX?
本文介绍了如何使在codeigniter工作分页类使用AJAX？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我通过AJAX，沿着装有表中的分页是通过AJAX还装载的表。表中包含限制为30的时间在我的网站的所有用户的列表。
I have a table loaded via AJAX and along with the table the pagination is also loaded through AJAX. The table contains a list of all users on my site limited to 30 at a time.
这就是我要回的控制器响应JavaScript的：
This is how I'm returning the response to the JavaScript from the controller:
$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()
));
一切都很好，除了分页是永远正确的。第一次是，但是，随后的请求事实并非如此。
All is well except the pagination is never correct. The first time it is but on subsequent requests it is not.
当在非AJAX页面使用分页类，页码我点击成为活动之一。在这里，第1页始终处于活动状态（由＆LT包围;强＆GT; 标签，而不是作为一个链接）。其次，数字永远不会更改。我得到的：
When using the pagination class in a non AJAX page, the page number I click becomes the active one. Here page 1 is always active (surrounded by <strong> tags as opposed to being a link). Secondly the numbers never change. I get:
[1] [2] [3] [4] [5] [6] [>] [Last >]
每一次。即使我最后一次点击，我得到了相同的数字后面，它不会改变。
every time. Even if I click last I get the same numbers back, it doesn't change.
如何让分页类与AJAX工作吗？
How to get the pagination class to work with AJAX?
推荐答案
好吧，我想出了一个可行的解决方案，我将在这里发布的情况下，任何人有同样的问题。
Ok I came up with a working solution that I will post here in case anyone else has the same issue.
我曾经在这里发现了分页类：
I used the pagination class found here:
http://www.catchmyfame.com / 2007/07/28 /最后最简单分页级/
但修改了它与我的特殊JavaScript的工作既作为一个CI库，并能。创建一个名为新文件
but modified it to work both as a CI library and also with my particular javascript. Create a new file called
Pagination_ajax.php
和把它放在相同的位置，默认分页类
and put it in the same location as the default pagination class in
/系统/库。
这是修改后的类：
<?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=\"#\">« Previous</a> ":"<span class=\"inactive\" href=\"#\">« 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 »</a>\n":"<span class=\"inactive\" href=\"#\">» 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;
}
}
您可以做到这一点，原来的下载，看看到底是什么，我改变之间的差异。
You can do a diff between this and the original download to see exactly what I changed.
控制器code：
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()
));
}
型号code：
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;
}
JQuery的：
// 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; }
希望有人认为这是有用的。
Hope someone finds this useful.
这篇关于如何使在codeigniter工作分页类使用AJAX？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
