Consume Web Api (Async call)

Kris-I

Hello,

I have a trouble with datatables. When I load my page (AngularJS 1.4.x with routing + $http, promise). I can feed the datatable, I see the datatable with data, but the behavior is strange when I sort the columns datas disappear, I get the message "No data available in table" but there are data.

I don't see a problem on server side because when I sort there is no server call.

You can see the behavior here : http://metronictesting.azurewebsites.net/ do "Login" and after "Customer" > "Search".

You can try to consume this URL :
http://infitek-rest-test.azurewebsites.net/api/customer/?lg=cista&kp=ing&tk=gUTVQjNW0khTRkXOCP0VT6zaIZiWyo8R

Thanks,

allan

On a quick scan, I couldn't see where in your Javascript you are adding the data to the DataTable. Can you show me the code for that please? I presume you are using either the rows.add() API method or data initialisation option to do so. The ajax option is another option.

Allan

Kris-I

I'll check the site later.

I have a local small, and I'd like fill in a datatable coming with the URL (second URL in my first post). How can I do an Web Api call to fill in the table ?

allan

• Manual
• Example.

Allan

Kris-I

I saw that, I tried that's work but not to call WebApi, I need to specify GET/POST, the headers, ...

I tried :

        $(document).ready(function () {
            $('#example').dataTable({
                "bServerSide": true,
                "sAjaxSource": "http://.......",
                "sServerMethod": "GET",
                "sAjaxDataProp": "data.result"
            });
        });

There is a call to the service but the table is empty (no content), just "Processions message".

I tried this too :

        $(document).ready(function () {
            $('#example').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "http://....",
                "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
                    oSettings.jqXHR = $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": sSource,
                        "data": aoData.result,
                        "success": fnCallback
                    });
                }
            });
        });

allan

I would suggest using the ajax option rather than the legacy API.

Allan

Kris-I

To be honest, I don't understand anything, .... I know now why I hate front end :)

There is no a real concrete consume Web Api sample ?

allan

I gave a link above that shows an example that consumes a JSON data source. You just need to modify it slightly for your specific JSON data. Use ajax.dataSrc to tell it to use results as the data array and then columns.data for each column's data property.

Allan

Kris-I

I think that's work but don't know if it's the correct way to implement (now I have to try to implement in Metronic ThemeForest)