ist es möglich, datatablejs mit angularjs oder jede Alternative zu datatablejs

Question

zu verwenden Ich bin in meiner Anwendung geschlagen, wo ich thousands of data for creating reports and dataentry Formulare für den Benutzer habe. Zuvor verwende ich verwalten mit JSON-Aufruf von Back-End mit datatablejs für die Fixierung von Header und Spalte.

Aber jetzt brauche ich angularjs als Rahmen für die Frontend-Seite zu verwenden und müssen fix header and column der Tabelle mit datatable js .Aber ich bin nicht in der Lage, die Sache zu tun.

Bitte helfen Sie mir aus diesem Zeug.

Kann es möglich sein, datatable js mit eckigen, zu verwenden, wenn nicht dann bitte schlagen Sie mir die Möglichkeit, Header und Spalte der Tabelle mit reaktionsfähiger Lösung zu beheben? Irgendwelche alternativen Lösungen werden ebenfalls geschätzt.

Answer 1

Ein Weg ist Bootstrap für Tabelle und Winkel js hat eingebaute Direktiven wie ng-repeat, die verwendet werden können, um die Daten innerhalb einer Scope-Variable in die Tabelle zu füllen. Die Spalten können auch mit Hilfe von ng-repeat dynamisch gemacht werden.

Dies ist mein HTML-Code

<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> 

Das ist mein js Code

$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 ''; 
    } 

* Anmerkung: sortdata() und getSortClass() Funktion führt die Sortierung auf jeder Spalte, wenn darauf geklickt.

Die Tabellen sieht etwas wie folgt aus:

click this to view image