jquery:DataTable 基本用法
本文是建立在已经引入 JS 文件的情况下。
一、使用 DataTable
1.在 Table 中使用
$('#table').DataTable({'bDestroy': true, 'bStateSave': true});
2.去掉默认功能
$(function(){
$('#table').dataTable({
"searching" : false, //去掉搜索框方法一
"bFilter": false, //去掉搜索框方法二
"bSort": false, //禁止排序
"paging": false, //禁止分页
"info": false //去掉底部文字
});
});
3.设置排序规则
$(function(){
$('#table').dataTable({
"aaSorting": [[ 4, "desc" ]] //以序号为4也就是第5列进行降序排列
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0] }] //初始化datatable,但对序号为0列的列不进行排序,别的列均可进行排序
});
});
二、修改样式
常用的 table 的 class 如下:
class="table" 原始样式
class="table table-striped" 隔行条纹
class="table table-bordered" 每个元素都有边框
class="table table-hover" 鼠标滑过变色
<table id="fwqlist" class="table table-hover table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>当前状态</th>
<th>今日峰值</th>
<th>今日均值</th>
</tr>
</thead>
</table>