Converts Bootstrap native tables to JSON, and vice versa. Also has some nice extra table manipulation goodies.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.DS_Store
LICENSE
README.md
jsontables.js

README.md

Bootstrap-JSONTables

A simple and quick extension to jQuery that allows you to:

  • Bootstrap table ➤ JSON data;
  • JSON data ➤ Bootstrap table;

It also has extra functionality to filter table data based on a search query.

Basic example:

<table id="basicTable" class="table">
	<thead>
		<tr>
			<th>ID</th>
			<th>Name</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Bart</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Nick</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Jason</td>
		</tr>
	</tbody>
</table>
$(document).ready(function()
{
	var jsonTable = new JSONTable($("#basicTable"))
	var tableData = jsonTable.toJSON()
	tableData.push({"ID":"4","Name":"Jack"})
	setTimeout(function()
	{
		jsonTable.fromJSON(tableData)
	}, 4000)
})

This should result in this table-structure in your DOM after 4 seconds:

<table id="basicTable" class="table">
	<thead>
		<tr>
			<td>ID</td>
			<td>Name</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Bart</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Nick</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Jason</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Jack</td>
		</tr>
	</tbody>
</table>

More examples are coming soon.