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.

$('#demo').columns({
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.

$.ajax({
url:'data.json',
dataType: 'json', 
success: function(json) { 
example3 = $('#example3').columns({
data:json,
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.