2010-08-17 09:42:13 +02:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< html >
< head >
< meta http-equiv = "content-type" content = "text/html; charset=utf-8" / >
2010-10-08 22:15:17 +02:00
< link rel = "shortcut icon" type = "image/ico" href = "http://www.datatables.net/media/images/favicon.ico" / >
2010-08-17 09:42:13 +02:00
< title > DataTables example< / title >
< style type = "text/css" title = "currentStyle" >
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
< / style >
< script type = "text/javascript" language = "javascript" src = "../../media/js/jquery.js" > < / script >
< script type = "text/javascript" language = "javascript" src = "../../media/js/jquery.dataTables.js" > < / script >
< script type = "text/javascript" charset = "utf-8" >
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '< table cellpadding = "5" cellspacing = "0" border = "0" style = "padding-left:50px;" > ';
sOut += '< tr > < td > Rendering engine:< / td > < td > '+aData[2]+' '+aData[5]+'< / td > < / tr > ';
sOut += '< tr > < td > Link to source:< / td > < td > Could provide a link here< / td > < / tr > ';
sOut += '< tr > < td > Extra info:< / td > < td > And any further details here (images etc)< / td > < / tr > ';
sOut += '< / table > ';
return sOut;
}
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
2011-04-17 11:54:14 +02:00
"sAjaxSource": "scripts/details_col.php",
2010-08-17 09:42:13 +02:00
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
2011-03-22 19:23:44 +01:00
"aaSorting": [[1, 'asc']]
2010-09-30 09:48:17 +02:00
} );
$('#example tbody td img').live( 'click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
2010-08-17 09:42:13 +02:00
} );
} );
< / script >
< / head >
< body id = "dt_example" >
< div id = "container" >
< div class = "full_width big" >
2011-04-25 20:07:57 +02:00
DataTables server-side processing example with hidden row information
2010-08-17 09:42:13 +02:00
< / div >
< h1 > Preamble< / h1 >
< p > This example shows how you might modify the client-side show/hide details rows example for use with DataTables 1.5's server-side processing option.< / p >
< h1 > Live example< / h1 >
< div id = "dynamic" >
< table cellpadding = "0" cellspacing = "0" border = "0" class = "display" id = "example" >
< thead >
< tr >
< th width = "4%" > < / th >
< th width = "25%" > Rendering engine< / th >
< th width = "20%" > Browser< / th >
< th width = "25%" > Platform(s)< / th >
< th width = "16%" > Engine version< / th >
< th width = "10%" > CSS grade< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td colspan = "5" class = "dataTables_empty" > Loading data from server< / td >
< / tr >
< / tbody >
< tfoot >
< tr >
< th > < / th >
< th > Rendering engine< / th >
< th > Browser< / th >
< th > Platform(s)< / th >
< th > Engine version< / th >
< th > CSS grade< / th >
< / tr >
< / tfoot >
< / table >
< / div >
< div class = "spacer" > < / div >
< h1 > Initialisation code< / h1 >
< pre > var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '< table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"> ';
sOut += '< tr> < td> Rendering engine:< /td> < td> '+aData[2]+' '+aData[5]+'< /td> < /tr> ';
sOut += '< tr> < td> Link to source:< /td> < td> Could provide a link here< /td> < /tr> ';
sOut += '< tr> < td> Extra info:< /td> < td> And any further details here (images etc)< /td> < /tr> ';
sOut += '< /table> ';
return sOut;
}
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
2011-04-17 11:54:14 +02:00
"sAjaxSource": "scripts/details_col.php",
2010-08-17 09:42:13 +02:00
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,
null,
null,
{ "sClass": "center" },
{ "sClass": "center" }
],
2011-03-22 19:23:44 +01:00
"aaSorting": [[1, 'asc']]
2010-09-30 09:48:17 +02:00
} );
$('#example tbody td img').live( 'click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
2010-08-17 09:42:13 +02:00
} );
} );< / pre >
< h1 > Other examples< / h1 >
2011-04-26 08:30:31 +02:00
< div class = "demo_links" >
< h2 > Basic initialisation< / h2 >
< ul >
< li > < a href = "../basic_init/zero_config.html" > Zero configuration< / a > < / li >
< li > < a href = "../basic_init/filter_only.html" > Feature enablement< / a > < / li >
< li > < a href = "../basic_init/table_sorting.html" > Sorting data< / a > < / li >
< li > < a href = "../basic_init/multi_col_sort.html" > Multi-column sorting< / a > < / li >
< li > < a href = "../basic_init/multiple_tables.html" > Multiple tables< / a > < / li >
< li > < a href = "../basic_init/hidden_columns.html" > Hidden columns< / a > < / li >
< li > < a href = "../basic_init/complex_header.html" > Complex headers - grouping with colspan< / a > < / li >
< li > < a href = "../basic_init/dom.html" > DOM positioning< / a > < / li >
< li > < a href = "../basic_init/state_save.html" > State saving< / a > < / li >
< li > < a href = "../basic_init/alt_pagination.html" > Alternative pagination styles< / a > < / li >
< li > Scrolling: < br >
< a href = "../basic_init/scroll_x.html" > Horizontal< / a > /
< a href = "../basic_init/scroll_y.html" > Vertical< / a > /
< a href = "../basic_init/scroll_xy.html" > Both< / a > /
< a href = "../basic_init/scroll_y_theme.html" > Themed< / a > /
< a href = "../basic_init/scroll_y_infinite.html" > Infinite< / a >
< / li >
< li > < a href = "../basic_init/language.html" > Change language information (internationalisation)< / a > < / li >
< li > < a href = "../basic_init/themes.html" > ThemeRoller themes (Smoothness)< / a > < / li >
< / ul >
< h2 > Advanced initialisation< / h2 >
< ul >
< li > Events: < br >
< a href = "../advanced_init/events_live.html" > Live events< / a > /
< a href = "../advanced_init/events_pre_init.html" > Pre-init< / a > /
< a href = "../advanced_init/events_post_init.html" > Post-init with fnGetNodes< / a >
< / li >
< li > < a href = "../advanced_init/column_render.html" > Column rendering< / a > < / li >
< li > < a href = "../advanced_init/html_sort.html" > Sorting without HTML tags< / a > < / li >
< li > < a href = "../advanced_init/dom_multiple_elements.html" > Multiple table controls (sDom)< / a > < / li >
< li > < a href = "../advanced_init/length_menu.html" > Defining length menu options< / a > < / li >
< li > < a href = "../advanced_init/complex_header.html" > Complex headers and hidden columns< / a > < / li >
< li > < a href = "../advanced_init/dom_toolbar.html" > Custom toolbar (element) around table< / a > < / li >
< li > < a href = "../advanced_init/highlight.html" > Row highlighting with CSS< / a > < / li >
< li > < a href = "../advanced_init/row_grouping.html" > Row grouping< / a > < / li >
< li > < a href = "../advanced_init/row_callback.html" > Row callback< / a > < / li >
< li > < a href = "../advanced_init/footer_callback.html" > Footer callback< / a > < / li >
< li > < a href = "../advanced_init/sorting_control.html" > Control sorting direction of columns< / a > < / li >
< li > < a href = "../advanced_init/language_file.html" > Change language information from a file (internationalisation)< / a > < / li >
< / ul >
< h2 > API< / h2 >
< ul >
< li > < a href = "../api/add_row.html" > Dynamically add a new row< / a > < / li >
< li > < a href = "../api/multi_filter.html" > Individual column filtering (using "input" elements)< / a > < / li >
< li > < a href = "../api/multi_filter_select.html" > Individual column filtering (using "select" elements)< / a > < / li >
< li > < a href = "../api/highlight.html" > Highlight rows and columns< / a > < / li >
< li > < a href = "../api/row_details.html" > Show and hide details about a particular record< / a > < / li >
< li > < a href = "../api/select_row.html" > User selectable rows (multiple rows)< / a > < / li >
< li > < a href = "../api/select_single_row.html" > User selectable rows (single row) and delete rows< / a > < / li >
< li > < a href = "../api/editable.html" > Editable rows (with jEditable)< / a > < / li >
< li > < a href = "../api/form.html" > Submit form with elements in table< / a > < / li >
< li > < a href = "../api/counter_column.html" > Index column (static number column)< / a > < / li >
< li > < a href = "../api/show_hide.html" > Show and hide columns dynamically< / a > < / li >
< li > < a href = "../api/api_in_init.html" > API function use in initialisation object (callback)< / a > < / li >
< li > < a href = "../api/tabs_and_scrolling.html" > DataTables scrolling and tabs< / a > < / li >
< li > < a href = "../api/regex.html" > Regular expression filtering< / a > < / li >
< / ul >
< / div >
2010-08-17 09:42:13 +02:00
2011-04-26 08:30:31 +02:00
< div class = "demo_links" >
< h2 > Data sources< / h2 >
< ul >
< li > < a href = "../data_sources/dom.html" > DOM< / a > < / li >
< li > < a href = "../data_sources/js_array.html" > Javascript array< / a > < / li >
< li > < a href = "../data_sources/ajax.html" > Ajax source< / a > < / li >
< li > < a href = "../data_sources/server_side.html" > Server side processing< / a > < / li >
< / ul >
< h2 > Server-side processing< / h2 >
< ul >
< li > < a href = "../server_side/server_side.html" > Obtain server-side data< / a > < / li >
< li > < a href = "../server_side/custom_vars.html" > Add extra HTTP variables< / a > < / li >
< li > < a href = "../server_side/post.html" > Use HTTP POST< / a > < / li >
< li > < a href = "../server_side/ids.html" > Automatic addition of IDs and classes to rows< / a > < / li >
< li > < a href = "../server_side/object_data.html" > Reading table data from objects< / a > < / li >
< li > < a href = "../server_side/row_details.html" > Show and hide details about a particular record< / a > < / li >
< li > < a href = "../server_side/select_rows.html" > User selectable rows (multiple rows)< / a > < / li >
< li > < a href = "../server_side/jsonp.html" > JSONP for a cross domain data source< / a > < / li >
< li > < a href = "../server_side/editable.html" > jEditable integration with DataTables< / a > < / li >
< li > < a href = "../server_side/defer_loading.html" > Deferred loading of Ajax data< / a > < / li >
< li > < a href = "../server_side/column_ordering.html" > Custom column ordering (in callback data)< / a > < / li >
< li > < a href = "../server_side/pipeline.html" > Pipelining data (reduce Ajax calls for paging)< / a > < / li >
< / ul >
< h2 > Ajax data source< / h2 >
< ul >
< li > < a href = "../ajax/ajax.html" > Ajax sourced data (array of arrays)< / a > < / li >
< li > < a href = "../ajax/objects.html" > Ajax sourced data (array of objects)< / a > < / li >
< li > < a href = "../ajax/defer_render.html" > Deferred DOM creation for extra speed< / a > < / li >
< li > < a href = "../ajax/null_data_source.html" > Empty data source columns< / a > < / li >
< li > < a href = "../ajax/custom_data_property.html" > Use a data source other than aaData (the default)< / a > < / li >
< li > < a href = "../ajax/objects_subarrays.html" > Read column data from sub-arrays< / a > < / li >
< li > < a href = "../ajax/deep.html" > Read column data from deeply nested properties< / a > < / li >
< / ul >
< h2 > Plug-ins< / h2 >
< ul >
< li > < a href = "../plug-ins/plugin_api.html" > Add custom API functions< / a > < / li >
< li > < a href = "../plug-ins/sorting_plugin.html" > Sorting and automatic type detection< / a > < / li >
< li > < a href = "../plug-ins/sorting_sType.html" > Sorting without automatic type detection< / a > < / li >
< li > < a href = "../plug-ins/paging_plugin.html" > Custom pagination controls< / a > < / li >
< li > < a href = "../plug-ins/range_filtering.html" > Range filtering / custom filtering< / a > < / li >
< li > < a href = "../plug-ins/dom_sort.html" > Live DOM sorting< / a > < / li >
< li > < a href = "../plug-ins/html_sort.html" > Automatic HTML type detection< / a > < / li >
< / ul >
< / div >
2010-08-17 09:42:13 +02:00
2011-04-26 08:30:31 +02:00
< div id = "footer" class = "clear" style = "text-align:center;" >
< p >
Please refer to the < a href = "http://www.datatables.net/usage" > DataTables documentation< / a > for full information about its API properties and methods.< br >
Additionally, there are a wide range of < a href = "http://www.datatables.net/extras" > extras< / a > and < a href = "http://www.datatables.net/plug-ins" > plug-ins< / a > which extend the capabilities of DataTables.
< / p >
< span style = "font-size:10px;" >
DataTables designed and created by < a href = "http://www.sprymedia.co.uk" > Allan Jardine< / a > © 2007-2011< br >
DataTables is dual licensed under the < a href = "http://www.datatables.net/license_gpl2" > GPL v2 license< / a > or a < a href = "http://www.datatables.net/license_bsd" > BSD (3-point) license< / a > .
< / span >
2010-08-17 09:42:13 +02:00
< / div >
< / div >
< / body >
< / html >
