Skip to main content
se añadieron 6 caracteres en el cuerpo
Origen Enlace
jcHernande2
  • 3.4k
  • 1
  • 8
  • 15
   //se ejecuta el submit del formulario form-pagination al inicio
$(document).ready(function() {
    enviarFormulario();
});
//evento para que se ejecute al dar click sobre los botones de pagination
$(document).on('click', '.pagination li a', function(e){
    var page=parseInt($(this).data("page"));
    if(!isNaN(page)){
        $("#form-pagination #page").val(page);
        enviarFormulario();
    }
    e.preventDefault();
});
//evento para que se ejecute al cambiar el valor de amount_show
$(document).on('change', '#amount_show', function(event){
    $("#form-pagination #page").val(1);
    enviarFormulario();
});
//funcion para que se ejecute al realizar el submit en el formulario form-pagination
function enviarFormulario(){
    $.ajax({
            type: "GET",
            data: $("#form-pagination").serialize(),
            url: "ajax.php",
            dataType: "json",
            success: function(data) {
                $("#contenido_table").html(data.html_tabledata["html_table"]);
                $("#pagination").html(data.html_paginationdata["html_pagination"]);
            }
    });  
    
}
   //se ejecuta el submit del formulario form-pagination al inicio
$(document).ready(function() {
    enviarFormulario();
});
//evento para que se ejecute al dar click sobre los botones de pagination
$(document).on('click', '.pagination li a', function(e){
    var page=parseInt($(this).data("page"));
    if(!isNaN(page)){
        $("#form-pagination #page").val(page);
        enviarFormulario();
    }
    e.preventDefault();
});
//evento para que se ejecute al cambiar el valor de amount_show
$(document).on('change', '#amount_show', function(event){
    $("#form-pagination #page").val(1);
    enviarFormulario();
});
//funcion para que se ejecute al realizar el submit en el formulario form-pagination
function enviarFormulario(){
    $.ajax({
            type: "GET",
            data: $("#form-pagination").serialize(),
            url: "ajax.php",
            dataType: "json",
            success: function(data) {
                $("#contenido_table").html(data.html_table);
                $("#pagination").html(data.html_pagination);
            }
    });  
    
}
   //se ejecuta el submit del formulario form-pagination al inicio
$(document).ready(function() {
    enviarFormulario();
});
//evento para que se ejecute al dar click sobre los botones de pagination
$(document).on('click', '.pagination li a', function(e){
    var page=parseInt($(this).data("page"));
    if(!isNaN(page)){
        $("#form-pagination #page").val(page);
        enviarFormulario();
    }
    e.preventDefault();
});
//evento para que se ejecute al cambiar el valor de amount_show
$(document).on('change', '#amount_show', function(event){
    $("#form-pagination #page").val(1);
    enviarFormulario();
});
//funcion para que se ejecute al realizar el submit en el formulario form-pagination
function enviarFormulario(){
    $.ajax({
            type: "GET",
            data: $("#form-pagination").serialize(),
            url: "ajax.php",
            dataType: "json",
            success: function(data) {
                $("#contenido_table").html(data["html_table"]);
                $("#pagination").html(data["html_pagination"]);
            }
    });  
    
}
se añadieron 261 caracteres en el cuerpo
Origen Enlace
jcHernande2
  • 3.4k
  • 1
  • 8
  • 15

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.

en tu script.js agregaras las funciones

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.

Origen Enlace
jcHernande2
  • 3.4k
  • 1
  • 8
  • 15

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 .

<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" id="form-pagination" onsubmit="return false;">
                            <input name="page" id="page" type="hidden" value=1>
                            <select id="amount_show" name="amount_show" >
                                <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>
        <div id="contenido_table"  class="col-sm-12">
        </div>
        <div id="pagination" class="col-sm-12">
        </div>
    </div>
</div>

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

    header('Content-Type: application/json');
    $html_table="";
    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) :
        $html_table.='<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()) :
        $html_table.='<tr>
            <td>'.$id.'</td>
            <td>'.$name.'</td>
            <td>'.$email.'</td>
            <td>Edit</td>
        </tr>';
    endwhile;
    $html_table.='</tbody>';
    $html_table.='</table>';
    $stmt->close();

/**
*
* Botones ATRAS / SIGUIENTES
*
*/
    $html_pagination="";
    $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;
    $html_pagination.='<div class=pagination>
    <ul class="pagination">';
    if ($prev > 0) :
        $html_pagination.="<li><a page='1'><i class='icon-angle-double-arrow'></i></a></li>";
        $html_pagination.="<li><a page='$prev'><i class='icon-angle-left'></i></a></li>";
    endif;

    for ($i=1; $i<=$total_page; $i++) :
        if ($page==$i) :
            $html_pagination.= "<li><a class=active>". $page . "</a></li>";
        else :
            $html_pagination.= "<li ><a page='$i'>$i</a></li>";
        endif;
    endfor;


    if ($page < $total_page ) :
        $html_pagination.= "<li ><a page='$next' href=''><i class='icon-angle-right'></i></a></li>";
        $html_pagination.="<li ><a page='$total_page' href=''><i class='icon-angle-double-right'></i></a></li>";
    endif;

    $html_pagination.='</ul></div>';

    else :
        $stmt->close();
    endif;
$data=array();
$data["html_table"]=$html_table;
$data["html_pagination"]=$html_pagination;
echo json_encode($data, JSON_PRETTY_PRINT);

en tu script.js agregaras las funciones

   //se ejecuta el submit del formulario form-pagination al inicio
$(document).ready(function() {
    enviarFormulario();
});
//evento para que se ejecute al dar click sobre los botones de pagination
$(document).on('click', '.pagination li a', function(e){
    var page=parseInt($(this).data("page"));
    if(!isNaN(page)){
        $("#form-pagination #page").val(page);
        enviarFormulario();
    }
    e.preventDefault();
});
//evento para que se ejecute al cambiar el valor de amount_show
$(document).on('change', '#amount_show', function(event){
    $("#form-pagination #page").val(1);
    enviarFormulario();
});
//funcion para que se ejecute al realizar el submit en el formulario form-pagination
function enviarFormulario(){
    $.ajax({
            type: "GET",
            data: $("#form-pagination").serialize(),
            url: "ajax.php",
            dataType: "json",
            success: function(data) {
                $("#contenido_table").html(data.html_table);
                $("#pagination").html(data.html_pagination);
            }
    });  
    
}