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. Since you are also using "serverSide": true, please note the warning in that answer, and use jQuery's extend. — andrewJames
– andrewJames, Commented May 23, 2021 at 22:18

Ehsan Sajjad · Accepted Answer · 2021-05-23 22:27:26Z

1

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

answered May 23, 2021 at 22:27

Ehsan Sajjad

62.6k16 gold badges113 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related