How do I add the drill-down rows with the tabletop script in datatables?
How do I add the drill-down rows with the tabletop script in datatables?
redmanstanding
Posts: 4Questions: 0Answers: 0
Hi, I'm new to the forum. Thanks for the great work on Datatables. :)
Forgive me if this has been asked before, but I've searched the forum and can't find any answers on this topic. I'm using the tabletop script (http://projects.chrislkeller.com/demos/tabletop_to_datatables/) that enables me to extract data from Google spreadsheets to populate the datatables but ideally I'd like to include the drill-down function (http://datatables.net/blog/Drill-down_rows) to the script I currently have below. I've tried to find a way of including the drill-down code but javascript is double Dutch to me as I'm in the early stages of learning. Any help or pointers as to where I could find anything similar would be much appreciated. Thanks!
[code]
var jqueryNoConflict = jQuery;
// begin main function
jqueryNoConflict(document).ready(function(){
initializeTabletopObject('0AsacxEOag14HdDF5bm9ObDhhSU5wendvRFUxNnJHWkE');
});
// pull data from google spreadsheet
function initializeTabletopObject(dataSpreadsheet){
Tabletop.init({
key: dataSpreadsheet,
callback: writeTableWith,
simpleSheet: true,
debug: false
});
}
// create table headers
function createTableColumns(){
/* swap out the properties of mDataProp & sTitle to reflect
the names of columns or keys you want to display.
Remember, tabletop.js strips out spaces from column titles, which
is what happens with the More Info column header */
var tableColumns = [
{'mDataProp': 'playername', 'sTitle': 'Player Name', 'sClass': 'left', sWidth: '15%'},
{'mDataProp': 'birthdate', 'sTitle': 'Birthdate', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'birthplace', 'sTitle': 'Birthplace', 'sClass': 'left', sWidth: '20%'},
{'mDataProp': 'previousclub', 'sTitle': 'Previous Club', 'sClass': 'left', sWidth: '20%'},
{'mDataProp': 'firstgame', 'sTitle': 'First Game', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'lastgame', 'sTitle': 'Last Game', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'nextclub', 'sTitle': 'Next Club', 'sClass': 'left', sWidth: '20%'},
{'mDataProp': 'apps', 'sTitle': 'Apps.', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'goals', 'sTitle': 'Goals', 'sClass': 'center', sWidth: '5%'}
];
return tableColumns;
}
// create the table container and object
function writeTableWith(dataSource){
jqueryNoConflict('#demo').html('');
var oTable = jqueryNoConflict('#data-table-container').dataTable({
'sPaginationType': 'full_numbers',
'iDisplayLength': 25,
'aaData': dataSource,
'aoColumns': createTableColumns(),
'bJQueryUI': true,
'oLanguage': {
'sLengthMenu': 'Show _MENU_ players'
}
});
};
//define two custom functions (asc and desc) for string sorting
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 0 : 0));
};
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
[/code]
Forgive me if this has been asked before, but I've searched the forum and can't find any answers on this topic. I'm using the tabletop script (http://projects.chrislkeller.com/demos/tabletop_to_datatables/) that enables me to extract data from Google spreadsheets to populate the datatables but ideally I'd like to include the drill-down function (http://datatables.net/blog/Drill-down_rows) to the script I currently have below. I've tried to find a way of including the drill-down code but javascript is double Dutch to me as I'm in the early stages of learning. Any help or pointers as to where I could find anything similar would be much appreciated. Thanks!
[code]
var jqueryNoConflict = jQuery;
// begin main function
jqueryNoConflict(document).ready(function(){
initializeTabletopObject('0AsacxEOag14HdDF5bm9ObDhhSU5wendvRFUxNnJHWkE');
});
// pull data from google spreadsheet
function initializeTabletopObject(dataSpreadsheet){
Tabletop.init({
key: dataSpreadsheet,
callback: writeTableWith,
simpleSheet: true,
debug: false
});
}
// create table headers
function createTableColumns(){
/* swap out the properties of mDataProp & sTitle to reflect
the names of columns or keys you want to display.
Remember, tabletop.js strips out spaces from column titles, which
is what happens with the More Info column header */
var tableColumns = [
{'mDataProp': 'playername', 'sTitle': 'Player Name', 'sClass': 'left', sWidth: '15%'},
{'mDataProp': 'birthdate', 'sTitle': 'Birthdate', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'birthplace', 'sTitle': 'Birthplace', 'sClass': 'left', sWidth: '20%'},
{'mDataProp': 'previousclub', 'sTitle': 'Previous Club', 'sClass': 'left', sWidth: '20%'},
{'mDataProp': 'firstgame', 'sTitle': 'First Game', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'lastgame', 'sTitle': 'Last Game', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'nextclub', 'sTitle': 'Next Club', 'sClass': 'left', sWidth: '20%'},
{'mDataProp': 'apps', 'sTitle': 'Apps.', 'sClass': 'center', sWidth: '5%'},
{'mDataProp': 'goals', 'sTitle': 'Goals', 'sClass': 'center', sWidth: '5%'}
];
return tableColumns;
}
// create the table container and object
function writeTableWith(dataSource){
jqueryNoConflict('#demo').html('');
var oTable = jqueryNoConflict('#data-table-container').dataTable({
'sPaginationType': 'full_numbers',
'iDisplayLength': 25,
'aaData': dataSource,
'aoColumns': createTableColumns(),
'bJQueryUI': true,
'oLanguage': {
'sLengthMenu': 'Show _MENU_ players'
}
});
};
//define two custom functions (asc and desc) for string sorting
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 0 : 0));
};
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
[/code]
This discussion has been closed.