jQuery datatables v1.10 server side - send an additional paramter to the server method

Question

I am working on a C# MVC application. There is a search page with several fields. When the user clicks the search button, i would like to pass the values from the search fields in json, in addition to the default datatable json, to the server side method to filter records based on those search field values and display those results in the table. I have tried this in several ways but the search field json is never reaching the server side method. I do receive the jquery params like iColumns, iDisplayLength, iSortCol_0, etc but i do not receive the search fields json. I am using jquery datatable version 1.10, i have tried this in compatibility mode like this:

            tblSearchResults = $('#tblSearchResults').dataTable({
            "bServerSide": true,
            "bFilter": true,
            "sAjaxSource": '@Url.Action("GetSearchResults", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)',
            "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                aoData.push(getSearchJson())
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback,
                    "error": function (e) {
                        ErrorDialog(e.Message, "Error");
                    }
                })
              }
            });

With compatibility mode i also tried adding the object to the end of the request url:

"sAjaxSource": '@Url.Action("GetSearchResults", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)?searchJson=' + getSearchJson(),

I have also tried with the 1.10 naming conventions:

tblSearchResults = $('#tblSearchResults ').DataTable({,
            "serverSide": true,
            "searching": true,
            "ajax": {
                "url": '@Url.Action("GetSearchResults,", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)',
                "data": getSearchJson()
            },
        });

The javascript getSearchJson function looks like this:

function getSearchJson() {
        var jsonObj = {
            FirstName: $('#@Html.IdFor(m => Model.FirstName)').val() || '',
            LastName: $('#@Html.IdFor(m => Model.LastName)').val() || '',
            PhoneNumber: $('#@Html.IdFor(m => Model.PhoneNumber)').val() || '',
        };
        return JSON.stringify(jsonObj);
    }

Here is what i've tried with the server side method: compatibility mode with added url parameter:

public ActionResult GetSearchResults(jQueryDataTableParamModel param, searchParamModel searchJson)
    { do search and return results}

searchJson is always null

compatibilty mode with fnServerData:

public ActionResult GetSearchResults(jQueryDataTableParamModel param)
    {         
            string json = HttpUtility.UrlDecode(Request.GetJsonData());
            inModel = Newtonsoft.Json.JsonConvert.DeserializeObject<searchParamModel>(json);

I used this same method for the DataTable with 1.10 naming conventions. This seems to be the same json as the jquery param parameter, definitely not the search fields json i am looking for.

I would like to send the search json along with the default jquery table parameter json. How can this be achieved? I have looked through many posts but have not found the solution

Please help. Thanks

Answer 1

SO:

You shouldn't need to JSON.stringify your object; it looks like datatables will do that for you.

You might want to go with a POST instead of a GET if that query string is starting to get too long.

The javascript:

tblSearchResults = $('#tblSearchResults ').DataTable({
            "serverSide": true,
            "searching": true,
            "ajax": {
                "url": "https://google.com/controller",
                "type": "POST",
                "data": getSearchJson()
            },
        });

function getSearchJson() {
        var jsonObj = {
            FirstName: "blah",
            LastName: "blah2",
            PhoneNumber: "blah3",
        };
        return jsonObj;
        //return JSON.stringify(jsonObj);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tblSearchResults" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Here it is in jsfiddle: https://jsfiddle.net/obxnfh1u/

And the request that's being sent (viewed with Fiddler):

draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=5&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&FirstName=blah&LastName=blah2&PhoneNumber=blah3

Note the custom props at the end.

ajax.data specific documentation from datatables: https://datatables.net/reference/option/ajax.data