jQuery表格插件datatables用法总结（下）

使用总结：
要导入CSS 和 JS

<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>

2. 定义table

<table class="table table-striped" id="giatable">
<thead>
<tr>
<th>GIA</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>

3. 使用datatable

<script>
$(document).ready(function () {
$('#giatable').dataTable({
"aaSorting": [
[0, ""] //默认以第一列升序排列，"" 可以关掉排序
],
"aoColumnDefs": [
{"bSearchable": true, "bVisible": true, "bSortable": true, "aTargets": [0, 1, 2, 3, 4, 7, 8]}, //第0 1 2 3 4 7 8 可以搜索可排序
{"bSortable": false, "aTargets": [9, 10]} //第9 10 不可排序
],
"bAutoWidth": false, //自适应宽度
// "aaSorting": [[1, "asc"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "当前结果内搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
}
})
});
</script>