对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid。相关的介绍可以参考http://zhenghaoju700.blog.163.com/blog/static/135859518201521343938228/

对于一般的项目来说 简单的显示表格用bootstrap的相关插件或者自己写也行,对于分页,我尝试了用smart-tablel这个组件来写的,效果感觉还是不错的。其他的组件本人还没有亲自试验过。嘿嘿...

效果截图:

下面是实现的主要方式:

1.安装

 bower install angular-smart-table

2.加入module

 angular.module('myApp',['smart-table']

3.HTML

 <table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th>email</th>
</tr>
<tr>
<th>
<input st-search="'firstName'" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>

4.JavaScript

 app.controller('paginationCtrl', ['$scope', function (scope) {
var
nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez']; function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000; return{
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
} scope.itemsByPage=15; scope.rowCollection = [];
for (var j = 0; j < 200; j++) {
scope.rowCollection.push(createRandomItem());
}
}]);

感觉其实也很简单,我也只是初学,给自己留个备忘吧,还有其他的组件,慢慢学着使用。

Angularjs 表格插件的使用的更多相关文章

  1. angularJS 常用插件指令

    长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...

  2. JQuery表格插件DataTables 当前页合计功能

    公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...

  3. [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  4. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  5. Dynatable – 基于 HTML5 & jQuery 的交互表格插件

    Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的 ...

  6. datatables 前端表格插件 增删改查功能

    官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...

  7. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  8. 自己写的表格插件autotable

    自己写的表格插件autotable 作者:田想兵,个人网址:http://www.lovewebgames.com 这个表格插件所完成的功能是:ajax请求数据,然后动态绑定到指定表格下,格式化,分页 ...

  9. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

随机推荐

  1. python独立环境——virtualenv

    安装: pip3 intall virtualenv   创建独立运行环境: 1. 进入项目文件夹根目录 2. 创建环境 Mac:myproject michael$ virtualenv --no- ...

  2. C/C++ -- Gui编程 -- Qt库的使用 -- 使用自定义类

    1.新建空Qt工程 2.新建C++类HelloQt 3.新建ui文件,添加部件,重命名主窗体(对话框)类名HelloQt,构建生成ui头文件 4.修改头文件helloqt.h #ifndef HELL ...

  3. ES6-Object‘s Extends

    依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...

  4. nginx配置负载均衡,tomcat宕机响应缓慢,自动切换的问题

    用了nginx负载均衡后,在两台tomcat正常运行的情况下,访问http://localhost 速度非常迅速,通过测试程序也可以看出是得到的负载均衡的效果,但是我们试验性的把其中一台tomcat( ...

  5. ASP.NET Core 中的日志记录

    目录 内置日志的使用 使用Nlog 集成ELK 参考 内置日志的使用 Logger 是 asp .net core 的内置 service,所以我们就不需要在ConfigureService里面注册了 ...

  6. [笔记] Python 图片转字符画

    一.介绍 用Python 代码完成图片转字符画 二.python 环境 Python 3.6.6 pillow 5.1.0  Python 图像处理库, 需要另外安装 三.原理 gray = 0.21 ...

  7. Spring配置Quartz任务调度、及 ThreadPool 线程池

    ONE.除了引入 Spring 相关的 jar 包,还要引入 Quartz 的 jar 包 <dependency> <groupId>org.springframework& ...

  8. 快排,归并和Shell排序

    快速排序 快速排序的执行流程: (1) 先从数列中取出一个数作为基准数. (2) 将比这个数大的数全放到它的右边,小于或等于它的数全放到它的左边. (3)再对左右区间重复第二步,直到各区间只有一个数. ...

  9. 解决Tomcat出现内存溢出的问题

    Tomcat服务器出现java.lang.OutOfMemoryError:Java heap space异常 1.可能是程序错误,比如:程序陷入死循环 2.堆内存太小 一般情况下,java创建的对象 ...

  10. c#基础学习(0724)之可变参数、ref和out

    params可变参数,无论有几个参数,必须出现在参数列表的最后,可以为可变参数直接传递一个对应类型的数组 #region 可变参数 //1.如果方法有多个参数,可变参数可以作为最后一个参数 //2.可 ...