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
How to Downgrade PHP 8.2 to 8.1 in Ubuntu
How to Downgrade PHP 8.2 to 8....

Hey there, I recently found myself in a situation where I needed to downgrade my PHP version from 8.2 to 8.1 on my Ubunt...

Read More

Nov-01-2023

Laravel 10 Delete Multiple Records Using Checkbox
Laravel 10 Delete Multiple Rec...

In this article, we will see laravel 10 delete multiple records using the checkbox. Here, we will learn about how to del...

Read More

Mar-03-2023

How To Get Current Date And Time In Node.js
How To Get Current Date And Ti...

In this example we will see how to get current date and time in Node.js application. In Node.js date and time are handle...

Read More

Sep-01-2021

How to Handle Exception in PHP with Example
How to Handle Exception in PHP...

Hey there, Ever found yourself scratching your head over unexpected errors in your PHP code? Fret not, because today, we...

Read More

Dec-15-2023