is it possible to use datatablejs with angularjs or any alternative to datatablejs

Question

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.

You can make your own directive to wrap up datatable or use existing one l-lin.github.io/angular-datatables — Bettimms
– Bettimms, Commented Apr 5, 2016 at 6:34

niva rajkarnikar · Accepted Answer · 2016-04-05 07:02:54Z

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

Yes,but i am struck for freezing header and column for the table which is render using angularjs,
<thead id="table-header"> <tr ng-repeat="taskHeader in TaskHeaderList"> <th>{{taskHeader}}</th> </tr> </thead>

Collectives™ on Stack Overflow

is it possible to use datatablejs with angularjs or any alternative to datatablejs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related