Question

我有一个用jquery（html）填充的表。为了限制显示行，我一直在尝试将此表更改为数据表。

我有这种数据：

dataArray = [{
    id: 1,
    props: {
        abc: 123,
        def: 456,
        ghi: 789
    },
    features: {
        zxc: 01,
        cvb: 02,
        nmn: 03
    }
},
{
    id: 2,
    props: {
        abc: 002,
        def: 258,
        ghi: 965
    },
    features: {
        zxc: 52,
        cvb: 21,
        nmn: 75
    }
},
{
    id: 3,
    props: {
        abc: 352,
        def: 365,
        ghi: 778
    },
    features: {
        zxc: 21,
        cvb: 45,
        nmn: 03
    }
},

]

可以说，我要显示 id ， abc （来自道具）， zxc （来自功能）。

我试图通过转换JSON在数据表中使用，但没有用。我不确定如何在数据表上显示此数据。

此dataArray在应用程序内部更新，不是外部数据。

能帮我吗？

Answer 1

据我所知，您需要将JSON属性及其对应的值更改为字符串。如果您需要对整数进行任何算术运算，则可以始终parseInt()。然后在您的DataTable()调用中指定data和columns属性，如下所示：

var dataArray = [{
    "id": "1",
    "props": {
        "abc": "123",
        "def": "456",
        "ghi": "789"
    },
    "features": {
        "zxc": "01",
        "cvb": "02",
        "nmn": "03"
    }
},
{
    "id": "2",
    "props": {
        "abc": "002",
        "def": "258",
        "ghi": "965"
    },
    "features": {
        "zxc": "52",
        "cvb": "21",
        "nmn": "75"
    }
},
{
    "id": "3",
    "props": {
        "abc": "352",
        "def": "365",
        "ghi": "778"
    },
    "features": {
        "zxc": "21",
        "cvb": "45",
        "nmn": "03"
    }
},
]

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataArray,
        "columns": [
            { data: "id" },
            { data: "props.abc" },
            { data: "features.zxc" },
        ]
    } );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Props</th>
            <th>Features</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Props</th>
            <th>Features</th>
        </tr>
    </tfoot>
</table>

来自JSON或JS Array＆Objects的DataTables填充表

1 个答案: