Refresh the table data using Ajax after selecting a sorting option

I can already display the table using ajax and add a pagination and sorting options but whenever i change the sorting option, the table doesnt refresh automatically and will only display the proper results when a pagination is clicked or when next or prev page is clicked

<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");                            
                }
            });
        });
    });

is there a way to fix this?

Answer

you are absolutely going in the right way but, you are not requesting ajax when you change the select tag value. use the below code snippet for reference.

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

Advertisement

Answer