Datatables: arrays and object data

17 April 2020, 3:36 pm by antelove

Datatables: arrays and object data
Datatables: arrays and object data

Data

Data 1 is complex, and all data is different. Accordingly, DataTables has a wealth of options which can be used to configure how it will obtain the data to display in the table, and how it processes that data.

Arrays

Arrays are easy to work with in a DataTable as the mapping between array elements to the column the data appears in is performed simply by the column index reading the array element value in that position. For example, the first table column maps to the first array element for the row's data source, etc.

Objects

Objects are great for intuitive use in a slightly different way from arrays. If you are actively working with the data through the API, objects can make obtaining a particular piece of data very easy as you need only use a property name, rather than remembering which array index that data is in (for example data.name, rather than data[0]).

Objects can also contain more information than is required for the DataTable display, which can be very useful for operating on the data (for example including a database primary key which is not visible to the end user).


Step by step setting datatables:

In <head> tag, add jQuery core

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

and datatables core

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>


In <body> tag, add table

<table id="table" class="display">

    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start Date</th>
            <th>Salary</th>
        </tr>
    </thead>

</table>


For usage arrays data,

before </body> tag, add arrays data

<script>

    /* https://datatables.net/manual/data/ */
    var data = [
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
        [
            "Garrett Winters",
            "Director",
            "Edinburgh",
            "8422",
            "2011/07/25",
            "$5,300"
        ]
    ]

</script>

with datatables script

<script>

    $(document).ready( function () {

        $( "#table" ).DataTable( {

            data: data

        } );

    } );

</script>


For usage objects data,

before </body> tag, add objects data

<script>

    var data = [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        },
        {
            "name":       "Garrett Winters",
            "position":   "Director",
            "salary":     "$5,300",
            "start_date": "2011/07/25",
            "office":     "Edinburgh",
            "extn":       "8422"
        }
    ]

</script>

with datatables script

<script>

    $(document).ready( function () {

        $( "#table" ).DataTable( {

            data: data,

            columns: [
                { data: 'name' },
                { data: 'position' },
                { data: 'office' },
                { data: 'extn' },
                { data: 'start_date' },
                { data: 'salary' }
            ]

        } );

    } );

</script>

Live Demo




No Action Title
1 arrays data (codesandbox.io)
2 objects data (codesandbox.io)
0 comment