This example shows How to display jquery datatable using json data
In this example we are going to demonstrate how to
To start this we will start with loading the css and js required to display datatable.
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" media="all" />
<div class="mt-5">
<table class="table table-striped table-bordered display nowrap" id="statewise_latest"></table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>A table tag with id is added to HTML for the display. The following datatable rendering code is added the below html.
The json data is passed to data attribute. But passing the data alone will not make the table render correctly. The columns need to be mapped to json object elements. columns attribute has a property data which is facilitate this mapping.
var indiaData = <?php echo $indiaData ?>;
function render(data, type, row, meta){
if(type === 'display'){
data = '<a href="/en/state/?id=' + row.id + '">' + data + '</a>';
}
return data;
}
$('#statewise_latest').DataTable({
data: indiaData.statewise_latest,
columns: [
{ "data": "name", "name": "State", "title": "State", "render": render },
{ "data": "cnf_ind_count", "name": "Confirmed", "title": "Confirmed" },
{ "data": "death_count", "name": "Deaths", "title": "Deaths" },
{ "data": "cured_count", "name": "Cured", "title": "Cured" }
],
rowReorder: {
selector: 'td:nth-child(2)'
},
responsive: true,
"order": [[ 1, "desc" ]]
});Column can also be rendered with this setup. In the above example, I have also added a render method to display the first column as a link. It uses the information in the row. Along with this we have ordered the data by second column by default.
The json data used in this example to help understand the mapping better.
{
"statewise_latest": [
{
"cnf_for_count": 0,
"death_count": 15,
"name": "Andhra Pradesh",
"id": 1,
"cured_count": 42,
"cnf_ind_count": 603
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Arunachal Pradesh",
"id": 2,
"cured_count": 0,
"cnf_ind_count": 1
},
{
"cnf_for_count": 0,
"death_count": 1,
"name": "Assam",
"id": 3,
"cured_count": 9,
"cnf_ind_count": 35
},
{
"cnf_for_count": 0,
"death_count": 2,
"name": "Bihar",
"id": 4,
"cured_count": 37,
"cnf_ind_count": 85
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Chhattisgarh",
"id": 5,
"cured_count": 24,
"cnf_ind_count": 36
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Goa",
"id": 6,
"cured_count": 6,
"cnf_ind_count": 7
},
{
"cnf_for_count": 0,
"death_count": 48,
"name": "Gujarat",
"id": 7,
"cured_count": 88,
"cnf_ind_count": 1272
},
{
"cnf_for_count": 0,
"death_count": 3,
"name": "Haryana",
"id": 8,
"cured_count": 43,
"cnf_ind_count": 225
},
{
"cnf_for_count": 0,
"death_count": 1,
"name": "Himachal Pradesh",
"id": 9,
"cured_count": 16,
"cnf_ind_count": 38
},
{
"cnf_for_count": 0,
"death_count": 2,
"name": "Jharkhand",
"id": 10,
"cured_count": 0,
"cnf_ind_count": 33
},
{
"cnf_for_count": 0,
"death_count": 13,
"name": "Karnataka",
"id": 11,
"cured_count": 92,
"cnf_ind_count": 371
},
{
"cnf_for_count": 0,
"death_count": 3,
"name": "Kerala",
"id": 12,
"cured_count": 255,
"cnf_ind_count": 396
},
{
"cnf_for_count": 0,
"death_count": 69,
"name": "Madhya Pradesh",
"id": 13,
"cured_count": 69,
"cnf_ind_count": 1355
},
{
"cnf_for_count": 0,
"death_count": 201,
"name": "Maharashtra",
"id": 14,
"cured_count": 331,
"cnf_ind_count": 3323
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Manipur",
"id": 15,
"cured_count": 1,
"cnf_ind_count": 2
},
{
"cnf_for_count": 0,
"death_count": 1,
"name": "Meghalaya",
"id": 16,
"cured_count": 0,
"cnf_ind_count": 11
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Mizoram",
"id": 17,
"cured_count": 0,
"cnf_ind_count": 1
},
{
"cnf_for_count": 0,
"death_count": 1,
"name": "Odisha",
"id": 19,
"cured_count": 21,
"cnf_ind_count": 60
},
{
"cnf_for_count": 0,
"death_count": 13,
"name": "Punjab",
"id": 20,
"cured_count": 27,
"cnf_ind_count": 202
},
{
"cnf_for_count": 0,
"death_count": 11,
"name": "Rajasthan",
"id": 21,
"cured_count": 183,
"cnf_ind_count": 1229
},
{
"cnf_for_count": 0,
"death_count": 15,
"name": "Tamil Nadu",
"id": 23,
"cured_count": 283,
"cnf_ind_count": 1323
},
{
"cnf_for_count": 0,
"death_count": 18,
"name": "Telangana",
"id": 24,
"cured_count": 186,
"cnf_ind_count": 791
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Tripura",
"id": 25,
"cured_count": 1,
"cnf_ind_count": 2
},
{
"cnf_for_count": 0,
"death_count": 14,
"name": "Uttar Pradesh",
"id": 26,
"cured_count": 86,
"cnf_ind_count": 969
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Uttarakhand",
"id": 27,
"cured_count": 9,
"cnf_ind_count": 42
},
{
"cnf_for_count": 0,
"death_count": 10,
"name": "West Bengal",
"id": 28,
"cured_count": 55,
"cnf_ind_count": 287
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Andaman and Nicobar Islands",
"id": 30,
"cured_count": 11,
"cnf_ind_count": 12
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Chandigarh",
"id": 31,
"cured_count": 9,
"cnf_ind_count": 21
},
{
"cnf_for_count": 0,
"death_count": 42,
"name": "Delhi",
"id": 34,
"cured_count": 72,
"cnf_ind_count": 1707
},
{
"cnf_for_count": 0,
"death_count": 5,
"name": "Jammu and Kashmir",
"id": 35,
"cured_count": 42,
"cnf_ind_count": 328
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Ladakh",
"id": 36,
"cured_count": 14,
"cnf_ind_count": 18
},
{
"cnf_for_count": 0,
"death_count": 0,
"name": "Puducherry",
"id": 38,
"cured_count": 3,
"cnf_ind_count": 7
}
]
}