是否可以将 datatablejs 与 angularjs 或任何替代 datatablejs 一起使用

Question

我对我的应用程序感到震惊，我在其中为用户提供了thousands of data for creating reports and dataentry 表单。以前我使用 管理来自后端的 json 调用，使用 datatablejs 来修复标题和列。

但是现在我需要使用angularjs作为前端的框架，并且需要fix header and column和datatable js的表。但是我无法做到这一点。

请帮我解决这些问题。

是否可以使用带角度的数据表 js， 如果没有，请建议我使用响应式解决方案修复表格的标题和列的方法？任何替代解决方案也值得赞赏。

Answer 1

一种方法是使用 bootstrap for table 和 angular js 内置指令，如 ng-repeat，可用于将范围变量内的数据填充到表中。使用 ng-repeat 也可以使列动态化。

这是我的html代码

<div class="table-responsive" ng-init="initialise()">
    <table class="table table-condensed shortMargin" id="dashboardTable">
        <thead id="table-header">
            <tr>
                <th ng-click="sortData('respondentName')">
                    Respondent Name
                    <div ng-class="getSortClass('respondentName')"></div>
                </th>

                <th ng-click="sortData('assessmentTitle')">
                    Assessment Title
                    <div ng-class="getSortClass('assessmentTitle')"></div>
                </th>

                <th ng-click="sortData('positionTitle')">
                    Position Title
                    <div ng-class="getSortClass('positionTitle')"></div>
                </th>

                <th ng-click="sortData('status')">
                    Status
                    <div ng-class="getSortClass('status')"></div>
                </th>

                <th>Action</th>

            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="task in TaskList | orderBy:sortColumn:reverseSort ">

                <td><a href="" ng-click="SetDetails(task)" data-toggle="modal" data-target="#RespondentDetailModal">{{task.respondentName}}</a></td>

                <td>
                    {{task.assessmentTitle}}
                </td>

                <td>
                    {{task.positionTitle}}
                </td>

                <td>
                    {{task.status}}
                </td>

                <td>
                    <a href="" class="btn btn-default btn-sm submit" type="button" ng-click="showTaskDetails(task)" data-target="#TaskDetails">
                        <span class="glyphicon glyphicon-zoom-in"></span>
                    </a>
                </td>

            </tr>

        </tbody>
    </table>

</div>

这是我的js代码

 $scope.initialise = function () {

        ngProgressLite.start();

        getWorkFlowByRoleName($scope.role[0]);
    };

function getWorkFlowByRoleName(name) {
        apiService.get('workFlowStatus/GetActiveTasksByRoleName/' + name,
                        name,
                        getWorkFlowByRoleNameCompleted,
                        reviewTasksLoadFailed
                        );
    }
    function getWorkFlowByRoleNameCompleted(response) {
        $scope.TaskList = response.data;

    }
    function reviewTasksLoadFailed(response) {
        if (response.statusText == "Not Found")
            $scope.taskEmptyMsg = "No tasks are assigned to you yet!! ";
    }

   //Function to sort by column
    $scope.sortData = function (column) {
        $scope.reverseSort = ($scope.sortColumn == column) ?
            !$scope.reverseSort : false;
        $scope.sortColumn = column;
    }

    $scope.getSortClass = function (column) {

        if ($scope.sortColumn == column) {
            return $scope.reverseSort
              ? 'glyphicon glyphicon-chevron-down'
              : 'glyphicon glyphicon-chevron-up';
        }

        return '';
    }

*注意：sortData() 和 getSortClass() 函数在单击时对每一列进行排序。

表格看起来有点像这样：

click this to view image