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

引入的相关js和css文件：

css

<!-- 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:

<!-- 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>

<!--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：

<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数据模板：

<!--数据模板-->
<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>

点击按钮刷新表格数据：

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);
}
}
})

最后

以上就是神勇鞋子为你收集整理的html使用jquery.datatable和dotjs填充表格数据。的全部内容，希望文章能够帮你解决html使用jquery.datatable和dotjs填充表格数据。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。