DataTables控件-详解附插图
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
datatables表格
并不是所有的后台开发都有美工和前端工程师来配合做页面，为了显示数据并有一定的美感，jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭，当然对于专业的前端开发者来说它更是锦上添花！DataTables提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化、统计等强大功能。
工作中对程序员的学习模式才深有体会，不是从入门到精通，而是从会用到了解。对于我来说，基本都是拿到一个知识先做个东西出来，再来细细品味个中的细节，然后再慢慢理解。从粗到细，从大到小，呵呵，这种"逆向学习"的模式估计也只在互联网常见了。
使用前要引入datatables的相关包：
datatables表格展示以及数据源方式都有很多，这里用的是最常见的后端返回给前端的json格式的数据源，并且前端html里指定列的title。
后端的数据可以如下：
app.get('/test/index', function(req, res) {
var data = [{name:'xiaojie',age:24,job:'developer',description: 'humours'},{},{},{}]; //格式像这样,数据省略
res.json({data:data});
});
html里仅仅声明一个table的框架：
| 姓名 | 年龄 | JOB | 描述 | 操作 |
|---|
重头戏是js，这里有功能强大的字段，待我慢慢道来。
首先初始化一个datatables，最基本的就这样：
$(document).ready(function() {
$('#datatables').dataTable( {
} );
} );
datatables太强大，记录起来真是无处下手。先来看个例子，然后再做详细介绍：