Refresh Datatable Without Reloading Page In Laravel 9

In this article, we will see refresh datatable without reloading the page in laravel 9. When I have a data table that gets data from the database and a record is changed in the table, it should automatically be reflected in the data table without refreshing the page.

So, let's see laravel 9 refresh the datatable without reloading the page in laravel, how to refresh the datatable without reloading the page, and datatable redraw using jquery.

Datatable provides reload of the table data from the Ajax data source. where the data shown in the table can be updated on the server side, it is often useful to be able to reload the table, showing the latest data.

Step 1: Install Laravel 9

In this step, we will create the laravel 9 application using the below command.

composer create-project --prefer-dist laravel/laravel laravel_9_example

 

 

Step 2: Install Yajra Datatable

You can install yajra datatable using this link: How To Install Yajra Datatable In Laravel 9

 

Step 3: Create Blade File

In this step, add the below code in the blade file.

<!DOCTYPE html>
<html>
<head>
    <title>Refresh Datatable Without Reloading Page In Laravel 9 - Techsolutionstuff</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
    <div class="container pt-4">
        <button type="button" class="btn btn-primary reload float-right mb-3">Reload</button>
        <table class="table table-bordered data-table">
            <thead class="text-center pt-4">
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody class="text-center">
            </tbody>
        </table>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        var table = $('.data-table').DataTable({
            stateSave: true,
            processing: true,
            serverSide: true,
            ajax: "{{ route('datatable') }}",
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
            ]
        });

        $(".reload" ).click(function() {
            table.ajax.reload(null, false);
        }); 
    });
</script>
</html>

Example:

Also, you can reload the table using the setInterval() function in jquery.

setInterval( function () {
    table.ajax.reload();
}, 3000 );

User paging is not reset on reload.

setInterval( function () {
    table.ajax.reload( null, false );
}, 3000 );

 Using the draw() function you can draw data in the table.

table.draw();

 


You might also like :

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS