DataTables JS表格组件使用
显示或隐藏某列
DataTables JS表格组件使用
单行选中 并删除选中行
html代码中需添加个删除的函数
<script> $(document).ready(function() { table = $('#example').DataTable(); $('#example tbody').on( 'click', 'tr', function () { if ( $(this).hasClass('selected') ) { $(this).removeClass
DataTables JS表格组件使用
多行选中 , aardio获取选中行数量
如果想要能多选行, 那么需要在js里修改 , 顺便我们在aardio里先定义一个函数用来传递数量
wb.external = { getLen = function(len){ console.log(len) } };<script> $(document).ready(function() { table = $('#e
DataTables JS表格组件使用
手动添加多行数据: table.rows.add( ).draw();
同上 , 利用表来做容易一点
DataTables JS表格组件使用
手动添加一行数据:
需要用到dataTables的返回table对象 , 利用table.row.add( [1,2,3,4,5,6] ).draw();
所以我们首先去html里面把table对象弄出来.
<script> $(document).ready(function() { table = $('#example').DataTable(); } ); </script>然后就可以在aardio中利用web.doScrip
DataTables JS表格组件使用
你也可以这样来玩, 随机下试试
DataTables JS表格组件使用
我知道上面的代码看起来好傻, 传递了个json格式字符串过去, 我们实际用的时候肯定不会是对字符串进行操作, 一般都是弄个table表来存储数据, 然后转换table为json字符串
那么,这时候用到web.json了
import web.kit.form; var wb = web.kit.form(mainForm); var demoTable = { { "Tiger Nixon", "System Architect", "Edinburgh",
DataTables JS表格组件使用
用aardio来提供数据给它
这时候需要aardio特有的external来帮助了
import web.kit.form; var wb = web.kit.form(mainForm); var datastr = /**** [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
DataTables JS表格组件使用
ajax方式, 一次读取全部数据
DataTables JS表格组件使用
用ajax通过服务器返回数据
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="../html/datatables.min.css"/> <script type="text/javascript" src="../html/datatables.min.js"></script> </head> <body
DataTables JS表格组件使用
用js数组来提供数据
DataTables JS表格组件使用
加个滚动条吧
DataTables JS表格组件使用
自定义渲染: 利用render , 因为我对js不熟, 下面的代码是我想要渲染age那一列 , 将年纪大于50的标注为红色显示. 看到前面的三个逗号 ,,, 这个意思是前面三个我都不管, 就渲染第四个age , 后面也有三个 ,,, 因为必须把所有的列都表示出来才行. 也许有更简单的办法, 但是我不会......
<script> $(document).ready(function() { $('#example').DataTable({ columns: [
DataTables JS表格组件使用
保存状态, 利用html的特性, 可以保存排序和当前页码
$(document).ready(function() { $('#example').DataTable( { stateSave: true } ); } );
DataTables JS表格组件使用
隐藏某列, 下面把(2)office和(3)age隐藏掉
$(document).ready(function() { $('#example').DataTable( { "columnDefs": [ { "targets": [ 2 ], "visible": false, "searchable": false },
DataTables JS表格组件使用
多重条件排序: 下面代码按照(3)age主排序, 而(4)日期为次排序
当然如果手动的话, 先点主排序那个列, 然后按住键盘上shift键,然后点击鼠标左键选择第二配许列
<script> $(document).ready(function() { $('#example').DataTable({ "order": [[ 3, "desc" ]], columnDefs: [ { targets: [ 3 ],
DataTables JS表格组件使用
默认排序列设置, 列号是从0开始算, 以下第三个是age
DataTables JS表格组件使用
如果不想添加分页,排序功能