JSON To Bootstrap Table

is a jQuery plugin that displays a bootstrap responsive table for JSON. In JavaScript, we usually get data (in the form of JSON) from backend using ajax and then display a table (sometimes with pagination and edit/delete buttons). So this plugin makes it super easy to display a responsive bootstrap table with pagination and action buttons. You only need to parse your JSON and pass it to the plugin and the table will be automatically created.

Please watch the video preview before checking the live demo.
Click here to view video preview.

Create Bootstrap Responsive Table From JSON (Live Demo):

Click here to view the live demo.

Our Code Generators for C#, VB.Net, PHP and Entity Framework:

Click here if you need Code Generators for PHP, C#, VB.Net and Entity Framework.

Features:

It automatically creates a bootstrap table.
You can display pagination as required.
Total number of pages and records is shown in the pagination section.
It displays a responsive table.
It displays smart titles for header row (e.g. “FirstName” to “First Name” or “Country_Name” to “Country Name”).
You can specify any page size (the number of records per page).
You can specify primary key column. It is needed if you want to display action buttons (edit/delete).
You can specify to show/hide edit/delete buttons.
You can provide custom titles for header row.
Examples provided in the documentation.

Properties:

data: The data that is displayed in the bootstrap table.
header: It is an array of strings that will be used for header row titles.
keyColumn: It is the primary key column/property name. It is needed if you want to display edit/delete buttons.
pageSize: It is the number of records displayed per page.
addEditIcon: It indicates whether edit button should be shown in the table.
addDeleteIcon: It indicates whether delete button should be shown in the table.
displayKeyColumn: It indicates whether primary key column should be shown in the table.
enablePagination: It indicates whether pagination should be displayed.

Methods:

data(): It gets data of the table.
data(data): It sets data of the table. The table will be refreshed when this method is called.

Events:

onEditButtonClick(id): It is triggered when an edit button is clicked.
onDeleteButtonClick(id): It is triggered when a delete button is clicked.

Note:

There is no built-in functionality for editing/deleting a record. You will get value of the primary key and then you can send a request to your server to get/edit/delete the record.

More Useful Items:

JSON To Bootstrap Table - jQuery Plugin