JQuery Datatable Refresh - Unable to receive parameter value on MVC controller side

Question

Trying to pass some parameters in JQuery Datatables, its working fine on init. But when I try to refresh the datatable the values are received as empty on controller side. Here is the code:

 $("#SearchResultsTable").DataTable({
            "processing": true, 
            "serverSide": true, 
            "bLengthChange": false,
            "filter": false, 
            "pageLength": @Model.PageSize,
            "orderMulti": false, 
            "ajax": {
                "url": "/Request/SearchRequest",
                "type": "POST",
                "datatype": "json",
                "data": {
                    "Date_To": document.getElementById("Date_To").value,
                    "Date_From": document.getElementById("Date_From").value
                }
            },
            "columns": [
                { "data": "ABC", "name": "ABC", "autoWidth": true },
                { "data": "DEF", "name": "DEF", "autoWidth": true }
            ]
        });

Refresh Datatable:

$("#Search_Btn").click(function () {
            $("#SearchResultsTable").DataTable().clear();
            $("#SearchResultsTable").DataTable().draw();
        });

Also tried:

$("#Search_Btn").click(function () {
                var table = $('#SearchResultsTable').DataTable();
                table.ajax.reload();
            });

I would like to refresh the table in such a way the updated vales of 'Date_To' & 'Date_From' are available on controller side.

In your DataTable `ajax` option, instead of using `data: { ... }`, you can use a function: `"data": function () {...}`. There is an example in [this answer](https://stackoverflow.com/a/66244738/12567365). Since you are also using `"serverSide": true`, please note the **warning** in that answer, and use jQuery's `extend`. — andrewJames, May 23 '21 at 22:18

score 1 · Accepted Answer · answered May 23 '21 at 22:27

You will need to pass the parameters via jquery datatable like below:

"data": function (data) {

           data.Date_To = document.getElementById("Date_To").value;
           data.Date_From = document.getElementById("Date_From").value;

        }

Please take a look at the following tutorial for more details

https://www.codeproject.com/Articles/1170086/Grid-with-Server-Side-Advanced-Search-using-JQuery

JQuery Datatable Refresh - Unable to receive parameter value on MVC controller side

1 Answers1