即使数据存在并出现在表中，jQuery 数据表也会显示“表中没有可用数据”[重复]

Posted 2023-05-07

技术标签:

【中文标题】即使数据存在并出现在表中，jQuery 数据表也会显示“表中没有可用数据”[重复]【英文标题】：jQuery Data Tables shows "No Data Available in Table" even if data exist and appearing in table [duplicate] 【发布时间】：2018-11-12 23:13:24 【问题描述】：

花了几个小时寻找我面临的问题，我找到了一些可能的解决方案，例如 2 jQuery DataTables "No Data Available in Table" ， jQuery DataTables “No Data Available in Table” and tabled folds when sorting 但没有一个解决我的问题

问题是，当我的数据表中没有数据时，它显示表中没有可用的数据，这是正确的功能，但是一旦我通过 Web API Post 调用保存数据并通过 Web API Get 调用它调用并尝试在我的数据表中显示它，数据显示在我的数据表末尾没有可用的数据行。

这就是我的代码的样子，我正在使用 angularjs

我的保存按钮是；

<button type="button"
    class="btn btn-primary pull-right"
    ng-click="Insert()"
    ng-disabled="!frmClient.$valid">Save</button>

这是我的js文件中的插入函数

$scope.Insert = function ()

    //make a call to server to save date
    $http(
        method: "Post",
        data: $scope.Client,
        url: "/api/ClientWebAPI"
    ).then(function successCallback(clientData) 
        if (clientData.data.IsValid)
        
            //Load the collection of clients
            $scope.Clients = clientData.data.Data;
            $scope.InitControls();
        
        else
        
            $scope.Errors = clientData.data.Data.Errors;
        
    );

我的InitControls和Clients如下；

$scope.InitControls = function ()

    $scope.Client = 
        "rowuid": "0",
        "ClientID": "",
        "ClientName": "",
        "CreatedBy": "",
        "CreatedOn": "",
        "UpdatedBy": "",
        "UpdatedOn": ""
    ;


$scope.InitControls();

$scope.Clients = ;

最后我的 html 数据表看起来像这样；

<table id="UzairTable"
                   class="table table-bordered table-hover">

    <thead>

        <tr>
            <th>Client ID</th>
            <th>Client Name</th>
            <th>Actions</th>
        </tr>

    </thead>

    <tbody>

        <tr ng-repeat="Client in Clients">
            <td>Client.ClientID</td>
            <td>Client.ClientName</td>
            <td> Edit/View/Delete</td>
        </tr>

    </tbody>
</table>

任何人都可以帮助我并指导我缺少什么，这将是一个很大的帮助，我已经尝试在我的 Insert 函数中在 InitControls 之前初始化我的数据表，但没有任何运气。

-----已编辑-----

@Enrique Fernandez 我在<tr ng-repeat="Client in Clients"> 中替换了client，但问题仍然存在

这是返回客户列表的后回调；

public object Post(ClientModel model)
    
        ClientData clientData = new ClientData();
        if (ModelState.IsValid)
        
            if (ClientHelper.Save(model).ToUpper() == "SAVED SUCCESSFULLY")
            
                clientData.IsValid = true;
                clientData.Data = ClientHelper.GetAll();
            
            else
            
                Validation validation = new Validation();
                foreach (var modelState in ModelState)
                
                    foreach (var error in modelState.Value.Errors)
                    
                        validation.Errors.Add(error.ErrorMessage);
                    
                

                clientData.IsValid = false;
                clientData.Data = validation;
            
        

        return clientData;

ClientHelper类中的GetAll()函数是as;

public static List<ClientModel> GetAll()
    
        return service.GetAll().Select
            (x => new ClientModel(x)).ToList();

在我的帖子调用中返回的我的客户端数据类如下所示；

 public class ClientData

    public bool IsValid  get; set; 
    public object Data  get; set;

这就是我的帖子回调如何将数据返回到我的控制器 $scope.Insert 中的 function successCallback(clientData)

在我的布局视图中，这就是我使用数据表的方式；

<script>
    $(function () 
        $('#UzairTable').DataTable(
            'paging': true,
            'lengthChange': false,
            'searching': true,
            'ordering': true,
            'info': true,
            'autoWidth': true                
        );
    )
</script>

希望这有助于解决我的问题。

请注意，这不是重复问题，因为其他问题无法解决我的问题，此链接也无法解决我的问题Using Jquery Datatable with AngularJs

问候

【问题讨论】：

jQuery dataTables 大量操作 DOM，因此它与 Angular 冲突，后者也在不断改变 DOM。这使得 jQuery dataTables 排序、过滤等导致错误——实际上无法使用。 【参考方案1】：

我还不能发表评论。你能解决我对这个问题的一些疑问吗？

您是否尝试将<tr ng-repeat="Client in Clients"> 中的Client 替换为不在$scope 中的其他名称？ Angular 可能会混淆 2 个同名变量。

如果不是问题：