angularjs ng-table插件

Reading time ~2 minutes

ngTable是一个基于AngularJS的directive设计一个表格项目,支持基本的表格操作,分页,排序,异步加载等功能 API,demo什么的请参考官网,http://ng-table.com。

//引入插件js以及css样式

引入ngTable js/css

<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css">
<script src="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.js"></script> 

//使用方法

控制器首先注入 ngtable

angular.module("myApp", ["ngTable"]); 


 var self = this;
 var data = [{name: "Moroni", age: 50}];


 self.tableParams =  new NgTableParams({
                count: 10, //每页显示数量
                sorting: {age: "desc"} //默认排序的方式
            }, {
                paginationMaxBlocks: 5,
                paginationMinBlocks: 2,
                data: data,
                counts: false
            });
//首先ng-table的值是控制器部分实力化的名字 
<table ng-table="tableParams" class="table"> 

用ng-repeat指令实现数据循环输出 $data也可換成控制器後面自定義的變量
    <tr ng-repeat="user in $data">

filter 是過濾数据内容
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
            
</td>
        <td title="'Age'" filter="{ age: 'number'}" sortable="'age'"> 
排序使用内置的softtable 裡面的值就是后面控制器部分定义的 name
            
</td>
    </tr>
</table

虽然现在只是用到了一小部分的插件方法,从使用之后感觉确实ng-table这款插件功能相当强大,像搜索、排序、分页、每页表格显示数目等都有。