#javascript #php #ajax
#javascript #php #ajax
Вопрос:
Я уже могу отображать таблицу с помощью ajax и добавлять параметры разбивки на страницы и сортировки, но всякий раз, когда я меняю параметр сортировки, таблица не обновляется автоматически и отображает правильные результаты только при нажатии на разбивку на страницы или при нажатии на следующую или предыдущую страницу
<select name="sort" id="myselect" onchange="refreshTable();" class="py-1" >
<option value="nameasc" >Name:Asc</option>
<option value="namedesc" >Name:Desc</option>
</select>
<div id="target-content">loading...</div>
<div class="clearfix">
<ul id="pager" class="pagination">
<?php
if(!empty($total_pages)){
for($i=1; $i<=$total_pages; $i ){
if($i == 1){
?>
<li class="pageitem active" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" data-id="<?php echo $i;?>" class="page-link" ><?php echo $i;?></a></li>
<?php
}
else{
?>
<li class="pageitem" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" class="page-link" data-id="<?php echo $i;?>"><?php echo $i;?></a></li>
<?php
}
}
}
?>
</ul>
</ul>
</div>
$("#myselect").on("change", function(event){
});
function refresher(){
document.write(5 6);
}
$(document).ready(function() {
$("#target-content").load("pagination.php?page=1");
$(".page-link").click(function(){
var id = $(this).attr("data-id");
var sort = $("#myselect").val();
var select_id = $(this).parent().attr("id");
$.ajax({
url: "pagination.php",
type: "GET",
data: {
page : id,
sort:sort
},
cache: false,
success: function(dataResult){
$("#target-content").html(dataResult);
$(".pageitem").removeClass("active");
$("#" select_id).addClass("active");
}
});
});
});
есть ли способ это исправить?
Ответ №1:
вы абсолютно правильно поступаете, но вы не запрашиваете ajax при изменении значения тега select. используйте приведенный ниже фрагмент кода для справки.
$("#myselect").on("change", function(event){
// check if dom contains .page-link elements
if($(".page-link")[0]){
//click the .page-link element manually with jquery
$(".page-link")[0].click();
}
});