Ajax reload with new posted value-using serverSide processing

lancew

I have a datatable with server side processing, searching etc. I want to click a button and change a posted parameter to a different value.

                let table = $('#Companies').DataTable({
                    "lengthMenu": [[10, 25, 50], [10, 25, 50]],
                    searchDelay: 1000,
                    processing: true,
                    serverSide: true,
                    searching: true,
                    ordering: true,
                    paging: true,
                    fixedHeader: true,
                   //retrieve: true,
                    "ajax": {
                        "url": "@Url.Action("GetCompanies", "Company")",
                        "type": "POST",
                        data: { includeInactive:  false}
                    },
                    columns: [
                        { "data": "@nameof(CompanyDtoForAdminSearch.CompanyName)" },
                        {
                                "data": "@nameof(CompanyDtoForAdminSearch.FacilityName)",
                                "render": function(data, type, row, meta) {
                                    if (type === 'display') {
                                        data = '<a href="@Url.Action("EditFacility")/' + row.Id + '">' + data + '</a>';
                                    }
                                    return data;
                                }
                            },
                        { "data": "@nameof(CompanyDtoForAdminSearch.Street)" },
                        { "data": "@nameof(CompanyDtoForAdminSearch.City)" },
                        { "data": "@nameof(CompanyDtoForAdminSearch.AddressType)" }
                    ]
                    //"initComplete": function(settings, json) {
                    //    var $searchInput = $('div.dataTables_filter input');
                    //    $searchInput.unbind();
                    //    $searchInput.bind('keyup', function(e) {
                    //        if(this.value.length > 3) {
                    //            table.search( this.value ).draw();
                    //        }
                    //    });

                    //}
                });

Button click

            $('#ViewBusinesses').on('click', function () {
                table.ajax.data = {includeInactive: true}
                table.ajax.reload();
            });

Of course the reload loads the original ajax so how do I reload the table and post new new value?

kthorngren

I think you will want to use ajax.data as a function. The docs have a couple examples.

Kevin

lancew

Isn't that what I tried when I used "table.ajax.data = {includeInactive: true} "

lancew

I also tried:

$('#ViewBusinesses').on('click', function () {
                table.ajax.data = function ( d ) {
                    d.includeInactive = true;
                }
                table.ajax.reload();
            });

kthorngren

No. When you initialize Datatables like this the data: { includeInactive: false} is static meaning it won't change. See the first example in the docs.

    "ajax": {
        "url": "@Url.Action("GetCompanies", "Company")",
        "type": "POST",
        data: { includeInactive:  false}
    },

Also this from the docs:

In principle it operates in exactly the same way as jQuery's $.ajax.data property, in that it can be given as an object with parameters and values to submit, but DataTables extends this by also providing it with the ability to be a function, to allow the data to be re-evaluated upon each Ajax request (see above).

You will need to do something more like this:
http://live.datatables.net/xucixizu/1/edit

You can look at the parameters sent using the browser's developer tools > network. In Chrome you can scroll to the bottom of the Headers tab.

Kevin

lancew

Yes that works. Thanks for your help!