jQuery Datatable 实用简单实例 目标：
使用jQuery Datatable构造数据列表，并且增加或者隐藏相应的列，已达到数据显示要求。同时，jQuery Datatable强大的功能支持：排序，分页，搜索等。
Query Datatable能良好支持数据完全加载到本地后构建数据列表，排序、分页、搜索等功能就会自带，不需要我们去关心，在此主要说明通过后台动态的加载数据，已达到在大数据面前提高效率的效果。
1. 通过后台进行分页
2. 通过后台进行排序
3. 通过后台进行搜索
具体使用方法：
1. 首先构建我们需要的数据列表，以及页面显示表格。
<table id="datatable" width="100%" border="1"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Operation</th> </tr> <thead> </table>
表格建立很简单，只需用将表格定义好id，以及表头定义好。
2. 我们可以到jQuery Datatable官网上去下载一份jQuery和jQuery Datatable的js库。https://datatables.net/examples/server_side/simple.html。
3. 然后将这两个文件引入到页面文件中，注意jQuery的库一定要在最前面，因为页面加载的有顺序，保证后面的扩展库能使用到jQuery。同时，请下载最新的jQuery Datatable版本，因为它的写法以及参数更加简洁，功能更加多。【注：参数区别会在附录写明】
4. 编写前端代码。我们是要使用Ajax对后台进行请求，因此在配置datatable时，加上{"serverSide": true}，已保证页面在加载时就请求后台，以及每次对datatable进行操作时也是请求后台。【附：如果想加上一点加载效果，可以增加{"processing": true}】。
配置请求后台URL：{"ajax": "load"}
5. 配置数据返回对应具体的列。在Datatable中，属性columns用来配置具体列的属性，包括对应的数据列名，是否支持搜索，是否显示，是否支持排序等。根据上述页面配置我们具体的列。如下：
$(document).ready(function() { $("#datatable").dataTable({ "processing": true, "serverSide": true, "ajax" : "load", "columns": [ {"data": "id", "bSortable": false}, {"data": "firstName"}, {"data": "lastName"} ] }); }); 第一列ID，设置为不允许排序。也可以增加不显示：{"visible": false}
6. 此时对于后台而言，返回的数据一定要按照一定规范。如下：
{ "draw": 2, "recordsTotal": 11, "recordsFiltered": 11, "data": [ { "id": 1, "firstName": "Troy", "lastName": "Young" }, { "id": 2, "firstName": "Alice", "lastName": "LL" }, { "id": 3, "firstName": "Larry", "lastName": "Bird" } // ...... ] } 参数解释：
draw:表示请求次数
recordsTotal:总记录数
recordsFiltered:过滤后的总记录数
data:具体的数据对象数组
7. 最后一列Operation，我们没有任何数据，用来放我们的通用操作列，如修改链接。 Datatable提供了自定义列columnDefs属性，他的值为数组对象，具体代码如下：
$(document).ready(function() { $("#datatable").dataTable({ "processing": true, "serverSide": true, "ajax" : "load", "columns": [ {"data": "id", "bSortable": false}, {"data": "firstName"}, {"data": "lastName"} ], "columnDefs": [ { "targets": [3], "data": "id", "render": function(data, type, full) { return "<a href='/update?id=" + data + "'>Update</a>"; } } ] }); }); targets：表示具体需要操作的目标列，下标从0开始
data: 表示我们需要的某一列数据对应的属性名
render:返回需要显示的内容。在此我们可以修改列中样式，增加具体内容
属性列表：data， 之前属性定义中对应的属性值
type， 未知
full, 全部数据值可以通过属性列名获取
具体效果图如下：
8. 我们再来看具体如何进行搜索、排序、分页。由于只是为了做demo，因此使用最简单的JDBC+Servlet的方式来实现。
首先我们来看，datatable给我们在做请求是传递过来的参数：
=============== Request Paramerters ================ draw: 1 columns[0][data]: id columns[0][name]: columns[0][searchable]: true columns[0][orderable]: true columns[0][search][value]: columns[0][search][regex]: false columns[1][data]: firstName columns[1][name]: columns[1][searchable]: true columns[1][orderable]: true columns[1][search][value]: columns[1][search][regex]: false columns[2][data]: lastName columns[2][name]: columns[2][searchable]: true columns[2][orderable]: true columns[2][search][value]: columns[2][search][regex]: false order[0][column]: 0 order[0]: asc start: 0 length: 10 search[value]: search[regex]: false _: 1399345292266 =============== Request Paramerters ================
其中有 今天的互联网、社交媒体的确强大，我们可以足不出户了解到9600公里（北京到LA的距离）之外的美国发生的事情。今天从Brain Madden大神那儿又扒到了一些经过提炼的关于Citrix Synergy 2014（Citrix每年一度的大会）的会议内容，不妨花个一分钟，了解一下Citrix的新举动。 全世界现在已经有1500家SP服务商采用XenApp方案提供DaaS服务了。（好牛B，1500家SP，反正具体有多少SP用是自己说了算。不过间接的也可以看出，Citrix还是死抱XenApp不放，对VDI仍有抵触情绪，谁让VDI市场玩家多、Citrix没有优势呢） 展示了内部版本的Citrix WorkSpace Service (Citrix的市场部实在太没有创意，名字直接抄袭Amazon AWS，小心Amazon律师找麻烦哦。另外正式产品需要到年底才能出来，其主要客户面对的是基于像AWS,Azure这样的公有云平台进行桌面交付（说白了就是可以让XenDesktop运行在公有云平台上。）另外，针对混合云的DaaS方案Avalon暂时还没有消息，可能已经夭折了。） 以上两条都是关于Citrix的DaaS信息，感觉极其混乱。 ShareFile拿下了4万5千家客户，拥有100万最终使用者 （知名度跟Dropbox,Box等还是有较大差距。另外国内不会有客户买，为什么？因为在中国没有服务器呗） Chromebook被Citrix重视，会推新版的Citrix Receiver。（不过两个多月前，VMware就已经跟Google合作做这个事情了，是不是晚了太久了） 代号X1的Receiver迎来MDX+HDX大整合，Citrix将利用原来的InstallBase大力拓展XenMobile的市场。为了证明这个策略是正确了，Citrix给了一个销售数字，XenMobile的8.5成用户买得是XenMobile企业版。（不过从华尔街的评论来看，Citrix的移动战略过于激进、市场反响却很一般。另外中国地区的XenMobile 销售还是以低版本的MDM版本为主，为啥？企业版太复杂太贵了呗） Citrix继续增强移动应用的研发，出了一个类似Evernote的WorxNotes作为微软Office OneNote的增强版。（继续抱着微软哥哥的毛大腿。只可惜不是志玲姐姐的） XenMobile 9就要来了。(版本号变得太快，期待10、11版本能够在年内发布) 发布Citrix Workspace Suite产品（其实就是以前的XenDesktop铂金版，里面包含了虚拟桌面、虚拟应用、移动管理、网络许可等）新瓶装旧酒而已。 上面是Citrix发的与VMware Horiozn 6 对比图。Citrix在功能上实在太强大了，秒杀都敏俊思密达好多回。估计Citrix的大侠们没有听过（或者装没有听过）VSAN,VCOPS，Mirage等VMware的软件，浮夸之余难免让人感觉有井底之蛙之嫌。 对VMware客户进行大降价，VMware View客户买Citrix可以打5折。Citrix称其为"拯救View计划"。（半价太不给力了，我强烈建议Citrix 免费送软件、送服务。要知道Citrix在中国的报价表比国内房地产的泡沫还要大，更是美国Citrix标准价格的N倍，即使是5折也比VMware贵好多。另外，要知道虚拟化项目里面，只有20%左右的成本是虚拟化软件厂商的。Citrix即使贱送自己，其他服务器、存储等相关成本也要比VMware高出很多啊 （vSphere、VSAN都随VMware Horizon产品一并提供了，不需要额外花钱，可以帮用户省大钱） Citrix Mac Receiver终于要推出一些新功能了 （Citrix需要特别感谢VMware推出的Horizon Mac客户端，鞭策着Citrix向前进。如果你不了解相关情况，可以直接回复 14，查看以前的消息 ） 在Citrix大会之前发布的Citrix XenDesktop 7.5 在功能上几乎毫无新意。而被大量客户吐槽围攻后，Citrix终于在这次的大会上承诺针对XenDesktop 7.5产品，发布XenApp 6.5到XenDesktop 7.5的迁移工具技术预览版 （被市场重重的甩了几记耳光之后，才推出XenApp迁移方案。如果不了解之前的相关情况，还是回复 14 。） 本文内容来源Brain Madden网站及互联网，标色内容为个人观点，想了解Brain Madden原文，请点击"阅读原文"。另外，BrainMadden原文下面的评论几乎都是吐槽，建议各位看官细细品位。 本文来自微信订阅号"最终用户云计算"，微信号是 "CHINAEUC" 写文章需要查各种资料、还要有灵感，并不容易。如果觉得文章有用，希望您关注我的微信并帮忙转发到您的朋友圈。点击文章标题下方的小字"最终用户计算"即可完成关注。 回复"目录"可以查看过往文章。回复"JD"，可以查看最新的虚拟化、移动化领域的工作机会消息，并可以得到员工内部推荐机会。 51CTO是除微信公众平台之外的唯一信息发布网站。
没有评论:
发表评论