在HTML中使用ngTable 可以方便的进行排序，筛选，分页，添加，编辑删除等操作，不用再从数据库里面进行分页等操作

• 需要引用的文件
  • angular.js
  • ng-table.js
  • ng-table.css
  • bootrasp.css

• 注入依赖

• 为ng-table 设置属性和数据

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  var app = angular.module('app', [ 'ngTable']); app.controller('controller', function($scope,NgTableParams) { $http.get("/query") .success(function(data) { $scope.userTable = new NgTableParams({ page : 1, count : 5 }, { total : data.length, getData : data } }); }) }); }

• 为 table 添加 ng-table 属性

• 显示数据

1
2
3
4
5
6
7
8
9
10
11
12

<table ng-table="userTable" class="table table-hover">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                </tr>
                <tr ng-repeat="user in $data">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                </tr>
            </tbody>
        </table>