Archive for January, 2016

How to Populate JSON results in Html table

Introduction:

In this article I am going to explain how to populate JSON data to table using Javascript.

Description:

Here we are going to use a Bootstrap Table plugin to load the data from Json to table. This is an easy option to load the data because parsing of Json is handled internally.

Prerequisites:

You need to add the necessary JQuery and bootstrap files to your page prior to use this plugin. In this example I have used the online JQuery and Bootstrap CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery and Bootstrap files to your solution.

Implementation:

First we will design the table according to the column in Json. Main point to note is to set the data-toggle attribute properly.

 <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>

Now you can use the below code to assign the  Json data to a table.

  $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });

Complete Code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //Sample Json data
            var jsondata = [
                {
                    "id": "1",
                    "Name": "Name1",
                    "Address": "Address1"
                },
                {
                    "id": "2",
                    "Name": "Name2",
                    "Address": "Address2"
                },
                {
                    "id": "3",
                    "Name": "Name3",
                    "Address": "Address3"
                },
                {
                    "id": "4",
                    "Name": "Name4",
                    "Address": "Address4"
                },
                {
                    "id": "5",
                    "Name": "Name5",
                    "Address": "Address5"
                }];

            $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>
    </form>
</body>
</html>

Advertisements

, , , , ,

2 Comments