来自JSON或JS Array& Objects的DataTables填充表 [英] DataTables fill table from JSON or JS Array&Objects

问题描述

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

I have a table that I was filling it with jquery(html). In order to limit displaying rows I have been trying to change this table to datatables.

我有这种数据:

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 (来自功能).

Lets say, I would like to display id, abc(from props), zxc(from features).

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

I tried to use in datatable by converting JSON but it didnt work. I am not sure how I can display this data on the datatable.

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

This dataArray is updated inside of the app, it is not external data.

你能帮我吗?

推荐答案

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

You will need to change your JSON properties and their corresponding values to strings as far as I know. If you need to do any arithmetic on the integers you could always parseInt(). Then in your DataTable() call specify data and columns properties like so:

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填充表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！