с разбивкой по страницам с живым поиском

Question

До сих пор я создал отчет с пейджингом. пример кода index.php:

<div class='web'>  
    <h1>Data Order Notaris</h1> 
     <div id="page_data"></div> 
      <span class="flash"></span> 
     </div> 

и использование сценария:

$(document).ready(function(){ 
        change_page('0'); 
       }); 
        function change_page(page_id){ 
         $(".flash").show(); 
         $(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />'); 
         var dataString = 'page_id='+ page_id; 
          $.ajax({ 
           type: "POST", 
           url: "paging.php", 
           data: dataString, 
           cache: false, 
            success: function(result){ 
             $(".flash").hide(); 
             $("#page_data").html(result); 
            } 
          }); 
        } 

мой файл для показа пейджинга является paging.php моя проблема при использовании живого поиска. Я пытаюсь добавить тип входа в index.php

добавить входной скрипт:

<input type='text' name='search' placeholder='search' /> 

я думаю, что он не нуждается в форму и кнопку отправки. как отправить значение из имени ввода = 'поиск' в paging.php для отчета данных фильтра?

нужна дополнительная функция или с помощью функции change_page? я все еще путаюсь с логикой. спасибо за помощь

Answer 1

Вы должны дать вход таким образом:

<input type='text' Id="search_box" name='search' placeholder='search' /> 

Затем с помощью JS вы можете получить значение этого поля

Так что ваш код JS будет как:

$(document).ready(function(){ 
        change_page('0'); 
       }); 
        function change_page(page_id){ 
         //To get the field value 
         var search_val = $("#search_box").val(); 
         $(".flash").show(); 
         $(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />'); 
         var dataString = 'page_id='+ page_id+'&search='+search_val; 
          $.ajax({ 
           type: "POST", 
           url: "paging.php", 
           data: dataString, 
           cache: false, 
            success: function(result){ 
             $(".flash").hide(); 
             $("#page_data").html(result); 
            } 
          }); 
        } 

Затем сделайте соответствующий запрос в своем paging.php :)