jquery插件datatables,如何使用?
发布于 作者:苏南大叔 来源:程序如此灵动~
其实也是看laravel学院的捐款页面想到的这个话题,一个普通的table引用这个jquery插件后,立刻变得无比强大。可搜索,可分页,可排序。是不是很心动?当然了,你的table必须是标准的写法。例如thead和tbody都不能省略哦。下面是laravel学院的截图及代码。大家照猫画虎即可。
网址:
http://laravelacademy.org/donate-us
HTML:
<table id="donate-table" class="table table-bordered">
<thead>
<tr>
<th>用户</th>
<th>时间</th>
<th>金额</th>
<th>支付方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>微信网友</td>
<td>2017-02-23</td>
<td>8.00</td>
<td>微信转账</td>
</tr>
<tr>
<td>微信网友</td>
<td>2017-02-22</td>
<td>32.00</td>
<td>微信转账</td>
</tr>
<tr>
<td>微信网友</td>
<td>2017-02-15</td>
<td>8.00</td>
<td>微信转账</td>
</tr>
</tbody>
</table>
JS和css:
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#donate-table').DataTable({
'iDisplayLength': 25,
'order': [[1, 'desc']]
});
});
</script>
文档及说明:https://datatables.net/


