asp.net mvc угловой стол jquery не работает - PullRequest
Новая
       11

asp.net mvc угловой стол jquery не работает

0 голосов
/ 20 февраля 2019

Я новичок в asp.net mvc с угловым режимом и не могу добавить загрузочную таблицу jquery. Запрос данных с отображением Нет данных, доступных в таблице , ниже мой код

Мой контроллер 

app.controller('SpaceController', function ($scope, SpaceService) {

    $scope.getAll = function () {

        loader(true);
        var getData = SpaceService.getAllData();
        getData.then(function (response) {

            if (response.data.success) {
                $scope.listdt = response.data.data;
                $('#TblID').DataTable();
                $scope.populateStatus();
                loader(false);

            }
            else {
                errorAlert("Oops", response.data.message);
                loader(false);
            }
        });
    }
})

Мой сервис 

app.service("SpaceService", function ($http) {


        this.getAllData = function () {
            var response = $http({
                method: "GET",
                url: "/Space/getAll",
                dataType: "json"
            });
            return response;
        }
});

Мой стол html 

<table class="table display" id="TblID">
    <thead>
        <tr>
            <th>ID</th>
            <th>Key</th>
            <th>Name</th>
            <th>Description</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>

        <tr ng-repeat="d in listdt">
            <td>{{d.SpaceID}}</td>
            <td>{{d.SpaceKey}}</td>
            <td>{{d.SpaceName}}</td>
            <td>{{d.SpaceDesc}}</td>
            <td> <span
                    class="label label-table {{d.StatusKey == 'A' ? 'label-success' : 'label-red'}}">{{d.StatusName}}</span>
            </td>
            <td>
                <a class="btn btn-primary btn-sm" ng-click="edit(d)"><i class="fa fa-pencil fa-lg"></i></a>
                <a class="btn btn-danger btn-sm" ng-click="delete(d)"><i class="fa fa-trash fa-lg"></i></a>
            </td>
        </tr>

    </tbody>
</table>

Я не могу найти, почему он показывает Нет данных , когда я пытаюсь найти что-то из таблицы, все полученные строки скрываются и начинают отображаться Нет данных, доступных в таблице . Ниже приведен снимок экрана.

enter image description here

1 Ответ

0 голосов
/ 23 февраля 2019

Смешивание фреймворков - общеизвестно плохая идея.Вы используете плагин jquery для рендеринга таблицы, сгенерированной AngularJs.Я уверен, что есть прекрасные компоненты AngularJ, которые могут делать что-то похожее на DataTables.

Вероятно, происходит то, что DOM не обновлялся с визуализированными табличными данными при вызове $('#TblID').DataTable().Таким образом, определенная информация недоступна, когда DataTables начинает свое отображение.Если это правильно, хакерским решением было бы вызвать DataTable() внутри setTimeout(): 

getData.then(function (response) {
  if (response.data.success) {
     $scope.listdt = response.data.data;
     $scope.populateStatus();
     $timeout(function() {
        $('#TblID').DataTable();
     })
     loader(false);
  }
  /* ... */
}

Если это не решит вашу проблему, то я рекомендую не использовать Angular для рендеринга таблицы ипередача ответа функции DataTable напрямую. 

getData.then(function (response) {
  if (response.data.success) {
     $scope.listdt = response.data.data;
     $scope.populateStatus();
     $('#TblID').DataTable({
       data: response.data.data,
       columns: [
         { data: 'SpaceID', name: 'ID' },
         { data: 'SpaceKey', name: 'Key' },
         { data: 'SpaceName', name: 'Name' },
         { data: 'SpaceDesc', name: 'Description' },
         { data: 'StatusName', name: 'Status' } /* use more advanced options for style */
       ],
       buttons: [ 
         { tag: 'edit', className: 'fa fa-pencil fa-lg', action: (e, b) => $scope.edit(b.row().data()) },
         { tag: 'delete', className: 'fa fa-trash fa-lg', action: (e, b) => $scope.delete(b.row().data()) }
       ]
     });

     loader(false);
  }
  /* ... */
}
...