Laravel 9 Refresh DataTable Without Reloading Page

Websolutionstuff | May-01-2022 | Categories : Laravel PHP jQuery

In this article, we will see laravel 9 refresh datatable without reloading the page. 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 refresh datatable without reloading page in laravel, how to refresh datatable without reloading page, datatable refresh jquery, datatable redraw jquery.

Datatable provides reload the table data from the Ajax data source. where the data shown in the table can be updated at 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 laravel 9 application using the below command.

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

 

 

Step 2: Install Yajra Datatable

You can install yajra datatable using this link: Install Yajra Datatable

 

Step 3: Create Blade File

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

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Refresh DataTable Without Reloading Page - Websolutionstuff</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 table using 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 :

Recommended Post
Featured Post
Require ext-curl is missing from your system ubuntu
Require ext-curl is missing fr...

In this article, we will see require ext-curl * is missing from your system in ubuntu. When we set up the laravel 9...

Read More

Feb-16-2023

How To Disabled Submit Button After Clicked Using jQuery
How To Disabled Submit Button...

In this article, we will see how to disabled submit button after clicked using jquery. Using jQuery we will disable the...

Read More

May-08-2022

How To Count Days Excluding Weekends And Holidays In Laravel 9
How To Count Days Excluding We...

In this article, we will see how to count days excluding weekends and holidays in laravel 9. Here, we will learn to...

Read More

Jan-24-2023

How To Send E-mail Using Queue In Laravel 9
How To Send E-mail Using Queue...

In this tutorial, I will show you how to send e-mail using queue in laravel 9, Some time we can see many...

Read More

Feb-21-2022