Я недавно начал изучать ajax, чтобы использовать живой фильтр по флажку. Это работало хорошо, пока я не решил ограничить результаты, извлекаемые из базы данных, используя order by id asc limit 0,$rowperpage, где rowperpage = 3. Добавление этого в мой код полностью отключило фильтр флажков. Что я могу делать не так?
Ниже приведен мой код.
index. php
<?php
//index.php
include('database_connection.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Product filter in php</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Page Content -->
<div class="">
<h3>Duration</h3>
<?php
$query = "
SELECT DISTINCT(duration) FROM career
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
?>
<div class="checkbox">
<label><input type="checkbox" class="common_selector duration" value="<?php echo $row['duration']; ?>" > <?php echo $row['duration']; ?></label>
</div>
<?php
}
?>
</div>
<br />
<div class="filter_data">
</div>
<style>
#loading
{
text-align:center;
background: url('loader.gif') no-repeat center;
height: 150px;
}
.jobs{
background: gray;
margin: 10px;
padding: 10px;
width: 200px;
}
</style>
<script>
$(document).ready(function(){
filter_data();
function filter_data()
//this deals with filter checkboxes
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var duration = get_filter('duration');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action, duration:duration},
success:function(data){
$('.filter_data').html(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();
});
});
</script>
</body>
</html>
fetch_data. php
<?php
//fetch_data.php
include('database_connection.php');
$rowperpage = 3;
if(isset($_POST["action"]))
{
//statement limits but disables check box filter
$query = "
SELECT * FROM career order by id asc limit 0,$rowperpage
";
if(isset($_POST["duration"]))
{
$duration_filter = implode("','", $_POST["duration"]);
$query .= "
WHERE duration IN('".$duration_filter."')
";
}
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '';
if($total_row > 0)
{
foreach($result as $row)
{
$output .= '
<div class="jobs">
Title : '. $row['title'] .' <br />
duration : '. $row['duration'] .'
</div>
';
}
}
else
{
$output = '<h3>No Data Found</h3>';
}
echo $output;
}
?>
database_connection. php
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=biit", "root", "");
?>
Таблица базы данных 'career' 
Любая помощь будет высоко ценится:)