是否有可能使用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

回答

相關問題