CODEWITHSUNDEEP
c#asp.net-mvcasp.net-mvc-4datatables
Mike
Mike

Reputation: 751

jQuery datatable using ajax POST method to send custom object

I want to send custom object to my controller method with jquery datatables default parameters for paging, sorting, searching and # of records binding.

The issue is : When I Post object to server using datatable ajax it successfully post my object and also send parameters for length, start and draw BUT stops sending parameters for sorting n searching. When I do GET request it sends all parameters but not only my custom object and obviously it should not

I want to send custom object with datatable defaults parameters for paging and sorting WHAT IS THE SOLUTION FOR IT ?

here is code:

 $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/Color/Fetch",
            "type": 'Post',
            // "dataType": "json"
            data: { color: $scope.colorSearch }
            //  dataSrc: 'data'
        },
        "columns": [
            { "data": "Active" },
            { "data": "Company_Id" },
            { "data": "Id" },
            { "data": "IsActive" },
            { "data": "Name" }
        ]
    });

Controller action:

 public JsonResult Fetch(Color color, int draw, int start, int length)
    {


        string search = Request.QueryString["search[value]"];
        int sortColumn = -1;
        string sortDirection = "asc";
        if (length == -1)
        {
            length = 90;
        }

        // note: we only sort one column at a time
        if (Request.QueryString["order[0][column]"] != null)
        {
            sortColumn = int.Parse(Request.QueryString["order[0][column]"]);
        }
        if (Request.QueryString["order[0][dir]"] != null)
        {
            sortDirection = Request.QueryString["order[0][dir]"];
        }}

Upvotes: 2

Views: 4110

Answers (1)

Murat Yıldız
Murat Yıldız

Reputation: 12022

Try to use the following approach:

$('#example').DataTable({
    "processing": true,
    "serverSide": true,
    /*
    "ajax": {
        "url": "/Color/Fetch",
        "type": 'Post',
        // "dataType": "json"
        data: { color: $scope.colorSearch }
        //  dataSrc: 'data'
    },
    */      
    
    "ajaxSource": "/Color/Fetch",
    //fnServerData method used to inject the parameters into the AJAX call sent to the server-side
    "fnServerData": function (sSource, aoData, fnCallback) {
        aoData.push({ "name": "color", "value": "Blue" }); // Add some extra data to the sender
        $.getJSON(sSource, aoData, function (json) {
            /* Do whatever additional processing you want on the callback, then tell DataTables */
            fnCallback(json);
        });
    },
        
    "columns": [
        { "data": "Active" },
        { "data": "Company_Id" },
        { "data": "Id" },
        { "data": "IsActive" },
        { "data": "Name" }
    ]
});

Upvotes: 3

Related Questions