var smallTable = [
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25"
},
"contact": [
"Edinburgh",
"5421"
]
},
{
"name": "Garrett Winters",
"hr": {
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25"
},
"contact": [
"Tokyo",
"8422"
]
},
{
"name": "Ashton Cox",
"hr": {
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12"
},
"contact": [
"San Francisco",
"1562"
]
},
{
"name": "Cedric Kelly",
"hr": {
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29"
},
"contact": [
"Edinburgh",
"6224"
]
},
{
"name": "Airi Satou",
"hr": {
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28"
},
"contact": [
"Tokyo",
"5407"
]
},
{
"name": "Brielle Williamson",
"hr": {
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02"
},
"contact": [
"New York",
"4804"
]
},
{
"name": "Herrod Chandler",
"hr": {
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012/08/06"
},
"contact": [
"San Francisco",
"9608"
]
},
{
"name": "Rhona Davidson",
"hr": {
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010/10/14"
},
"contact": [
"Tokyo",
"6200"
]
},
{
"name": "Colleen Hurst",
"hr": {
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009/09/15"
},
"contact": [
"San Francisco",
"2360"
]
},
{
"name": "Sonya Frost",
"hr": {
"position": "Software Engineer",
"salary": "$103,600",
"start_date": "2008/12/13"
},
"contact": [
"Edinburgh",
"1667"
]
},
{
"name": "Jena Gaines",
"hr": {
"position": "Office Manager",
"salary": "$90,560",
"start_date": "2008/12/19"
},
"contact": [
"London",
"3814"
]
},
{
"name": "Quinn Flynn",
"hr": {
"position": "Support Lead",
"salary": "$342,000",
"start_date": "2013/03/03"
},
"contact": [
"Edinburgh",
"9497"
]
},
{
"name": "Charde Marshall",
"hr": {
"position": "Regional Director",
"salary": "$470,600",
"start_date": "2008/10/16"
},
"contact": [
"San Francisco",
"6741"
]
},
{
"name": "Haley Kennedy",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$313,500",
"start_date": "2012/12/18"
},
"contact": [
"London",
"3597"
]
},
{
"name": "Tatyana Fitzpatrick",
"hr": {
"position": "Regional Director",
"salary": "$385,750",
"start_date": "2010/03/17"
},
"contact": [
"London",
"1965"
]
},
{
"name": "Michael Silva",
"hr": {
"position": "Marketing Designer",
"salary": "$198,500",
"start_date": "2012/11/27"
},
"contact": [
"London",
"1581"
]
},
{
"name": "Paul Byrd",
"hr": {
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
"start_date": "2010/06/09"
},
"contact": [
"New York",
"3059"
]
},
{
"name": "Gloria Little",
"hr": {
"position": "Systems Administrator",
"salary": "$237,500",
"start_date": "2009/04/10"
},
"contact": [
"New York",
"1721"
]
},
{
"name": "Bradley Greer",
"hr": {
"position": "Software Engineer",
"salary": "$132,000",
"start_date": "2012/10/13"
},
"contact": [
"London",
"2558"
]
},
{
"name": "Dai Rios",
"hr": {
"position": "Personnel Lead",
"salary": "$217,500",
"start_date": "2012/09/26"
},
"contact": [
"Edinburgh",
"2290"
]
},
{
"name": "Jenette Caldwell",
"hr": {
"position": "Development Lead",
"salary": "$345,000",
"start_date": "2011/09/03"
},
"contact": [
"New York",
"1937"
]
},
{
"name": "Yuri Berry",
"hr": {
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
"start_date": "2009/06/25"
},
"contact": [
"New York",
"6154"
]
},
{
"name": "Caesar Vance",
"hr": {
"position": "Pre-Sales Support",
"salary": "$106,450",
"start_date": "2011/12/12"
},
"contact": [
"New York",
"8330"
]
},
{
"name": "Doris Wilder",
"hr": {
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010/09/20"
},
"contact": [
"Sidney",
"3023"
]
},
{
"name": "Angelica Ramos",
"hr": {
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
"start_date": "2009/10/09"
},
"contact": [
"London",
"5797"
]
},
{
"name": "Gavin Joyce",
"hr": {
"position": "Developer",
"salary": "$92,575",
"start_date": "2010/12/22"
},
"contact": [
"Edinburgh",
"8822"
]
},
{
"name": "Jennifer Chang",
"hr": {
"position": "Regional Director",
"salary": "$357,650",
"start_date": "2010/11/14"
},
"contact": [
"Singapore",
"9239"
]
},
{
"name": "Brenden Wagner",
"hr": {
"position": "Software Engineer",
"salary": "$206,850",
"start_date": "2011/06/07"
},
"contact": [
"San Francisco",
"1314"
]
},
{
"name": "Fiona Green",
"hr": {
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
"start_date": "2010/03/11"
},
"contact": [
"San Francisco",
"2947"
]
},
{
"name": "Shou Itou",
"hr": {
"position": "Regional Marketing",
"salary": "$163,000",
"start_date": "2011/08/14"
},
"contact": [
"Tokyo",
"8899"
]
},
{
"name": "Michelle House",
"hr": {
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011/06/02"
},
"contact": [
"Sidney",
"2769"
]
},
{
"name": "Suki Burks",
"hr": {
"position": "Developer",
"salary": "$114,500",
"start_date": "2009/10/22"
},
"contact": [
"London",
"6832"
]
},
{
"name": "Prescott Bartlett",
"hr": {
"position": "Technical Author",
"salary": "$145,000",
"start_date": "2011/05/07"
},
"contact": [
"London",
"3606"
]
},
{
"name": "Gavin Cortez",
"hr": {
"position": "Team Leader",
"salary": "$235,500",
"start_date": "2008/10/26"
},
"contact": [
"San Francisco",
"2860"
]
},
{
"name": "Martena Mccray",
"hr": {
"position": "Post-Sales support",
"salary": "$324,050",
"start_date": "2011/03/09"
},
"contact": [
"Edinburgh",
"8240"
]
},
{
"name": "Unity Butler",
"hr": {
"position": "Marketing Designer",
"salary": "$85,675",
"start_date": "2009/12/09"
},
"contact": [
"San Francisco",
"5384"
]
},
{
"name": "Howard Hatfield",
"hr": {
"position": "Office Manager",
"salary": "$164,500",
"start_date": "2008/12/16"
},
"contact": [
"San Francisco",
"7031"
]
},
{
"name": "Hope Fuentes",
"hr": {
"position": "Secretary",
"salary": "$109,850",
"start_date": "2010/02/12"
},
"contact": [
"San Francisco",
"6318"
]
},
{
"name": "Vivian Harrell",
"hr": {
"position": "Financial Controller",
"salary": "$452,500",
"start_date": "2009/02/14"
},
"contact": [
"San Francisco",
"9422"
]
},
{
"name": "Timothy Mooney",
"hr": {
"position": "Office Manager",
"salary": "$136,200",
"start_date": "2008/12/11"
},
"contact": [
"London",
"7580"
]
},
{
"name": "Jackson Bradshaw",
"hr": {
"position": "Director",
"salary": "$645,750",
"start_date": "2008/09/26"
},
"contact": [
"New York",
"1042"
]
},
{
"name": "Olivia Liang",
"hr": {
"position": "Support Engineer",
"salary": "$234,500",
"start_date": "2011/02/03"
},
"contact": [
"Singapore",
"2120"
]
},
{
"name": "Bruno Nash",
"hr": {
"position": "Software Engineer",
"salary": "$163,500",
"start_date": "2011/05/03"
},
"contact": [
"London",
"6222"
]
},
{
"name": "Sakura Yamamoto",
"hr": {
"position": "Support Engineer",
"salary": "$139,575",
"start_date": "2009/08/19"
},
"contact": [
"Tokyo",
"9383"
]
},
{
"name": "Thor Walton",
"hr": {
"position": "Developer",
"salary": "$98,540",
"start_date": "2013/08/11"
},
"contact": [
"New York",
"8327"
]
},
{
"name": "Finn Camacho",
"hr": {
"position": "Support Engineer",
"salary": "$87,500",
"start_date": "2009/07/07"
},
"contact": [
"San Francisco",
"2927"
]
},
{
"name": "Serge Baldwin",
"hr": {
"position": "Data Coordinator",
"salary": "$138,575",
"start_date": "2012/04/09"
},
"contact": [
"Singapore",
"8352"
]
},
{
"name": "Zenaida Frank",
"hr": {
"position": "Software Engineer",
"salary": "$125,250",
"start_date": "2010/01/04"
},
"contact": [
"New York",
"7439"
]
},
{
"name": "Zorita Serrano",
"hr": {
"position": "Software Engineer",
"salary": "$115,000",
"start_date": "2012/06/01"
},
"contact": [
"San Francisco",
"4389"
]
},
{
"name": "Jennifer Acosta",
"hr": {
"position": "Junior Javascript Developer",
"salary": "$75,650",
"start_date": "2013/02/01"
},
"contact": [
"Edinburgh",
"3431"
]
},
{
"name": "Cara Stevens",
"hr": {
"position": "Sales Assistant",
"salary": "$145,600",
"start_date": "2011/12/06"
},
"contact": [
"New York",
"3990"
]
},
{
"name": "Hermione Butler",
"hr": {
"position": "Regional Director",
"salary": "$356,250",
"start_date": "2011/03/21"
},
"contact": [
"London",
"1016"
]
},
{
"name": "Lael Greer",
"hr": {
"position": "Systems Administrator",
"salary": "$103,500",
"start_date": "2009/02/27"
},
"contact": [
"London",
"6733"
]
},
{
"name": "Jonas Alexander",
"hr": {
"position": "Developer",
"salary": "$86,500",
"start_date": "2010/07/14"
},
"contact": [
"San Francisco",
"8196"
]
},
{
"name": "Shad Decker",
"hr": {
"position": "Regional Director",
"salary": "$183,000",
"start_date": "2008/11/13"
},
"contact": [
"Edinburgh",
"6373"
]
},
{
"name": "Michael Bruce",
"hr": {
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011/06/27"
},
"contact": [
"Singapore",
"5384"
]
},
{
"name": "Donna Snider",
"hr": {
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011/01/25"
},
"contact": [
"New York",
"4226"
]
}
]
$(document).ready(function() {
//Toggle Modes
$('body').on('click', '.button', function() {
var $selectedButton = $(this);
$('.table-type').attr('data-mode', 'false');
$selectedButton.attr('data-mode', 'true');
//$(this).attr('data-mode', $(this).attr('data-mode') == 'true' ? 'false' : 'true'); //toggle not needed here
if ($selectedButton.hasClass('pagingTable')) {
showPagingTable();
}
if ($selectedButton.hasClass('bigTable')) {
showBigTable();
}
if ($selectedButton.hasClass('fullTable')) {
showFullTable();
}
//clear column selector
$('.floatingMenu a[data-mode="false"]').trigger('click');
$('.floatingMenu').hide();
});
$('body').on('contextmenu', 'thead.contextMenu', function(e) {
var menu = $('.floatingMenu');
e.preventDefault();
var posX = e.pageX,
posY = e.pageY;
menu.css('top', posY);
menu.css('left', posX);
menu.toggle();
});
$('body').on('click', '.floatingMenu a', function(e) {
e.preventDefault();
// Get the column API object
var column = $('#superTable').DataTable().column($(this).attr('data-column'));
$(this).attr('data-mode', $(this).attr('data-mode') == 'true' ? 'false' : 'true');
console.log(this);
// Toggle the visibility
column.visible(!column.visible());
$('.floatingMenu').toggle();
});
function showPagingTable() {
function clearDom() {
var domToInject = '<table id="superTable" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead></table>';
$('#superTable').DataTable().destroy();
$('#superTable').html(domToInject);
buildTable();
}
function buildTable() {
$('#superTable').DataTable({
"destroy": true,
"bDestroy": true,
"colReorder": true,
"paging": true, //disable paging
"deferRender": true, //enable virtual scrolling
"fixedHeader": true,
"bInfo": false, //hide paging info
"data": smallTable,
"columns": [{
"data": "name"
}, {
"data": "hr.position"
}, {
"data": "contact.0"
}, {
"data": "contact.1"
}, {
"data": "hr.start_date"
}, {
"data": "hr.salary"
}]
});
}
clearDom();
}
function showBigTable() {
function clearDom() {
var domToInject = '<table id="superTable" class="display nowrap" style="display: none;" cellspacing="0" width="100%"><thead><tr><th>ID</th><th>First name</th><th>Last name</th><th>ZIP / Post code</th><th>Country</th></tr></thead></table>';
$('#superTable').DataTable().destroy();
$('#superTable').html(domToInject);
buildTable();
}
function buildTable() {
$('#superTable').DataTable({
"destroy": true,
"bDestroy": true,
"serverSide": true,
"colReorder": true,
"bFilter": false, //with server on we can not search on the client
"paging": true, //disable paging
"deferRender": true, //enable virtual scrolling
"ajax": function(data, callback, settings) {
var out = [];
for (var i = data.start, ien = data.start + data.length; i < ien; i++) {
out.push([i + '-1', i + '-2', i + '-3', i + '-4', i + '-5']);
}
setTimeout(function() {
callback({
draw: data.draw,
data: out,
recordsTotal: 5000000,
recordsFiltered: 5000000
});
}, 50);
},
"scroller": {
loadingIndicator: true
},
"scrollY": "60vh",
"scrollX": true,
"fixedHeader": false,
"bInfo": true
});
}
clearDom();
}
function showFullTable() {
function clearDom() {
var domToInject = '<table id="superTable" class="display" cellspacing="0" width="100%"><thead class="contextMenu"><tr><th>Name</th><th>Position</th><th>Office</th><th>Extn.</th><th>Start date</th><th>Salary</th></tr></thead></table>';
$('#superTable').DataTable().destroy();
$('#superTable').html(domToInject);
buildTable();
}
function buildTable() {
$('#superTable').DataTable({
"destroy": true,
"bDestroy": true,
"paging": true,
"colReorder": true,
"searchHighlight":true,
"deferRender": true, //enable virtual scrolling
"scrollY": "60vh",
"scroller": {
loadingIndicator: true
},
"scrollX": true,
"bInfo": true, //hide paging info
"data": smallTable,
"columns": [{
"data": "name",
"width": "20px"
}, {
"data": "hr.position"
}, {
"data": "contact.0"
}, {
"data": "contact.1"
}, {
"data": "hr.start_date"
}, {
"data": "hr.salary"
}],
"dom": "Z<'row'<'small-6 columns'l><'small-6 columns'f>r>t<'row'<'small-6 columns'i><'small-6 columns'p>>",
"colResize": {
"rtl": false,
"resizeCallback": function(column) {
console.log("Column Resized");
}
}
});
}
clearDom();
}
showFullTable();
});
$(document).foundation();
/*
*
Done - 1. Columns should be sortable, multi-sortable and should be able to custom sort functions
Done - 2. Columns should be rearrange able using DND
3. Allow grouping by fields – multi level (currently expected to provide 2 level grouping)
4. Custom row heights for groups vs rows
Done - 5. Virtual rendering (critical feature) handle up to 5000 rows with ease
Done - 6. Fixed headers
Done - 7. Columns can be toggled (hidden/shown) (using a column picker) ** Right click on search input for selector **
8. Possible options are to provide an alternate paging feature (with 508 compatibility
9. Internal state management – Highlighted rows, expanded, collapsed grouped rows
10. Search within with highlighting of matched text + navigation via keyboard + 508 compatibility
11. Feature for summary and aggregate rows that can be positions both at the top or bottom of the grids.
12. Fixed columns
*/
!
