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

最新推荐文章于 2023-12-18 22:42:50 发布

兵工厂三剑客

最新推荐文章于 2023-12-18 22:42:50 发布

阅读量359

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/SCGH_Fx/article/details/108670202

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引入的相关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);
                }
            }
        })