Reading:
Jquery Datatable JSON Data Example

Jquery Datatable JSON Data Example

Metamug
Jquery Datatable JSON Data Example

In this example we are going to demonstrate how to

  • display a jquery datatable using json data.
  • map column names to json data
  • add link to a column
  • sort the data on a column

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.

JSON Data for the table

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
    }
  ]
}


Icon For Arrow-up
Comments

Post a comment