是否有可能使用datajablejs与angularjs或任何替代datatablejs

我感到我的应用程序，其中我有thousands of data for creating reports and dataentry窗体为用户。以前我使用来管理后端的json调用，datatablejs用于修复头文件和列。是否有可能使用datajablejs与angularjs或任何替代datatablejs

但现在我需要用angularjs作为前端侧的框架，需要表中的fix header and column与datatable js。但我不能做的事。

请帮我解决这个问题。

是否有可能使用角度的数据表js，如果不是那么请建议我解决方案的表头和列与响应式解决方案的方式？任何备用解决方案也表示赞赏。

来源

2016-04-05 Tapan Dave

的[使用jQuery的DataTable与AngularJs]（可能的复制http://stackoverflow.com/questions/14242455/using-jquery-datatable-with -angularjs） –

你可以制定自己的指令来包装数据表或者使用现有的指令 http://l-lin.github.io/angular-datatables/ – Bettimms

一种方式是使用引导程序的表和角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

来源

2016-04-05 06:53:03

是的，但是我为了冻结表头和列而感到震惊这是使用angularjs呈现， –

{{taskHeader}} –

是否有可能使用datajablejs与angularjs或任何替代datatablejs

回答

相关问题