我正在创建一个页面，我可以通过搜索和分页显示数据，我找到了这个2教程。
首先是搜索：http://www.webslesson.info/2016/03/ajax-live-data-search-using-jquery-php-mysql.html
其次是分页：http://www.webslesson.info/2016/08/make-pagination-using-ajax-with-jquery-php-and-mysql.html`
我尝试将它们合并数小时但我不能。搜索工作正常，但当我点击分页按钮（1,2,3,4）时，它会重置为相同的数据。请你好，先生，请你解释一下，或者告诉我怎么做。
admin.php的
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Ajax PHP MySQL Date Range Search using jQuery DatePicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="result"></div>
<br/><br />
<div class="container" style="width:900px;">
<h2 align="center">Ajax PHP MySQL Date Range Search using jQuery DatePicker</h2>
<h3 align="center">Order Data</h3><br />
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
<br/>
<div class="col-md-3">
<input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />
</div>
<div class="col-md-3">
<input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />
</div>
<div class="col-md-5">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
</div>
<div style="clear:both"></div>
<br />
<div id="order_table">
<table class="table table-bordered">
<tr>
<th width="5%">ID</th>
<th width="30%">Customer Name</th>
<th width="43%">Item</th>
<th width="10%">Value</th>
<th width="12%">Order Date</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["order_id"]; ?></td>
<td><?php echo $row["order_customer_name"]; ?></td>
<td><?php echo $row["order_item"]; ?></td>
<td><?php echo $row["order_value"]; ?></td>
<td><?php echo $row["order_date"]; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div id="pagination_data"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(page)
{
$.ajax({
url:"search.php",
method:"POST",
data:{page:page},
success:function(data)
{
$('#order_table').html(data);
}
})
}
$(document).on('click', '.pagination_link', function(){
var page = $(this).attr("id");
load_data(page);
});
});
</script>
<script>
$(document).ready(function()
{
load_data();
function load_data(query)
{
$.ajax
({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#order_table').html(data);
}
});
}
$('#search_text').keyup(function()
{
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
<script>
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#from_date").datepicker();
$("#to_date").datepicker();
});
$('#filter').click(function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
if(from_date != '' && to_date != '')
{
$.ajax({
url:"filter.php",
method:"POST",
data:{from_date:from_date, to_date:to_date},
success:function(data)
{
$('#order_table').html(data);
}
});
}
else
{
alert("Please Select Date");
}
});
});
</script>
的search.php
<?php
$record_per_page = 5;
$page = '';
$output = '';
if(isset($_POST["page"]))
{
$page = $_POST["page"];
}
else
{
$page = 1;
}
$start_from = ($page - 1)*$record_per_page;
$connect = mysqli_connect("localhost", "root", "", "srdatabase");
$output = '';
$search = mysqli_real_escape_string($connect, $_POST["query"]);
$query = "
SELECT * FROM tbl_order
WHERE order_id LIKE '%".$search."%'
OR order_customer_name LIKE '%".$search."%'
OR order_item LIKE '%".$search."%'
OR order_value LIKE '%".$search."%'
OR order_date LIKE '%".$search."%'
LIMIT $start_from, $record_per_page";
$result = mysqli_query($connect, $query);
$output .= '
<table class="table table-bordered">
<tr>
<th width="5%">ID</th>
<th width="30%">Customer Name</th>
<th width="43%">Item</th>
<th width="10%">Value</th>
<th width="12%">Order Date</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'. $row["order_id"] .'</td>
<td>'. $row["order_customer_name"] .'</td>
<td>'. $row["order_item"] .'</td>
<td>'. $row["order_value"] .'</td>
<td>'. $row["order_date"] .'</td>
</tr>
';
}
$output .= '</table><br /><div align="center">';
$page_query = "SELECT * FROM tbl_order ORDER BY order_id DESC";
$page_result = mysqli_query($connect, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);
for($i=1; $i<=$total_pages; $i++)
{
$output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";
}
$output .= '</div><br /><br />';
echo $output;
?>
答案 0 :(得分：0)
经过这么多个小时..所以noob ..我想我明白了
<script>
$(document).ready(function(){
load_data();
function load_data(page)
{
var searchtext = $('#search_text').val();
$.ajax({
url:"search.php",
method:"POST",
data:{page:page, search:searchtext},
success:function(data){
$('#order_table').html(data);
}
})
}
$(document).on('click', '.pagination_link', function(){
var page = $(this).attr("id");
load_data(page);
});
});
</script>
<script>
$(document).ready(function(){
load_data();
function load_data(page)
{
var searchtext = $('#search_text').val();
$.ajax({
url:"search.php",
method:"POST",
data:{page:page, search:searchtext},
success:function(data){
$('#order_table').html(data);
}
})
}
$(document).on('click', '.pagination_link', function(){
var page = $(this).attr("id");
load_data(page);
});
});
</script>
<script>
$(document).ready(function()
{
$('#search_text').keyup(function()
{
var txt = $('#search_text').val();
if(txt != '')
{
$.ajax({
url:"search.php",
method:"POST",
data:{search:txt},
success:function(data)
{
$('#order_table').html(data);
}
});
}
});
});
</script>