jQuery Plugin To Convert JSON Data Into Data Grid - Columns

File Size: 59.1 KB
Views Total: 34423
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Convert JSON Data Into Data Grid - Columns

Columns is a powerful & ajax-enabled jQuery plugin that converts JSON data into a filterable, searchable and paginated data grid.

How to use it:

1. Load the jQuery javascript library and jQuery columns plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.columns-1.0.min.js"></script> 

2. Choose and include a theme CSS in the head section of the page.

<link id="style" href="clean.css" rel="stylesheet" media="screen">

3. Create an empty container to generate a data grid from inline data.

<div id="demo"></div>

4. Create the data in the javascript and call the plugin.

data: [
{'Emp. Number': 00001, 'First Name':'John', 'Last Name':'Smith' },
{'Emp. Number': 00002, 'First Name':'Jane', 'Last Name':'Doe' },
{'Emp. Number': 00003, 'First Name':'Ted', 'Last Name':'Johnson' },
{'Emp. Number': 00004, 'First Name':'Betty', 'Last Name':'Smith' },
{'Emp. Number': 00005, 'First Name':'Susan', 'Last Name':'Wilson' },
{'Emp. Number': 00006, 'First Name':'John', 'Last Name':'Doe' },
{'Emp. Number': 00007, 'First Name':'Bill', 'Last Name':'Watson' },
{'Emp. Number': 00008, 'First Name':'Walter', 'Last Name':'Wright' }

5. Load data from an external source using a custom schema.

dataType: 'json', 
success: function(json) { 
example3 = $('#example3').columns({
schema: [
{"header":"ID", "key":"id", "template":"000{{id}}"},
{"header":"Name", "key":"name"},
{"header":"Email", "key":"email", "template":'<a href="mailto:{{email}}">{{email}}</a>'}
{"header":"Gender", "key":"gender"}


This awesome jQuery plugin is developed by eisenbraun. For more Advanced Usages, please check the demo page or visit the official website.