在DataTables上显示Json数据

时间:2016-04-06 15:33:07

标签: javascript html json datatables

我正在尝试在我的Datatable上显示一些硬编码数据,但由于某种原因它没有显示任何内容。我有以下代码:

js文件

financialTargetData = [
    {"FirstName": 'Dan',
    "UserId": "1",
    "Sex": 'Male'},
    {"FirstName": "Peter",
     "UserId": "2",
     "Sex": "Male"}
];

attached()
{
    var that = this;
    $('#financialtargettable').DataTable({
        "data": that.financialTargetData,
        "lengthMenu": [[12, 24, 36, -1], [12, 24, 36, "All"]],
        "paging": true
    });
}

html文件

<template>
<div class="container-fluid">
    <div class="row">

        <div class="col-sm-12">
            <h2>Financial Targets</h2>

            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Data Table With Full Features</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
                    <table id="financialtargettable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>FirstName</th>
                                <th>UserId</th>
                                <th>Sex</th>
                                <!--<th>GrossWorkingDays</th>-->
                                <!--<th>NetWorkingDays</th>-->
                            </tr>
                        </thead>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->

        </div>

    </div>
</div>

我正在使用带有Aurelia框架的javascript ES6。不知道要提供什么更多的信息,但它没有给我任何错误,我只是不知道它是怎么回事......

非常感谢任何帮助。

由于

1 个答案:

答案 0 :(得分:0)

尝试将数据调整为如下所示:

financialTargetData = [
    ['Dan', 1, 'Male'],
    ["Peter", "2", "Male"]
];

以下是一个工作示例:http://plnkr.co/edit/1Aj3P7Lzr8HPBY7P5OKj?p=preview