【发布时间】：2021-03-06 20:44:29
【问题描述】：
我正在 ajax 中实现以下分页示例：How to display the page with ajax?
但是每次点击页面下面的按钮或数字时，它都会插入HTML页面的页眉和页脚，也就是在ajax中接收响应时就好像插入了整个页面
$(function() {
$('#amount_show').change(function(evt) {
evt.preventDefault()
url = $(this).parent().attr('action')
ajaxLoad(url)
});
$('.data-table-pagination').on('click', '.pagination li a', function(evt) {
evt.preventDefault()
url = $(this).attr('data-target')
ajaxLoad(url)
});
function ajaxLoad(url) {
query_params = {
amount_show: $('#amount_show').val()
};
$('.data-table-pagination').html('<div class="loading">Loading...</div>')
$.ajax({
type: "GET",
url: url,
data: $.param(query_params),
success: function(data) {
$('.data-table-pagination').fadeOut('1000', function() { $(this).html(data) }).fadeIn('1000')
}
});
}
});
点击分页按钮时如何避免此错误：
<a class="page-link" data-target="index.php?page=2">2</a>
图像捕获错误：
点击页面前：
点击页面后：
按照我分离代码的建议：
index.php
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="header">
<div class="header">
Hola
</div>
</div>
<div id="wrapper">
<div class="container">
<div class="data-pagination">
<div id="news-header" class="bootgrid-header container-fluid">
<div class="row">
<div class="col-sm-12 actionBar">
<div class="search-bar">
<!--<input type="text" id="myInput" placeholder="What are you looking for?">-->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
</div>
<div class="actions btn-group">
<select id="amount_show" name="amount_show">
<option value="10" <?php if ($records_by_page==10) echo "selected"; ?>>10</option>
<option value="25" <?php if ($records_by_page==25) echo "selected"; ?>>25</option>
<option value="50" <?php if ($records_by_page==50) echo "selected"; ?>>50</option>
<option value="100" <?php if ($records_by_page==100) echo "selected"; ?>>100</option>
</select>
</div>
</div>
</div>
</div>
<div class="data-table-pagination">
<?php echo $results_table; ?>
</div>
</div>
</div>
</div>
<!-- THE AJAX CODE IS HERE -->
<script type="text/javascript" src="assets/js/pag.min.js"></script>
分页.php
<?php
$pagination_page = ''.$_SERVER['PHP_SELF'].'';
$defaul_records = 10;
if (isset($_GET['page'])) {
$page = $_GET['page'] ?: '';
}else{
$page = 1;
}
if (isset($_GET['amount_show'])) {
$records_by_page = $_GET['amount_show'];
} else {
$records_by_page = $defaul_records;
}
$localization_sql = ($page-1) * $records_by_page;
$sql = "SELECT id_product,image,product,price_old,price
FROM tbl_products
WHERE active=1
ORDER BY id_product ASC LIMIT $localization_sql, $records_by_page";
$stmt = $con->prepare($sql);
//$stmt->bind_param("i", $active);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows>0) :
// http://php.net/manual/es/function.ob-start.php
ob_start();
?>
<table id="myTable employee_table" class="table table-condensed table-hover table-striped bootgrid-table">
<thead>
<tr>
<th>ID</th>
<th>IMAGEN</th>
<th>PRODUCTO</th>
<th>PRECIO</th>
<th>ACCIÓN</th>
</tr>
</thead>
<tbody>
<?php
$stmt->bind_result($id_product,$image,$product,$price_old,$price);
while ($stmt->fetch()) {
echo '<tr>
<td>'.$id_product.'</td>
<td>';
echo'</td>
<td>'.$product.'</td>
<td>'.$price.'</td>
<td>
<span class="view_data" id="'.$id_product.'">Ver</span> |
<span class="edit_data" id="'.$id_product.'">Editar</span>
</td>
</tr>';
}
$stmt->close();
?>
</tbody>
</table>
<div class="pagination">
<ul class="pagination">
<?php
$sql = "SELECT * FROM tbl_products";
$stmt = $con->prepare($sql);
$stmt->execute();
$stmt->store_result();
$BD_records = $stmt->num_rows;
$stmt->close();
$con->close();
$total_page = ceil($BD_records / $records_by_page);
$prev = $page - 1;
$next = $page + 1;
if ($prev > 0) {
echo "<li><a data-target='".$pagination_page."?page=1'><i class='icon-angle-double-arrow'></i></a></li>";
echo "<li><a data-target='".$pagination_page."?page=$prev'><i class='icon-angle-left'></i></a></li>";
}
for ($i=1; $i<=$total_page; $i++) {
if ($page==$i) {
echo "<li><a class='page-link active' >". $page . "</a></li>";
} else {
echo "<li><a class='page-link' data-target='".$pagination_page."?page=$i'>$i</a></li>";
}
}
if ($page < $total_page ) {
echo "<li><a class='page-link' data-target='".$pagination_page."?page=$next'><i class='icon-angle-right'></i></a></li>";
echo "<li><a class='page-link' data-target='".$pagination_page."?page=$total_page'><i class='icon-angle-double-right'></i></a></li>";
}
$results_table = ob_get_clean();
else :
$stmt->close();
endif;
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
echo $results_table;
die;
}
?>
</ul>
</div>
我已经按照建议进行了，但是这里我有一个新问题，我现在无法理解如何链接单独的代码。
【问题讨论】：
-
你也可以添加你的html代码吗？
-
@Ajith 和这个问题的代码是一样的朋友stackoverflow.com/questions/52747673/… 唯一的改变就是把
.item样式的名字改成.data-table-pagination -
你能在每次点击分页链接后更新 里面的内容吗？我希望你明白我的意思@Ajith如果更新了，数据显示没有问题，唯一的问题是页眉和页脚插入了@Ajith 点击前：i.imgur.com/DrfCfkI.png 错误：i.imgur.com/56lMuv1.png