jQuery Datagrid Examples(Columns)
A basic data grid, which pulls in dynamic created data and pushes using either AJAX or a JSON object.
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");}}
]
});
}
});