SHARE

JSON To Bootstrap Table – jQuery Plugin Free Download

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.

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:

 
   View Demo     Download

NO COMMENTS

LEAVE A REPLY