0

I am struck in my application, where I have thousands of data for creating reports and dataentry forms for the user. Previously I use to manage with json call from backend with datatablejs for fixing header and column.

But now I need to use angularjs as an framework for frontend side, and need to fix header and column of the table with datatable js.But i am unable to do the thing.

Please help me out of this stuff.

Can it be possible to use datatable js with angular, if not then please suggest me the way to fix header and column of the table with responsive solution? Any alternate solutions are also appreciated.

Vinoth Krishnan
  • 2,925
  • 6
  • 29
  • 34
Tapan Dave
  • 37
  • 7
  • Possible duplicate of [Using Jquery Datatable with AngularJs](http://stackoverflow.com/questions/14242455/using-jquery-datatable-with-angularjs) – ADreNaLiNe-DJ Apr 05 '16 at 06:33
  • You can make your own directive to wrap up datatable or use existing one http://l-lin.github.io/angular-datatables/ – Bettimms Apr 05 '16 at 06:34

1 Answers1

1

One way is using bootstrap for table and angular js has built in directives like ng-repeat which can be used to populate the data within a scope variable into the table. The columns can be made dynamic as well with the use of ng-repeat.

This is my 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>

This is my 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 '';
    }

*note: sortData() and getSortClass() function does the sorting on each column when clicked.

The tables will look somewhat like this:

click this to view image

niva rajkarnikar
  • 11
  • 4