学而实习之 不亦乐乎

jquery:DataTable 基本用法

2020-12-08 08:33:06

本文是建立在已经引入 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>