Datatables Fill Table From Json Or Js Array&objects

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. I have this kind of data: dataArra

Solution 1:

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" },
        ]
    } );
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script><linkhref="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"rel="stylesheet"/><tableid="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>