AngularJS的ngTable的使用方法

ng-table是一个AngularJS用来绑定数据到表格中，可以完成排序、分页和为表格过滤数据的组件。

使用步骤如下：

• 首先创建新的应用程序并打开页面，并在页眉部分添加以下的angularjs参考文件。

  < script src =“http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”> </ script >

• 在页面的标题部分添加下面的ng-table css和脚本文件。

  < link rel =“stylesheet” href =“https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css”>
  
  < script src =“https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js”> </ script >

• 在angularjs中添加ngTable和ngTableParams引用，同时声明模块和控制器，如下所示

  var app = angular.module（“ngtableApp”，[ “ngTable” ]）;
  
  app.controller（“ngtableCtrl”，函数（$ scope，ngTableParams）{
  }）;

• 在控制器内写其使用方法，如下所示：

  var self = this;
  self.getRankList = function(){
     self.tableParams = new NgTableParams({
         page: 1,//展示第一页
         count: 15,//每页有15个数据项
         url: ''
     }, {
        counts: [],
        getData: function (params) {
           //电影点击排行榜
            var data = {
            "action": "getRankList",
            "token": util.getParams("token")
         }
         var paramsUrl = params.url();
         data.per_page = paramsUrl.count -0;
         data.page = paramsUrl.page -0;
         data = JSON.stringify(data);
         return $http({
             method: $filter('ajaxMethod')(),
             url: util.getApiUrl('movielib', '', 'server'),
             data: data
         }).then(function successCallback(data, status, headers, config) {  
             if(data.data.rescode == 200){
                 if(data.data.data.Total == 0) {
                     self.noData = true;
                 };
                 params.total(data.data.data.Total);
                 return data.data.data.data;
              }else{
                 alert(data.rescode + ' ' + data.errInfo);
              }
         }, function errorCallback(response) {
              console.log('发送失败了')
              alert('服务器出错');
        }).finally(function(value) {
         self.loading = false;
        })
      }
  });
  
  

  
  
• 最后在html里写这部分即可

  <div ng-controller="rankListController as rankList" ng-init="rankList.init()" class="col-sm-9 page col-right">
      <a>
          <strong>
              <i class="glyphicon glyphicon-import"></i>
              已入库
          </strong>
      </a>
      <hr>
      <table class="table table-hover table-condensed" ng-table="rankList.tableParams">
          <thead>
              <tr>
                  <th style="width: 80px">序号</th>
                  <th>名称</th>
                  <th>类型</th>
                  <th>产地</th>
                  <th>点击量</th>
              </tr>
          </thead>
          <tbody>
              <div ng-show="rankList.loading">loading...</div>
              <tr ng-repeat="movie in $data track by $index">
                  <td data-title="'序号'" >{{movie.Seq}}</td>
                  <td data-title="'名称'" >{{movie.Name[rankList.defaultLang]}}</td>
                  <td data-title="'类型'" ><span ng-repeat="category in movie.CategoryName track by $index">{{category[rankList.defaultLang]}}</span> </td>
                  <td data-title="'产地'" ><span ng-repeat="location in movie.LocationName track by $index">{{location[rankList.defaultLang]}}</span> </td>
                  <td data-title="'点击量'">
                      {{movie.Amount}}
                  </td>
              </tr>
          </tbody>
      </table>
      <div ng-show="rankList.noData">查无数据</div>
  </div>

  以上是我使用ng-table的步骤，可能大家的使用场景不同，使用的方法也不同，欢迎交流