CODEWITHSUNDEEP
phpjqueryajaxlaraveldatatable
Drew
Drew

Reputation: 738

Laravel & Datatables: Ajax data not refreshing table with new ajax parameters from html select

can you please help me. I'm developing a back-end app using laravel where I use data tables. The situation is I'm retrieving the mailing list from mailgun and wanted to return users in that mailing list. I'm using a html select tag from the laravel blade and wanted to refresh the data table by sending the mailing list as a parameter to the ajax request but nothing happens. I followed this question

https://datatables.net/forums/discussion/30286/ajax-reload-is-not-sending-updated-params

Below is my code

LARAVEL BLADE:

Mailing List: <select id="mailing-list">
                                @foreach($lists as $list)
                                       @if($list->address == '[email protected]')
                                       <option selected="selected" value="{{$list->address}}">{{$list->address}}</option>
                                       @else
                                       <option value="{{$list->address}}">{{$list->address}}</option>
                                      @endif
                                @endforeach
                            </select>

DATA TABLE:

// get variable for mailing list
                    mailingListName = document.getElementById("mailing-list").value;
                    $('#mailing-list').change(function(){
                             table.ajax.reload();
                        });
                    // data table
                    var table = $('.data_Tables_wrapper').DataTable({
                                "bPaginate": true,
                                "bJQueryUI": true,
                                "iDisplayLength": 50,
                                "sPaginationType": "full_numbers",
                                "ajax": {
                                    url: 'lists/data',
                                    data: function ( d ) {
                                            return JSON.stringify( d.mail = mailingListName );
                                        }
                                    },
                                "order": [ 2 ],
                                "columns": [
                                    { data:"email", name: "email" },
                                    { data:"name", name: "name" },
                                    { data:"subscribed", name: "subscribed" }
                                ]
                            });

Any idea why the data table is not refreshing with the correct data.

Upvotes: 2

Views: 3004

Answers (3)

Drew
Drew

Reputation: 738

Thank you for Sebastianb and fallen.lu for the answers. I found out why the data is not loading when the select option has changed. Instead of putting it outside the change event. I should put it inside and I get the correct data for that mailing list.

$('#mailing-list').change(function(){
                             mailingListName = document.getElementById("mailing-list").value;
                             table.ajax.reload();
                        });

Upvotes: 1

Sebastianb
Sebastianb

Reputation: 2060

try changing the data function in the ajax object to something like this:

"ajax": {
    url: 'lists/data',
    data: function ( d ) {
            d.mail = mailingListName;
        }
    }
}

(check the examples in the DataTable's website)

I don't know what kind of data is the server expecting on "mail", though. Also, remember datatables sends this data as a GET request.

Upvotes: 2

fallen.lu
fallen.lu

Reputation: 77

$('#table').dataTable().fnDestroy();
$('#table').dataTable( {
            "bDestory": true,
            bRetrieve: true});

bRetrieve: Retrieve an existing DataTables instance
bDestory: Destroy any existing table matching the selector and replace with the new options.

but in datatable documents , it becomes "destroy": true, "retrieve": true ,have a try...

Upvotes: 1

Related Questions