jQuery Columns Examples

Example 1: Setting data inline

$('#example1').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' }
	]
});
		

Example 2: Setting data from external source

 
$.ajax({
	url:'json.php',
	dataType: 'json', 
	success: function(json) { 
		example2 = $('#example2').columns({
			data:json, 
		}); 
	}
}); 
		

Example 3: Using a custom schema

 
$.ajax({
	url:'custom.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"}
			]

		}); 
	}
}); 
		

Example 4: Using a conditional statement

 
$.ajax({
	url:'custom.json',
	dataType: 'json', 
	success: function(json) { 
		example4 = $('#example4').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", "condition":function(val) {return (val=="male");}}
			]

		}); 
	}
});