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

Posted 2023-05-07

【中文标题】是否可以将 datatablejs 与 angularjs 或任何替代 datatablejs 一起使用

【英文标题】：is it possible to use datatablejs with angularjs or any alternative to datatablejs

【发布时间】：2016-07-24 22:22:06

【问题描述】：

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

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

请帮我解决这些问题。

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

【问题讨论】：

Using Jquery Datatable with AngularJs的可能重复

您可以制作自己的指令来包装数据表或使用现有的l-lin.github.io/angular-datatables

【参考方案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

【讨论】：

是的，但是我被冻结了使用 angularjs 渲染的表格的标题和列，

taskHeader