简单的Ajax加载数据到表格中

最新推荐文章于 2022-11-23 23:15:24 发布

原创最新推荐文章于 2022-11-23 23:15:24 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

本文介绍了如何通过Ajax技术从服务器获取数据，并将这些数据动态加载到HTML表格中，以实现数据的实时更新和页面的无刷新加载。同时，提到了利用CSS美化表格的方法，确保数据展示的清晰和美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yk</title>
    <!--注意引用的顺序，《script》Vue一定要在Iview的前面-->
    <link rel="stylesheet" href="./vueIview/iview.css">
    <script src="./vueIview/vue.min.js"></script>
    <script src="./vueIview/iview.min.js"></script>
    <script type="text/javascript" src="vueIview/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/table_1.css" />
</head>
<body>
<div id="gh">
<i-table border :columns='columns1' :data='data1'></i-table>
</div>
<script>
$(function (id,callback) {
    $.ajax({
        type:"GET",
        dataType:"json",
        url: "自己请求数据的网址",
        success:function (json) {
            let data=json.data;
            let columns=[
                {
                    title: "姓名",
                    key: "empname",
                    className:"table_type"
                },
                {
                    title: "工号",
                    key: "empno"
                },
                {
                    title: "有效日期",
                    key: "valid_date"
                },
                {
                    title: "工站代码",
                    key: "position_code"
                },
                {
                    title: "失效日期",
                    key: "invalid_date"
                },
            ]
            setTableData(columns,data)
            callback(data);
        }
    }) 
    function setTableData(columns,data) {
        var main = {
            data() {
                return {
                    columns1:columns,
                    data1:data
                }
            }
        }
        var Component = Vue.extend(main)
        new Component().$mount("#gh")
    }
})
</script>
</body>
</html>

用CSS给表格设置格式：

#gh{margin: 30px;}
.ivu-table td{text-align: center;}
.ivu-table th{text-align: center;}
.ivu-table td.table_type{
    background: #AA22FF;
    color: #e6e6e6;

运行如下：