Refresh the table data using Ajax after selecting a sorting option

user_13097805 0
Viewed 59

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?

php ajax javascript
1 Answers

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