Question

我正在开发一个大型应用程序，我必须将大量数据加载到一个页面中，因此我在Angluar项目中使用带有服务器端分页的jQuery Datatable。
问题是表始终处于处理状态并且不加载数据，但是在ajax调用之后数据显示正确，但它没有显示在表中。

这里是完整的控制器

(function () {
    'use strict';
    var host = "http://localhost/";
    var table;
    angular.module('app')
    .controller('wfCtrl', wfCtrl);
    function wfCtrl($scope, $location, $http) {
        $scope.selanguage = "FR";
        $('#table-container').hide();
        $("#loader").append(" <img class='loader' width='50' src='./plugins/datatables/images/loader.gif'></img>")
        table = $('#data').DataTable({
                "bProcessing": true,
                "bServerSide": true,
                "ajax": {
                    url: host + 'api/workflow/' + $scope.selanguage,
                    type: "get", // type of method  ,GET/POST/DELETE
                    success: function (data) {
                        console.log(data);
                        $("#loader").hide();
                        $('#table-container').show();
                    },
                    error: function (data) {
                        $("#error").append("<p align=center class='loader' style='color:red'> No data found </p>")
                        $("#loader").hide();
                        $('#error').show();
                        console.log(data);
                    }
                },
                "columns": [{
                        "className": 'details-control',
                        "orderable": false,
                        "defaultContent": ''
                    }, {
                        "data": "worcode"
                    }, {
                        "data": "worstatus"
                    }, {
                        "data": "worlabel"
                    }, {
                        "data": "wordescription"
                    }, {
                        "orderable": false,
                        "defaultContent": "<div class='btn-group'>" +
                        "<button type='button' class='btn btn-success addstaaa' title='add a step' data-toggle='modal' data-target='#modal-addst'><i class='fa fa-plus'></i></button>" +
                        "<button type='button' class='btn btn-info'><i class='fa fa-pencil-square-o' title='edit workflow'></i></button>" +
                        "<button type='button' class='btn btn-danger' title='delete workflow'><i class='fa fa-trash' ></i></button>" +
                        "</div>"
                    }
                ],
                "start": 0,
                "length": 5
            });
    }
})();

这里是数据的内容

{"draw":1,"data":[{"worcode":"AAA","wordest":"AVDOSS","worstatus":"ACTIF","worheight":0,"lancode" :"FR","worlabel":"Step","wordescription":"Step"},    {"worcode":"ABB","wordest":"AVDOSS","worstatus":"ACTIF","worheight":0,"lancode" :"EN","worlabel":"Monde","wordescription":"Monde"}],"recordsTotal":23,"recordsFiltered":23}

Answer 1

The DataTables ajax docs (https://datatables.net/reference/option/ajax) say that you can not supply success and error properties for the ajax option, they are used internally and by supplying them you are preventing it from processing the ajax response. Remove these and DataTables can do its thing with the response.

If you need to do additional processing before/after datatables makes an ajax call you can hook into events, take a look at - https://datatables.net/reference/event/

如何解决jquery数据表中的处理状态？

1 个答案: