angularjs pagination: Unknown provider: ngTableParamsProvider

Question

I want to implement the pagination in angular js. I am new to angular js.

I get this error in browser:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=ngTableParamsProvider%20%3C-%20ngTableParams%20%3C-%20allUsersCtrl

I have included these files at the HEAD section of layout view:

<!-- angular js--->
    <script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
    <script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
    <!-- flash msg -->
    <script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
    <!-- flash msg -->
     <!--loading bar-->
   <script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
   <script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
   <script src="<?php echo base_url();?>angular/js/ng-table.min.js"></script>
    <!--loading bar-->

    <script src="<?php echo base_url();?>angular/js/demo_angular.js"></script>
    <script src="<?php echo base_url();?>angular/js/app.js"></script>

This is my table in partial html:

 <table ng-table="tableParams"  class="table table-striped table-bordered table-hover" id="table_all_users">
                                    <thead>
                                         <tr>
                                            <th width="20%"><input type="checkbox" name="chk_all" id="chk_all"  onchange="checkAll(this)" /> Select</th>
                                            <th width="15%">Sr. No.</th>
                                            <th width="35%"><a href="" ng-click="reverse=!reverse;order('username', reverse)">User Name</a></th>
                                            <th width="25%"><a href="" ng-click="reverse=!reverse;order('fname', reverse)">First Name</a></th>
                                            <th width="25%"><a href="" ng-click="reverse=!reverse;order('lname', reverse)">Last Name</a></th>
                                            <th width="15%"><a href="" ng-click="reverse=!reverse;order('mobile', reverse)">Mobile</a></th>
                                            <th width="15%"><a href="" ng-click="reverse=!reverse;order('email', reverse)">Email</a></th>
                                            <th width="15%">Action</th>
                                        </tr>
                                    </thead>

                                    <tbody ng-init="get_users()">
                                        <tr class="gradeX" ng-repeat="user in allUsers | filter:query">
                                          <td width="20%"><input type="checkbox" name="list[]" class="chk_all" value="" id="" onclick="uncheck_select_all(this);" /></td>
                                          <td width="15%">{{ $index + 1 }}</td>
                                          <td width="35%">{{ user.username }}</td>
                                          <td width="25%">{{ user.fname }}</td>
                                          <td width="25%">{{ user.lname }}</td>
                                          <td width="15%">{{ user.mobile }}</td>
                                          <td width="15%">{{ user.email }}</td>
                                          <td width="15%"><a title="Edit User" href="#/edit_user/{{user.user_id}}" ><span class="fa fa-pencil"></span></a> | <a title="Delete User"  id=""  style="cursor:pointer;"  ng-click="delete_user(user.user_id)" ><span class="fa fa-trash-o"></span></a></td>
                                        </tr>

                                    </tbody>
                                </table>

This is the script.

var angularControllers = angular.module('angularControllers', ['flash']);  

angularControllers.controller('allUsersCtrl', ['$scope','$http','$filter','Flash','ngTableParams', function($scope,$http,$filter,Flash,ngTableParams){
   $scope.get_users = function()
        {
            $http.get("../admin/users/angular_all_users").success(function(data)
            {
                $scope.allUsers = data;    
            });
        }
    //for sorting by table column
    var orderBy = $filter('orderBy');
    $scope.order = function(predicate, reverse) 
    {
        $scope.allUsers = orderBy($scope.allUsers, predicate, reverse);
    }
    //table pagination
     $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10           // count per page
    }, {
        total: data.length, // length of data
        getData: function ($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    })


}]);

When I am adding here as: ['flash','ngTable'] still it gives error : data is not defined

Also after trying to implement pagination my data is not going to display, only header row is display.

Please suggest me any solution or any link that will guid step by step for pagination

Answer 1

My advice to you is always to initialize the ng-table in $http.get. It must be like:

    $http.get('../admin/users/angular_all_users').success(function (data) {
            $scope.tableParams = new ngTableParams({
                page: 1,
                count: 10
            },
            {
              total: data.length,
              getData: function ($defer, params) {
       // use build-in angular filter for ordering
        var orderedData = params.sorting() ?
                $filter('orderBy')(data, params.orderBy()) : data;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});
    });

With this "best practice" you will always avoid the problem that data with it's properties is undefined.

Don't forget to include ngTable in your module.

Hope this will push you forward.

Best regards!

Answer 2

You are getting the error because you are trying to include a dependency called ngTableParams which I think is in the module called ngTable which you have not included.

When you include the module as well, you are getting data is undefined. This is because you are using data variable in line

total: data.length, // length of data

but you have not declared the variabled before usage. I think you missed that.

You can just check the line number in the error to determine what is the problem. Try putting breakpoints, so you can easily trace the issues.

Answer 3

I also meet this error

/**
 * @ngdoc service
 * @name ngTableParams
 * @description Backwards compatible shim for lowercase 'n' in NgTableParams
 */
angular.module('ngTable').factory('ngTableParams', ['NgTableParams', function(NgTableParams) {
    return NgTableParams;
}]);

the above code can find in angular-ngtable.js, but I don't use this version, I success when I replace this, or change ngtableParams to uppercase (recommand).