CODEWITHSUNDEEP
c#asp.net-web-apidatatables-1.10
user783244
user783244

Reputation: 111

Datatables 1.10.9 + c# WebApi2

i am in trouble with Datatables.net 1.10.9 and WebApi Controller.

I wrote a simple example of Datatable:

    $(document).ready(function () {
    $('#tableJQDataTable1').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "type": 'POST',
            "url": '/api/prova/LoadData',
            "dataSrc": function (json) {
                var ret = JSON.parse(json);
                return ret;
            }
        },
        "autoWitdh": true,
        "scrollY": 200,
        "scrollCollapse": true,
        "lengthChange": true,
        "lenghtMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "paging": true,
        "pageLength": 20,
        "pagingType": "full_numbers",
        "columns": [
           { "data": "CodiceColore" },
           { "data": "Descrizione" }
        ]
    });
});

The WebApi Controller is:

    [HttpPost]
    public string LoadData(DTParameters param)
    {
        string retValue = string.Empty;

        using (TestDataController m_dc = new TestDataController())
        {
            m_dc.Initialize();
            IQueryable<AnagraficaColori> m_anagraficaColori = m_dc.GetColori();

            var m_data = m_anagraficaColori.ToList();

            DTResult<AnagraficaColori> result = new DTResult<AnagraficaColori>
            {
                draw = param.Draw,
                data = m_data,
                recordsFiltered = m_data.Count(),
                recordsTotal = m_data.Count()
            };

            retValue = JsonConvert.SerializeObject(result);
        }

        return retValue;
    }

I get the DTParameters and DTResult<> from example at:https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side

I don't use a MVC application for the test, but a simple WebForms application configured to use WebApi.

The problem is that i can not be able to show the data.

The return value from the WebApi controller is:

{"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"CodiceColore":"C110OP","Descrizione":"Ciliegio C001 "}]}

So it seems to be in correct form with all the return parameters needed by datatables.

If i put a breakpoint in the dataSrc function i see the ret value containing this:

Object {draw: 1, recordsTotal: 1, recordsFiltered: 1, data: Array[1]}

That seems all right.

But the Datatables show the message: "No matching records found", and nothing is shown.

What i missing ?

Regards, Giuseppe.

Upvotes: 0

Views: 968

Answers (2)

davidkonrad
davidkonrad

Reputation: 85538

You should neither set type nor try to parse the response. 

"ajax": {
   "url": "/api/prova/LoadData",
}

then your code works -> http://jsfiddle.net/rdhkf2rk/

Upvotes: 1

Amadeus Sanchez
Amadeus Sanchez

Reputation: 2575

I think you should use a GET request rather than a POST request in your Ajax call. 

"ajax": {
        "type": 'GET',
        "url": '/api/prova/LoadData',
        "dataSrc": function (json) {
            var ret = JSON.parse(json);
            return ret;
        }
    },

Upvotes: 0

Related Questions