html使用jquery.datatable和dotjs填充表格数据。

100 阅读 0 评论 66 点赞

我是靠谱客的博主神勇鞋子，这篇文章主要介绍html使用jquery.datatable和dotjs填充表格数据。，现在分享给大家，希望可以做个参考。

引入的相关js和css文件：

css

复制代码

1
2
3
4
5
<!-- Start datatable css -->
<link rel="stylesheet" type="text/css" href="../../assets/css/datatable/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../../assets/css/datatable/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="../../assets/css/datatable/responsive.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../assets/css/datatable/responsive.jqueryui.min.css">

js:

复制代码

1
2
3
4
5
6
<!-- Start datatable js -->
<script src="../../assets/js/datatable/jquery.dataTables.js"></script>
<script src="../../assets/js/datatable/jquery.dataTables.min.js"></script>
<script src="../../assets/js/datatable/dataTables.bootstrap4.min.js"></script>
<script src="../../assets/js/datatable/dataTables.responsive.min.js"></script>
<script src="../../assets/js/datatable/responsive.bootstrap.min.js"></script>

复制代码

1
2
3
<!--dotjs-->
<script src="../../assets/js/dot/doT.js" type="text/javascript"></script>
<script src="../../assets/js/dot/doT.min.js" type="text/javascript"></script>

表格的html：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="col-12 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">文件信息</h4>
<div class="data-tables datatable-dark">
<table id="dataTable2" class="text-center">
<thead class="text-capitalize">
<tr>
<th>权限</th>
<th>用户</th>
<th>用户组</th>
<th>大小</th>
<th>修改日期</th>
<th>副本数</th>
<th>块大小</th>
<th>名称</th>
<th></th>
</tr>
</thead>
<tbody id="tableRows">
</tbody>
</table>
</div>
</div>
</div>
</div>

dotjs数据模板：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--数据模板-->
<script type="text/x-dot-template" id="sourceTableRows">
{{~it.responseContent.files:item:index}}
<tr role="row">
<td tabindex="0" class="sorting_1">{{=item.permission}}</td>
<td>{{=item.owner}}</td>
<td>{{=item.group}}</td>
<td>{{=item.size}}</td>
<td>{{=item.modifyTime}}</td>
<td>{{=item.replication}}</td>
<td>{{=item.blockSize}}</td>
<td class="hadoop-td-text"><a class="hadoop-td-cur" isdir="{{=item.dir}}" onclick="enterNewDir(this)">{{=item.name}}</a></td>
<td><i class="ti-trash"></i></td>
</tr>
{{~}}
</script>

点击按钮刷新表格数据：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ajaxPost("/bigdata/files/enterDirectory",{dir:hdfspath},function (response) {
if (response){
if (response.responseType =='Success'){
$('#currentDir').val(response.responseContent.parantPath);
var sourceTableTmp = $('#sourceTableRows').html();
var doString = doT.template(sourceTableTmp)(response);
dttable = $('#dataTable2').dataTable();
dttable.fnClearTable(); //清空一下table
dttable.fnDestroy(); //还原初始化了的datatable
$('#tableRows').html('');
$('#tableRows').html(doString);
$('#dataTable2').dataTable();
}else {
showTips(response.responseContent);
}
}
})