我有一个可以正常工作的分页,即使是在同一页面上分页更多行的过滤器,也就是说通过过滤器我可以显示 10 或 50 行或更多行。
代码的一个小缺陷是页面被重新加载,改变了显示的行数,同样的事情发生在分页按钮中。
这是我的代码,一切都在同一个页面index2.php
<div id="wrapper">
<div class="container">
<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" onkeyup="myFunction()" placeholder="What are you looking for?">
</div>
<div class="actions btn-group">
<?php
$select_quantity = '';
if (isset($_POST['amount_show'])) :
$select_quantity = $_POST['amount_show'];
endif;
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<select id="amount_show" name="amount_show" onchange="this.form.submit()">
<option value="10" <?php if ($select_quantity==10) echo "selected"; ?>>10</option>
<option value="25" <?php if ($select_quantity==25) echo "selected"; ?>>25</option>
<option value="50" <?php if ($select_quantity==50) echo "selected"; ?>>50</option>
<option value="100" <?php if ($select_quantity==100) echo "selected"; ?>>100</option>
</select>
</form>
</div>
</div>
</div>
</div>
<?php
if (isset($_GET['page'])) :
$page = $_GET['page'] ?: '';
else :
$page = 1;
endif;
if (isset($_POST['amount_show'])) :
$records_by_page = $_POST['amount_show'];
else :
$records_by_page = 10;
endif;
$localization_sql = ($page-1) * $records_by_page;
$sql = "SELECT id,name,email
FROM users
ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
$stmt = $con->prepare($sql);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows>0) :
echo '<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>';
$stmt->bind_result($id,$name,$email);
while ($stmt->fetch()) :
echo '<tr>
<td>'.$id.'</td>
<td>'.$name.'</td>
<td>'.$email.'</td>
<td>Edit</td>
</tr>';
endwhile;
echo '</tbody>';
echo '</table>';
$stmt->close();
/**
*
* Botones ATRAS / SIGUIENTES
*
*/
$sql = "SELECT * FROM users";
$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;
echo '<div class=pagination>
<ul class="pagination">';
if ($prev > 0) :
echo "<li><a href='index2.php?page=1'><i class='icon-angle-double-arrow'></i></a></li>";
echo "<li><a href='index2.php?page=$prev'><i class='icon-angle-left'></i></a></li>";
endif;
for ($i=1; $i<=$total_page; $i++) :
if ($page==$i) :
echo "<li><a class=active>". $page . "</a></li>";
else :
echo "<li><a href='index2.php?page=$i'>$i</a></li>";
endif;
endfor;
if ($page < $total_page ) :
echo "<li><a href='index2.php?page=$next'><i class='icon-angle-right'></i></a></li>";
echo "<li><a href='index2.php?page=$total_page'><i class='icon-angle-double-right'></i></a></li>";
endif;
echo '</ul></div>';
else :
$stmt->close();
endif;
?>
</div>
</div>
由于推荐给我的建议,我做了以下配置JSON
。
ajax.php
if (isset($_GET['page'])) :
$page = $_GET['page'] ?: '';
else :
$page = 1;
endif;
if (isset($_POST['amount_show'])) :
$records_by_page = $_POST['amount_show'];
else :
$records_by_page = 10;
endif;
$sql = "SELECT id,name,email
FROM users
ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
$result = $con->query($sql);
$data_rows = array();
$result = $con->query($sql);
while($row = mysqli_fetch_assoc($result)) {
$data_rows[] = $row;
}
echo json_encode($data_rows, JSON_PRETTY_PRINT);
我找到了一个我调用的ajax代码script.js
,并通过ajax
$(document).ready(function() {
$.ajax({
type: "GET",
url: "ajax.php",
dataType: "json",
success: function(data) {
tableRows = '';
for (let i = 0; i < data.length; i++) {
tableRows += `
<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
<td>Edit<td>
</tr>`;
}
$("#tbody-insert").html(tableRows);
}
});
});
我显示数据没有问题。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbody-insert">
</tbody>
</table>
现在我的问题是,如何显示分页按钮和过滤器显示更多结果行。
我如何必须将此信息发送到 ajax 并显示发送的信息?
你能给我解释一下吗
Tenemos en los navegadores diferentes acciones predeterminadas es importante tener en cuenta, en los artículos en ingles podemos encontrar una gran información y con ejecuciones reales para entender su funcionamiento también es importante ir conociendo a más a fondo el lenguaje.
Ahora para comenzar efectuar cambios se debe detectar primeramente las posibles ejecuciones que harán recargar la página, en este caso:
select option -> #amount_show
que envía un nuevo valor por métodoPOST
al paginador.<a>
que le dice alscript php
qué registros debe recuperar a través del métodoGET
solicitud.Entonces como no existe inconvenientes en el
Script PHP
, todo debes ir manejando desde el códigoajax
.Por lo tanto, el código
ajax
, quedaría de tal forma:Recomendaciones
Referencias
.load
(artículo en inglés).AJAX的使用简介
首先,ajax表示X ML中的同步Javascript 。简而言之,AJAX 用于从服务器获取您尚未随站点上传的信息(服务器端操作或数据库中的数据)。例如,PHP 块(由标签分隔)是服务器在将内容交付给客户端之前执行的站点代码的一部分。
<?php ?>
解释了这一点,由于您在表格中过滤的信息是页面中已经加载的信息,因此您正在执行的不是 AJAX 操作,而是您正在运行客户端脚本来显示/隐藏记录基于在过滤器输入中输入的文本的表格。
从您的问题中,我了解到发生的情况是您的过滤器功能仅对页面上显示的记录进行操作,并且它没有显示足够的记录来根据分页的大小填充表格。例如,如果分页设置为显示 50 条记录,则过滤器仅显示当前页面中的 39 条记录。
为了让过滤器返回 50 条记录(基于上面的示例),您必须向服务器发送异步请求。比方说,您的站点必须有一个 URL(例如https://yoursite.com/filtrarUsuarios.php),向该 URL 进行异步查询,发送您要过滤的参数,以便 PHP 返回:
<table></table>
。从服务器获得响应后,您必须动态地将元素放入表中。如果是选项 1,您应该使用该函数
document.createElement()
创建 HTML 元素 (tr
和td
) 以将它们放置在您的表格中,如果是选项 2,则使用innerHTML
. 我的建议是使用选项 1,因为它是使用 API 和 Web 服务的标准。由于您在示例中使用的方式将 POST 发送到加载记录的同一页面,因此我知道过滤器不能异步工作。也就是说,一旦您提交表单,页面就会重新加载过滤后的记录。您需要修改您的函数
myFunction()
以使用类似于以下的实现进行 AJAX 调用:上面显示的代码是 AJAX 调用的最基本实现。该调用是异步的,因为将执行动态创建记录的代码,直到收到来自 URL 调用的响应。
问题更新
鉴于您将选择上述选项 2(包括从 AJAX 调用中获取 HTML 代码以将其动态插入到我们的页面中),该文件
ajax.php
必须返回从表中形成的 HTML,我们将从调用的响应(通过javascript),我们将使用它来替换容器的内容(一个新元素<div class="table-container" />
)。因此,查询生成的内容到数据库的分离是这样的:callback
这个页面的结果必须通过函数的函数动态嵌入到主页面中$.ajax()
。jQuery 函数替换了我们将创建以放置表格
html()
的元素的当前内容。$('.table-container')
父页面应如下所示:
上面显示的代码可能需要您多做一些工作,但我希望我已经清楚地传达了您需要做什么。
我会尽量说清楚:
1 - 您必须了解 PHP 在服务器端执行并返回浏览器解释的 HTML。
2 - ajax/jquery 主题在客户端(浏览器)执行。
考虑到这一点,请考虑以下事项:
Los href de paginación , y el onchange del select deben hacer referencia a una funcion Javascript interpretada por el Browser.
La función en el browser es el que tiene que ir a buscar los datos a mostrar. el cual puede ser un PHP que se ejecuta en el server. $.ajax
Los datos que devuelva el PHP se pueden implementar en tu HTML tal como te muestra el código que nos muestras:
Espero que te sea de utilidad.
En el archivo donde tiene el formulario agregar y definir lo siguiente: en el form definir un id="form-pagination" y el onsubmit="return false;" para que no se recargue la pagina, ademas agregar dos div donde se insertara la tabla de resultados y otro div donde se agregara la paginación .
En el archivo ajax.php puedes devolver dos partes el contenido de la tabla y la paginación, en los elementos que se encuentran dentro de los botones de la paginación se definirá el atributo page="". y se regresara la paginación y la tabla de resultados
en tu script.js agregaras las funciones, en el evento que involucra a la paginacion se actualiza el valor del campo page que agregamos en el formulario para que al momento de llamar la funcion enviarFormulario solo se tome el contenido del formulario y se envié.
Espero que te sea de gran ayuda.
Te voy a dejar un ejemplo que he probado en Localhost según tu código, estuve haciendo pruebas ya que estoy aprendiendo jQuery / JavaScript y que mejor aprendizaje que pelearse con el código :)
El sistema de filtración dispone de:
He cambiado el parámetro
data: $.param(query_params)
pordata: jQuery.param(query_params),
jQuery.param ()
toma una matriz de pares clave-valor y la convierte en una cadena que puede usar como cadena de consulta en solicitudes HTML.Tambien he modernizado el código AJAX.
una de ellas
$.ajax({
porvar request = $.ajax({
Base de Datos
Posible ejemplo:
AJAX
Layout HTML
La pregunta es un tanto antigua y conviene actualizar, no solo para optimizar, también para facilitar el mantenimiento a futuro. Mis recomendaciones:
data-id="id-de-cliente"
En PHP vas a recibir en
$_GET
lo siguiente: pagina, elementos, tipo y nombre. Y debes validar cada uno para saber si se deben incluir en la consulta, de preferencia, con asignación ternaria; por ejemplo:Ya teniendo todas las variables, debes analizar cada una para saber si es necesario agregarla a filtros y vas a necesitar ejecutar dos consultas, una para contar las filas y otra para obtenerlas. Revisa los comentarios en el código para saber qué hace cada cosa.
En este ejemplo solo se agregaron dos opciones para filtrar, pero fácilmente puedes agregar más:
loadAjax()
drawTable()
以显示该列->bind_result()
并在数组中添加数据