Как сделать класс pagination в Codeigniter работать с AJAX?

Хорошо, я придумал рабочее решение, которое я опубликую здесь, если у кого-то еще будет такая же проблема.

Я использовал класс разбивки на страницы, найденный здесь:

http://www.catchmyfame.com/2007/07/28/finally-the-simple-pagination-class/

но модифицировал его для работы как библиотеки 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; } 

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> -  <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; } 

Надеюсь, кто-то найдет это полезным.

Я сделал это таким образом, добавьте библиотеку 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); }); };