JsonToBootstrapTable jQuery Plugin Documentation by Najmul Iqbal v1.0

---

JsonToBootstrapTable jQuery Plugin

---

Table of Contents

1. Overview
2. Features
3. Dependencies
4. Options
5. Methods
6. Events

---

A) Overview - Top

It 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 (edit/delete) buttons. You only need to parse your JSON and pass it to the plugin and the table will be automatically created.

---

B) Features - Top

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

---

C) Dependencies - Top

1. jquery.ui.widget.js:
   We have created stateful jQuery plugin using the jQuery widget factory therefore, it depends on the jquery.ui.widget.js.

---

D) Options - Top

1. data:
   Type: Array
   Default: []
   
   The data that is displayed in the bootstrap table.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID"
   });
   
2. header:
   Type: Array
   Default: null
   
   It is an array of strings that will be used for header row titles.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      header: ["Employee ID", "First Name", "Last Name"]
   });
   
3. keyColumn:
   Type: String
   Default: ""
   
   It is the primary key column/property name. It is needed if you want to display edit/delete buttons.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID"
   });
   
4. pageSize:
   Type: Integer
   Default: 5
   
   It is the number of records displayed per page.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      pageSize: 10
   });
   
5. addEditIcon:
   Type: Boolean
   Default: true
   
   It indicates whether edit button should be shown in the table.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      addEditIcon: false
   });
   
6. addDeleteIcon:
   Type: Boolean
   Default: true
   
   It indicates whether delete button should be shown in the table.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      addDeleteIcon: false
   });
   
7. displayKeyColumn:
   Type: Boolean
   Default: false
   
   It indicates whether primary key column should be shown in the table.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      displayKeyColumn: true
   });
   
8. enablePagination:
   Type: Boolean
   Default: true
   
   It indicates whether pagination should be displayed.
   
   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      enablePagination: false
   });
   

---

E) Methods - Top

1. data():
   It gets data of the table.
   
   Returns: Array
   
   Example:
   var data = $('#grid').jsonToBootstrapTable("data");
   
2. data(data):
   It sets data of the table. The table will be refreshed when this method is called.
   
   Parameters:
   data

   Type: Array
   The data to be displayed in the table.

   Example:
   $('#grid').jsonToBootstrapTable("data", [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}]);
   

---

F) Events - Top

1. onEditButtonClick(id):
   Triggered when an edit button is clicked.
   
   Parameters:
   id

   Type: Integer
   Id of the record.

   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      onEditButtonClick: function (id) {}
   });
   
2. onDeleteButtonClick(id):
   Triggered when a delete button is clicked.
   
   Parameters:
   id

   Type: Integer
   Id of the record.

   Example:
   $('#grid').jsonToBootstrapTable({
      data: [{ID: 1, FirstName: "Alina", LastName: "David"}, {ID: 2, FirstName: "William", LastName: "Hurt"}],
      keyColumn: "ID",
      onDeleteButtonClick: function (id) {}
   });
   

---

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the apps on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Najmul Iqbal

Go To Table of Contents

---