The flashes are caused by reflow which happens to be more noticeable on devices and smaller screens. The reflows are caused by always redrawing the whole table.

Solutions could be:

1. Fetch only changed rows from the server and add/remove only affected rows.
2. Perform a diff between current and last response and add/remove only affected rows.

Do you have the control of the client-side? what exactly is the point of using the library?

I have a responsive HTML table, it changes depending on the screen size of the user.
I use Ajax to load the table as the data often changes.
Everything works well when the browser is in fullscreen, however when i make the screen smaller and the tables CSS changes to the responsive mode, or i view the table on a mobile device, everytime ajax loads the table again, the fullscreen table breifly flashes before displaying the responsive table

I am using the following script for the responsive table:
https://github.com/jerrylow/basictable

The code i am using is as follows:

function table() {
    $.ajax({
        url: 'mytable.php',
        type: 'post',
        data: {
            name: '<?php echo $name ?>',
            username: '<?php echo $username ?>'
        },
        success: function(response) {
            $(document).ready(function() {
                $('#mytable').basictable({
                    forceResponsive: false
                });

            });

            $('.mytable').html(response);

        }
    });
}
table();
setInterval(table, 3600);
$(document).ready(function() {
    $('#mytable').basictable({
        forceResponsive: false
    });


});

I have tried to re-arrange the code to make ‘basictable’ load first, as i think this could fix it. however it does not seem to work.

How can i fix this?