Examples of using Columns
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:'data.json',
dataType: 'json',
success: function(json) {
example2 = $('#example2').columns({
data:json,
});
}
});
Example 3: 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"}
]
});
}
});
Example 4: Using a conditional statement
$.ajax({
url:'data.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");}}
]
});
}
});
Example 5: Using a large data set
$.ajax({
url:'large-data.json',
dataType: 'json',
success: function(json) {
example5 = $('#example5').columns({
data:json
});
}
});
Example 6: Using GoToPage plugin
$.ajax({
url:'data.json',
dataType: 'json',
success: function(json) {
example6 = $('#example6').columns({
data:json,
schema: [
{"header":"ID", "key":"id", "template":"000{{id}}-{{name}}"},
{"header":"Name", "key":"name", "template":'{{#name}} {{name}} {{/name}} {{^name}} Unknown Author {{/name}}'},
{"header":"Email", "key":"email", "template":'{{email}}'}
],
templateFile: '../templates/custom.mst',
plugins:['gotopage']
});
}
});
Example 7: Using AjaxPaging plugin
$.ajax({
url:'data.php',
dataType: 'json',
success: function(json) {
example7 = $('#example7').columns({
data:json.data,
pages: json.pages,
total: json.total,
plugins:['ajaxpaging']
});
}
});
Example 8: Destroying old table and creating new table
$.ajax({
url:'data.json',
dataType: 'json',
success: function(json) {
example8 = $('#example8').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"}
]
});
}
});
$('#example8Button').click(function() {
$('#example8').columns('destroy');
$.ajax({
url:'data.json',
dataType: 'json',
success: function(json) {
example8 = $('#example8').columns({
data:json,
schema: [
{"header":"Name", "key":"name"},
{"header":"Email", "key":"email", "template":'<a href="mailto:{{email}}">{{email}}</a>'},
{"header":"Address", "key":"address"},
{"header":"City", "key":"city"},
{"header":"State", "key":"state"}
{"header":"Zip", "key":"zip"}
]
});
}
});
});