I have two trigger function that used for two functions. end point is once the objective is completed DataTable would be reloading. as per this case, One function is working when the other is not. The not working one's process is a simple add function with a modal popup. once it is added it will be displayed on the datatable real-time. below is the function.

    //DOESN'T REFRESH TABLE

    $(document).on('click','#add',function(event){
        event.preventDefault();
        $('#add-cat').html('');
        var id = $(this).data('id');
        $.ajax({
            type:'POST',
            url:'../cat/modal/add.php',
            data:{id:id},
            success : function(data)
            {
                $('#add-cat').html(data);

                //TO REFRESH TABLE
                $('#example').DataTable().ajax.reload();
            }
        });
    });

The refreshing one real-time as per requirement is below

     //REFRESHES TABLE
     $(document).on('click','#con',function(event){
        if(confirm("Are you sure?")){
            event.preventDefault();
            var id = $(this).attr('data-id');
            $.ajax({
                url     : '../ord/stat.php',
                method  : 'POST',
                data    : {id : id},
                success : function(data)
                {
                    $('#example').DataTable().ajax.reload();
                }
            });
        }
        else{
            return false;
        }
    });

Why the first one is not updating the table and the second one is?

Regards.