Краткое введение об использовании AJAX

Сначала, ajax sinifica Доsynchronous Javascript до, nd XМЛ. Короче говоря, AJAX служит для получения информации о сервере (операции server-side или данные базы данных), которые вы не загрузили с сайта. Например, блоки PHP (разделенные тегами <?php ?>) являются частью кода сайта, который выполняет сервер до доставки содержание клиент.

Объяснив это, поскольку информация, которую вы фильтруете в таблице, - это информация, которая уже загружена на страницу, это не операция AJAX, которую вы делаете, но вы запускаете сценарий на стороне клиента для отображения / скрытия записей таблицы на основе текста, введенного в input фильтра.

Основываясь на вашем вопросе, я понимаю, что происходит то, что ваша функция фильтрации работает только о записях, отображаемых на странице, и не показывает достаточно записей, чтобы заполнить таблицу в зависимости от размера подкачки. Например, если для разбиения на страницы установлено значение 50 записей, фильтр отображает только 39 записей на текущей странице.

Чтобы фильтр отображал 50 записей (в соответствии с приведенным выше примером), вы должны отправить асинхронный request на сервер. Скажем, ваш сайт должен иметь URL (например https://tusitio.com/filtrarUsuarios.php), которому выполняется асинхронный запрос, отправляя параметры, по которым вы собираетесь фильтровать, так что этот PHP возвращает:

1. ответ в формате JSON / XML или любом формате по вашему выбору со списком результатов, соответствующих странице; или
2. элемент таблицы, загруженный записями, соответствующими странице (<table></table>).

После получения ответа от сервера вы должны поместить элементы динамически в таблице. Если это вариант 1, Вы должны использовать функцию document.createElement() для создания элементов HTML (tr и td), чтобы поместить их в свою таблицу, а если это вариант 2, заменив HTML таблицы с помощью innerHTML. Мое предложение-использовать Вариант 1, поскольку он является стандартом для потребления API и веб-сервисов.

Поскольку форма, которую вы использовали в своем примере, делает POST на ту же страницу, где он загружает записи, я понимаю, что фильтр не работает асинхронно. Ru скажем, страница перезагружается с отфильтрованными записями, как только вы делаете submit формы. Вам нужно будет изменить свою функцию myFunction(), чтобы она выполняла вызов AJAX, используя реализацию, аналогичную следующей:

// Instancia de Request para llamar la URL
var request = new XMLHttpRequest();

// Capturar el evento de cambio de estado del request
request.onreadystatechange = function() {
  if(request.readyState === 4) {
    if(request.status === 200) { 
      // Ejecutar código de creación de registros
    } else {
      // Ejecutar código de captura de error en la
      // llamada de la URL
    } 
  }
}
 
// Enviar el request
request.open('POST', 'filtrarUsuarios.php'); // URL de ejemplo

Код, показанный выше, является самой основной реализацией вызова AJAX. Вызов является асинхронным, потому что код, который будет динамически создавать записи, выполняется до тех пор, пока не будет получен ответ на вызов URL.

Обновление вопроса

Поскольку вы собираетесь выбрать вариант poe r 2 из упомянутых выше (который заключается в получении HTML-кода из вызова AJAX для динамического ввода на нашей странице), файл ajax.php должен вернуть HTML, сформированный из таблицы, который мы возьмем из ответа на вызов (via javascript) и использовать для замены содержимого контейнера (новый элемент <div class="table-container" />). Таким образом, разделение содержимое, сгенерированное запросом к базе данных, получается примерно так:

        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;

Разрешение этой страницы должно быть встроено в главную страницу динамически, через функцию callback функции $.ajax().

<script type="text/javascript">
$(document).ready(

function() { 
    $('.pagination li a').on('click', function(){
        // Podés crear una pantalla modal para
        // mostrar mientras carga el archivo ajax.php

        var page = $(this).attr('data');       

        // Podés asignar los parametros como JSON para
        // enviarlos en la función $.ajax
        var data = {
            page: page, 
            amount_show: $('#amount_show').val() // Obtener el valor del elemento select
        };

        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: data,
            success: function(data) {

                // Reemplazar el contenido del div que creamos
                // para ubicar la tabla
                $('.table-container').html(data);

            }
        });
        return false;
    });              
});    
</script>

Функция jQuery html() заменяет текущее содержимое элемента $('.table-container'), которое мы создадим для размещения нашей таблицы.

Родительская страница должна выглядеть примерно так:

<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>
        <div class="table-container">
        </div>
    </div>
</div>

Код, показанный выше, вероятно, нуждается в немного большем количестве я работаю с вашей стороны, но я надеюсь, что он четко передал, что вы должны делать.

Я буду интернирован, чтобы быть как можно более ясным:

1-Вы должны понимать, что PHP работает на стороне сервера и возвращает HTML, который интерпретирует браузер .

2 - Тема ajax / jquery работает на стороне клин (browser).

Имея это в виду, рассмотрите следующее:

• Разбиение на страницы href и onChange select должны ссылаться на функцию Javascript, интерпретируемую браузером.

• В функция в браузере является тот, который вы должны получить данные для отображения. который может быть PHP, работающий на server.$. ajax

• Данные, возвращаемые PHP, могут быть реализованы в вашем HTML, как показывает код, который Вы нам показываете:

 $.ajax({
            type: "GET",
            url: "ajax.php",
            data: dataString,
            success: function(data) {
                $('.items').fadeIn(2000).html(data);
                $('.pagination li').removeClass('active');
                $('.pagination li a[data="'+page+'"]').parent().addClass('active');

            }
        });

Надеюсь, что это полезно для вас.

В файле, где у вас есть форма добавить и определить следующее: в form определить id= "form-pagination"и onsubmit=" return false; " чтобы страница не перезагружалась, кроме того, добавьте два div, где была вставлена таблица результатов, и еще один div, где была добавлена разбиение на страницы .

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

В файле ajax.php вы можете вернуть две части содержимого таблицы и разбиения на страницы, в элементах внутри кнопок разбиения на страницы он определит атрибут page="". и будет возвращена разбиение на страницы и таблица результатов

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

В вашем script.js вы добавите функции, в событии, связанном с пейджингом, обновляется значение поля page, которое мы добавляем в форму, чтобы при вызове функции отправить форму было взято только содержимое формы и отправлено.

   //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"]);
            }
    });  

}

Я надеюсь, что это будет очень полезно для вас.