CODEWITHSUNDEEP
jquerylaraveldatatable
King RG
King RG

Reputation: 510

Refresh dataTable after ajax submit

Currently my dataTable jquery is getting the data from compact

My Blade : task.blade.php

                    $.ajax({
                        headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        url: "{{ route('task_save') }}",
                        method: "POST",
                        data:{
                            proceed:"TRUE",
                            task_title:task_title,
                            weight:weight,
                            desc:desc
                        }, 
                        dataType: "json",
                        success:function(data)
                        {
                            if(data.success.length > 0){
                                refreshTable();
                                toastr.success(data.success[0]);
                                // alert(data.success[0]);              
                            }else{
                                toastr.error(data.error[0]);
                                // alert(data.error[0]);
                            }
                        },
                        error: function(xhr, ajaxOptions, thrownError){
                            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });

My TaskController

$task_record = TaskModel::orderBy('created_at','desc')
->get();

return view('admin.task', compact('task_record'))->render();

and in my task.blade.php In used this include('admin.taskDatatable')

Since my datatable is coded inside of this file : taskDatatable.blade.php

Here's my taskDatatable.blade.php

<table id="dtMaterialDesignExample" class="table table-striped" cellspacing="0" width="100%">
    <thead>
        <tr>
        <th class="th-sm">Task Title
        </th>
        <th class="th-sm">Task Description
        </th>
        <th class="th-sm">Weight %
        </th>
        <th class="th-sm">Created By
        </th>
        <th class="th-sm">Created Date
        </th>
        <th class="th-sm">Action
        </th>

        </tr>
    </thead>
    <tbody id="taskRcrd">
            @if(count($task_record) > 1)
            @foreach($task_record as $field)
            <tr>
            <td>{{$field->task_title}}</td>
            <td>{{$field->task_desc}}</td>
            <td>{{$field->weight}}</td>
            <td>{{$field->updated_by}}</td>
            <td>{{$field->created_at}}</td>
            <td></td>
            </tr>
            @endforeach
            @else
            <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            @endif
    </tbody>

    </table>

Here's my refreshTable()

 <script>
 function refreshTable() {
     $("#dtContainer" ).load(" #dtMaterialDesignExample");
 }
 </script>

I'm trying to refresh the dataTable after the success of ajax

the Datatable refresh fine but the whole datatable doesn't work anymore like pagination, search text, show entries it means all of the features of datatable not working properly but the data successfully refresh.

UPDATED

after trying this code

<script>
 function refreshTable() {
$("#dtMaterialDesignExample").DataTable().ajax.reload()
}
</script>

enter image description here enter image description here

Upvotes: 0

Views: 4651

Answers (3)

Elonelon
Elonelon

Reputation: 78

Try this : 

success: function (data) {
    $('#form').trigger("reset");
}

https://www.tutsmake.com/laravel-5-8-datatables-ajax-crud-tutorial/

Upvotes: 0

Dilip Hirapara
Dilip Hirapara

Reputation: 15296

Try this.

function refreshTable(){
    $("#dtMaterialDesignExample").DataTable().ajax.reload();
}

And you don't need to make function for it you can directly call it in success function

success:function(data)
{
    if(data.success.length > 0){
        $("#dtMaterialDesignExample").DataTable().ajax.reload();
        toastr.success(data.success[0]);

    }else{
        toastr.error(data.error[0]);

    }
},

check more info about ajax.reload() ajax.reload()

Check with ajax reload-refresh-table-after-event

Upvotes: 1

Eyad Jaabo
Eyad Jaabo

Reputation: 389

You can do something like this:

function refreshTable(){
var table =  $('#tableId');
table.DataTable().ajax.reload();
}

Upvotes: 0

Related Questions