bootstrap-table.js多种方法填充单元格数据

最新推荐文章于 2024-07-27 22:57:02 发布

wisdom_bo

最新推荐文章于 2024-07-27 22:57:02 发布

阅读量1.6w

点赞数 1

分类专栏： web前端文章标签：自动填充表格 table tbody thead

本文链接：https://blog.csdn.net/hh12211221/article/details/71246185

版权

web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：

方法一：全部自动填充table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript"
            src="js/bootstrap-table.js"></script>
    <script type="text/javascript"
            src="js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="mdsd-content">
    <div class="panel panel-info" style="background: none;">
        <div class="panel-body" style="width: 100%;">
            <table id="table-javascript"
                   class="table table-hover table-responsive "></table>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#table-javascript').bootstrapTable({
        method : 'get',
        url : ContextUtil.zutnlp_spark_info,
        cache : false,
        pagination : true,
        root : 'workers',
        total : 'totalElements',
        sidePagination : 'server',
        columns : [ {
            field : 'address',
            title : 'Address',
            align : 'center',
            valign : 'middle'
        }, {
            field : 'state',
            title : 'State',
            align : 'center',
            valign : 'middle',
        } ]
    });
    $(window).resize(function() {
        $('#table-javascript').bootstrapTable('resetView');
    });
</script>
</body>
</html>

方法二：表头这一栏固定，自动填充主体部分<tbody>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript"
            src="js/bootstrap-table.js"></script>
    <script type="text/javascript"
            src="js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="panel panel-info" style="background: none;">
    <div class="panel-body" style="width: 100%;">
        <table id="table-javascript"
               class="table table-hover table-responsive ">
            <thead>
            <th style="text-align: center; vertical-align: middle;"><div
                    class="th-inner ">Address</div></th>
            <th style="text-align: center; vertical-align: middle;"><div
                    class="th-inner ">States</div></th>
            <th style="text-align: center; vertical-align: middle;"><div
                    class="th-inner ">Cores</div></th>
            <th style="text-align: center; vertical-align: middle;"><div
                    class="th-inner ">CoresUsed</div></th>
            <th style="text-align: center; vertical-align: middle;"><div
                    class="th-inner ">Memory</div></th>
            <th style="text-align: center; vertical-align: middle;"><div
                    class="th-inner ">MemoryUsed</div></th>
            </thead>
            <tbody id="dataTable"></tbody>
        </table>
    </div>
</div>
<script type="text/JavaScript">
    $(function() {
        $.ajax({
                    url : ContextUtil.zutnlp_spark_info,
                    type : "GET",
                    success : function(data) {
                        //调用创建表和填充动态填充数据的方法.
                        createShowingTable(data)
                    },
                    error : function() {
                    }
                });
    });
    //动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格
    function createShowingTable(data) {
        //获取后台传过来的jsonData,并进行解析

        //此处需要让其动态的生成一个table并填充数据
        var tableStr = "";
        var len = data.workers.length;
        for (var i = 0; i < len; i++) {
            tableStr = tableStr + "<tr><td align='center'>" + data.workers[i].address
                    + "</td>" + "<td align='center'>" + data.workers[i].state + "</td>"
                    + "<td align='center'>" + data.cores + "</td>"
                    + "<td align='center'>" + data.coresUsed + "</td>"
                    + "<td align='center'>" + data.memory + "</td>"
                    + "<td align='center'>" + data.memoryUsed + "</td></tr>";
        }
        //将动态生成的table添加的事先隐藏的div中.
        $("#dataTable").html(tableStr);
    }
</script>
</body>
</html>