我有一个网站，其中按型号，制造商，价格对ajax进行了一些过滤，我想为此添加分页功能，但是为了保持这种方式而不重新加载页面，我尝试了以下代码：
$(document).ready(function(){
$('.btn-filters').on('click', function(){
$('.mobile-filter').addClass('openfilter');
})
$('.closefilter').on('click', function(){
$('.mobile-filter').removeClass('openfilter');
})
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var yearmin = $('#hidden_minimum_price1').val();
var yearmax = $('#hidden_maximum_price1').val();
var kmin = $('#hidden_minimum_price2').val();
var kmax = $('#hidden_maximum_price2').val();
var sortby = $('#sorting').val();
var brand = get_filter('brand');
var ram = get_filter('ram');
var storage = get_filter('storage');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action,
minimum_price:minimum_price,
maximum_price:maximum_price,
yearmin:yearmin,
yearmax:yearmax,
kmin:kmin,
kmax:kmax,
sortby:sortby, brand:brand,
ram:ram, storage:storage
},
success:function(data){
$('.filter_data').html(data);
}
});
}
$('#sorting').on('change', function(){
filter_data();
})
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
$('#price_range').slider({
range:true,
min:1000,
max:10000,
values:[1000, 10000],
step:500,
stop:function(event, ui)
{
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});
$('#price_range1').slider({
range:true,
min:2000,
max:2020,
values:[2000, 2020],
step:1,
stop:function(event, ui)
{
$('#price_show1').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price1').val(ui.values[0]);
$('#hidden_maximum_price1').val(ui.values[1]);
filter_data();
}
});
$('#price_range2').slider({
range:true,
min:1000,
max:50000,
values:[1000, 50000],
step:500,
stop:function(event, ui)
{
$('#price_show2').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price2').val(ui.values[0]);
$('#hidden_maximum_price2').val(ui.values[1]);
filter_data();
}
});
});<?php
session_start();
//fetch_data.php
$connect = new PDO("mysql:host=localhost;dbname=xxxxx", "xxxxx", "xxxxx");
if(!isset($_SESSION['grid'])){
$_SESSION['grid'] = "grid";
}
if(isset($_POST['grid'])){
$_SESSION['grid'] = "grid";
}
if(isset($_POST['list'])){
$_SESSION['grid'] = "list";
}
function url_slug($str, $replace=array(), $delimiter='-', $maxLength=200) {
if( !empty($replace) ) {
$str = str_replace((array)$replace, ' ', $str);
}
$clean = iconv('UTF-8', 'ASCII//TRANSLIT', $str);
$clean = preg_replace("%[^-/+|\w ]%", '', $clean);
$clean = strtolower(trim(substr($clean, 0, $maxLength), '-'));
$clean = preg_replace("/[\/_|+ -]+/", $delimiter, $clean);
return $clean;
}
if(isset($_POST["action"]))
{
$query = "
SELECT * FROM stock WHERE vizibil = '1'
";
if(isset($_POST["minimum_price"], $_POST["maximum_price"]) && !empty($_POST["minimum_price"]) && !empty($_POST["maximum_price"]))
{
$query .= "
AND pret_vanzare BETWEEN '".$_POST["minimum_price"]."' AND '".$_POST["maximum_price"]."'
";
}
if(isset($_POST["yearmin"], $_POST["yearmax"]) && !empty($_POST["yearmin"]) && !empty($_POST["yearmax"])){
$query .= "
AND an_fab BETWEEN '".$_POST["yearmin"]."' AND '".$_POST["yearmax"]."'";
}
if(isset($_POST["kmin"], $_POST["kmax"]) && !empty($_POST["kmin"]) && !empty($_POST["kmax"]))
{
$query .= "
AND km_act BETWEEN '".$_POST["kmin"]."' AND '".$_POST["kmax"]."'
";
}
if(isset($_POST["brand"]))
{
$brand_filter = implode("','", $_POST["brand"]);
$query .= "
AND model IN('".$brand_filter."')
";
}
if(isset($_POST["ram"]))
{
$ram_filter = implode("','", $_POST["ram"]);
$query .= "
AND make IN('".$ram_filter."')
";
}
if(isset($_POST["storage"]))
{
$storage_filter = implode("','", $_POST["storage"]);
$query .= "
AND trans IN('".$storage_filter."')
";
}
if(isset($_POST["sortby"]) && !empty($_POST["sortby"]))
{
$query .= "
ORDER BY pozitie ".$_POST["sortby"]." ";
}
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '';
if($total_row > 0)
{
foreach($result as $row)
{
$st = $row['id'];
$sqlp = "SELECT * FROM poze_stock WHERE id_stock='$st' ORDER BY pozitie_more DESC";
$statement = $connect->prepare($sqlp);
$statement->execute();
$results = $statement->fetch();
//make name
$mkname = $row['make'];
$sqlmake = "SELECT * FROM car_makes WHERE make_id='$mkname'";
$statement = $connect->prepare($sqlmake);
$statement->execute();
$resultmake = $statement->fetch();
//echo $resultmake['make'];
//model name
$modelname= $row['model'];
$sqlmake = "SELECT * FROM car_models WHERE model_id='$modelname'";
$statement = $connect->prepare($sqlmake);
$statement->execute();
$resultmodel = $statement->fetch();
//echo $resultmodel['model'];
if($_SESSION['grid'] == "grid"){
$output .= '
<li class="col-md-4">
<figure><span>featured</span><a href="'.url_slug($row['denumire']).'-'.$row['id'].'.html">';
if($results['poza'] ==""){
$output .='<img src="image_size.php?src=/images/placeholder.jpg&w=262&h=163" alt=""></a>';
}else{
$output .='<img src="image_size.php?src=/more_poze/'.$results['poza'].'&w=262&h=163" alt=""></a>';
}
$output .='</figure>
<div class="scrapcar-listing-grid-text">
<small>'.$row['denumire'].'</small>
<h2><a href="'.url_slug($row['denumire']).'-'.$row['id'].'.html">'.$row['denumire'].'</a></h2>
<p><i class="automechanic-icon automechanic-placeholder"></i>Romania</p>';
if($row['tva'] == 0 ){
}
$output .='<span> '.$row['pret_vanzare'].' € <del> '.$row['pret_ras'].' €</del></span>
</div>
</li>';
}elseif($_SESSION['grid'] == "list"){
$output .= '
<li class="col-md-12">
<div class="scrapcar-listing scrapcar-listing-medium">
<figure><span>featured</span>
<a href="'.url_slug($row['denumire']).'-'.$row['id'].'.html">';
if($results['poza'] ==""){
$output .='<img src="image_size.php?src=/images/placeholder.jpg&w=222&h=177" alt=""></a>';
}else{
$output .='<img src="image_size.php?src=/more_poze/'.$results['poza'].'&w=222&h=177" alt="">';
}
$output .='</a>
</figure>
<div class="scrapcar-listing-medium-text">
<h2><a href="'.url_slug($row['denumire']).'-'.$row['id'].'.html">'.$row['denumire'].'</a></h2>
<p>'.$row['make'].' - '.$row['model'].' </p>
<ul class="scrapcar-listing-medium-option">
<li>'.$row['an_fab'].' </li>
<li>'.$row['km_act'].' km</li>
<li>'.$row['emisie'].' CC</li>
</ul>
<strong> '.$row['pret_vanzare'].' € <del>'.$row['pret_ras'].' €</del></strong>
</div>
</div>
</li>';
}else{
$output .= '
<li class="col-md-4">
<figure><span>featured</span><a href="'.url_slug($row['denumire']).'-'.$row['id'].'.html"><img src="image_size.php?src=/more_poze/'.$results['poza'].'&w=262&h=163" alt=""></a></figure>
<div class="scrapcar-listing-grid-text">
<small>'.$row['denumire'].'</small>
<h2><a href="'.url_slug($row['denumire']).'-'.$row['id'].'.html">'.$row['denumire'].'</a></h2>
<p><i class="automechanic-icon automechanic-placeholder"></i>Romania</p>
<span> '.$row['pret_vanzare'].' Euro <del> '.$row['pret_ras'].' Euro</del></span>
</div>
</li>';
}
}
}
else
{
$output = '<h3>No Data Found</h3>';
}
echo $output;
}
?>
<!--// Sidebar \\-->
<aside class="col-md-3 mobile-filter">
<span class="closefilter hidden-lg"><i class="fa fa-times" aria-hidden="true"></i></span>
<div class="scrapcar-sidebar-colr">
<div class="list-group">
<h3><?php echo $text['135'];?></h3>
<input type="hidden" id="hidden_minimum_price1" value="0" />
<input type="hidden" id="hidden_maximum_price1" value="2020" />
<p id="price_show1">2000 - 2020</p>
<div id="price_range1"></div>
</div>
<div class="list-group">
<h3><?php echo $text['136'];?></h3>
<input type="hidden" id="hidden_minimum_price2" value="0" />
<input type="hidden" id="hidden_maximum_price2" value="50000" />
<p id="price_show2">0 - 50000</p>
<div id="price_range2"></div>
</div>
<div class="list-group">
<h3><?php echo $text['137'];?></h3>
<input type="hidden" id="hidden_minimum_price" value="0" />
<input type="hidden" id="hidden_maximum_price" value="10000" />
<p id="price_show">5000 - 10000</p>
<div id="price_range"></div>
</div>
<!--// Widget location \\-->
<!--// Widget choose by fuels \\-->
<div class="widget widget_choose_type choose_trans">
<h2 class="widget-heading"><?php echo $text['138'];?></h2>
<ul>
<?php
$query = "SELECT DISTINCT(trans) FROM stock WHERE vizibil = '1' ORDER BY pozitie DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row){ ?>
<li>
<div class="widget-check">
<input type="checkbox" class="common_selector storage" id="<?php echo $row['trans']; ?>" value="<?php echo $row['trans']; ?>" >
<label for="<?php echo $row['trans']; ?>"><?php echo $row['trans']; ?></label>
</div>
</li>
<?php } ?>
</ul>
</div>
<!--// Widget choose by fuels \\-->
<!--// Widget choose by Make: \\-->
<div class="widget widget_choose_type choose_make">
<h2 class="widget-heading"><?php echo $text['139'];?></h2>
<ul>
<?php
$query = "SELECT DISTINCT(make) FROM stock WHERE vizibil = '1' ORDER BY pozitie DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row){?>
<?php
$idm = $row['make'];
$querym = "SELECT * FROM car_makes WHERE make='$idm'";
$statement = $connect->prepare($querym);
$statement->execute();
$resultm = $statement->fetch();
?>
<li>
<div class="widget-check">
<input type="checkbox" class="common_selector ram" id="<?php echo $row['make']; ?>" value="<?php echo $row['make']; ?>" >
<label for="<?php echo $row['make']; ?>"><?php echo $resultm['make']; ?></label>
</div>
</li>
<?php } ?>
</ul>
</div>
<!--// Widget choose by Make: \\-->
<!--// Widget choose by Model \\-->
<div class="widget widget_choose_type choose_model">
<h2 class="widget-heading"><?php echo $text['140'];?></h2>
<ul>
<?php
$query = "SELECT DISTINCT(model) FROM stock WHERE vizibil = '1' ORDER BY pozitie DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row){?>
<?php
$idmm = $row['model'];
$queryme = "SELECT * FROM car_models WHERE model_id='$idmm'";
$statement = $connect->prepare($queryme);
$statement->execute();
$resultmm = $statement->fetch();
?>
<li>
<div class="widget-check">
<input type="checkbox" class="common_selector brand" id="<?php echo $row['model']; ?>" value="<?php echo $row['model']; ?>" >
<label for="<?php echo $row['model']; ?>"><?php echo $row['model']; ?></label>
</div>
</li>
<?php } ?>
</ul>
</div>
<!--// Widget choose by Model \\-->
</div>
</aside>
<!--// Sidebar \\-->
<ul class="row filter_data" id="target-content">
</ul>
我只想具有相同的功能，但要具有分页功能，如何添加而不弄乱过滤器？