Обновите данные таблицы с помощью Ajax после выбора опции сортировки

#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();
} 
 
});