通过分页显示PHP Ajax中的实时搜索数据:单击每页后不显示数据

时间:2019-02-25 13:56:54

标签: javascript php jquery html ajax

我正在尝试实现实时搜索,其中它以分页的形式显示记录数的数据。唯一的问题是,当我单击页码时,实时搜索框将变为空白,并且所有显示的数据都将消失。

这是我的选择和实时搜索代码:

<?php
   include('view_header.php');
?>
<div class="panel-body">
    <form method="POST" class="navbar-form navbar-left" role="search">
          <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">SELECT:</span>
            <select id="select_by" 
                    class="form-control"
                    value=""
                    style="width:230px"
                    onchange="selectionMade(this.value)">
              <option value="select_service_order_number">
                SERVICE ORDER NUMBER
              </option>
              <option value="select_client_name">CLIENT NAME</option>  
              <option value="select_company_name">COMPANY NAME</option>  
              <option value="select_service_avail">SERVICE AVAIL</option>  
              <option value="select_service_category">
                SERVICE CATEGORY
              </option>
              <option value="select_service_order_status">
                ORDER STATUS
              </option>
            </select>
          </div>
          <input id="search_by_value" 
                 class="form-control"
                 placeholder="Type the information and press ENTER . ." 
                 style="width:350px"
                 onkeypress="return chk(event)"
                 value="<?php if (isset($_POST['search_by_value'])){ echo 
                         htmlentities($_POST['search_by_value']);} ?>"
                 required>
    </form>
</div>
<div id="query_result" style="margin-left:10px;margin-right:10px"></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/myjs-order.js"></script>

这是我在myjs-order.js文件中的AJAX代码:

function chk(e) 
{
  if (e.keyCode == 13)
  {
   var xsearch_by_value = document.getElementById("search_by_value").value;
   var xselection_value = document.getElementById("select_by").value;
   $.ajax({
       type: "post",
       url: "view_order_list.php",
       data: {strSelection:xselection_value,              
             strInfo:xsearch_by_value},
       cache:false,
       success: function(html)
              {
                $('#query_result').html(html);
              }
        });
    return false;
  }
}

这是我的view_order_list.php代码

<?php
 include_once('database.php');
 $myStrInfo=$_POST['strInfo'];
 $myStrSelection=$_POST['strSelection'];
 $db = DB();
 $dbNoData=DB_NoData();
 $no_of_rows=0;
 $irow_count=0;
 $results_per_page = 10;
 if ($myStrSelection == 'select_service_order_number')
 {
   if(is_numeric($myStrInfo))
   {
    $query1 = $db->prepare('SELECT * from vw_webserver_service_order_details 
    where Service_Order_Code like ? and Service_Order_Code>0 group by 
    Service_Order_Code');
    $query1->execute([$myStrInfo]);
    $no_of_rows = $query1->rowCount();  
    $total_rows = $no_of_rows;
    $total_pages = ceil($total_rows/$results_per_page);
    for ($x = 1; $x <= $total_pages; $x++)
      {
       echo "<a href='?page=$x'>$x</a>";
      }
   }
 }
?>   
<table>
 <tr>
   <th>No.</th>
 </tr>
<?php        
  if ($no_of_rows >= 1) 
  {
    while ($myRow = $query1->fetch()):
    ++$irow_count;
    echo '<tr>
           <td>'. echo $irow_count .'</td>
          </tr>';
    endwhile;
  }
?>
</table>

使用此代码,如何在单击分页中的页码时不刷新页面就可以显示数据。我已经尝试了一周,但无法获得正确的输出。

请参阅附件图片。 Result After I click page number 13

非常感谢您的帮助。

0 个答案:

没有答案