我正在使用此网站的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 = '»';
var $prev_link = '«';
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>
答案 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内，所以这里有一些问题：
$route['Common/Check'] = 'YourController/YourMethod';
如果您没有此控制器，routes.php内config 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值的表数据的位置，所以它仅过滤表数据本身中的搜索。