datatable入门
datatable本地显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.2-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="datatable/dataTables.bootstrap.min.css">
<title>Datatable</title>
<script type="text/javascript" src="jquery-2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatable/dataTables.bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div style="width:90%;margin:0 auto;">
<table id="mTable" class="table table-striped "></table><!-- table-bordered -->
</div>
<script type="text/javascript">
var language_json = {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
var dataSet = [
['2017-12-12','12','14'],
['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],['2017-12-12','12','14'],
];
var dataSet2 = [
{ "time": "2017-3-3", "num1": "33", "num2": "13",},
{ "time": "2017-3-3", "num1": "33", "num2": "13",},
{ "time": "2017-3-3", "num1": "33", "num2": "13",},
]
$(document).ready(function() {
// $('#mTable').dataTable( {
// language: language_json,
// ordering: false,
// searching: false,
// pagingType:"full_numbers",
// "lengthChange": false,
// "data": dataSet,
// "columns": [
// { "title": "时间", },
// { "title": "新增预约挂号数" },
// { "title": "累计预约挂号数" },
// ]
// } );
// dataSet2的方法
$('#mTable').dataTable( {
language: language_json,
ordering: false,
searching: false,
pagingType:"full_numbers",
"lengthChange": false,
"data": dataSet2,
"columns": [
{ "title": "时间", "data":"time",},
{ "title": "新增预约挂号数","data":"num2", },
{ "title": "累计预约挂号数","data":"num1", },
]
} );
} );
</script>
</body>
</html>
language: language_json,//中文自定义
ordering: false,//不排序
searching: false,//不显示右上角搜索
pagingType:"full_numbers",//显示首页和最后一页
"lengthChange": false,//去掉左上角设置每页多少条。
"data": dataSet2,//本地加载数据方式
"columns": [ //data的名字，就是每条的dataSet里面设置的名字
{ "title": "时间", "data":"time",},
]
参考资料：
datatable初次使用笔记
https://www.cnblogs.com/shizqiang/p/6515308.html
datatable四种数据源
https://www.iteblog.com/archives/1257.html#HTML_DOM_sourced_data
datatable简单实用
https://www.tuicool.com/articles/NBBnum
我的网盘：https://pan.baidu.com/s/1pMdLRqb 密码：y9hr
