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;
var gaiSelected = [];
$(document).ready(function() {
$('#form').submit( function() {
alert (gaiSelected);
return false;
} );
/* Init the table */
oTable = $("#example").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_id.php",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
},
"aoColumnDefs": [
{ "bVisible": 0, "aTargets": [0] }
]
});
/* Click event handler */
$('#example tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
if ( jQuery.inArray(iId, gaiSelected) == -1 )
{
gaiSelected[gaiSelected.length++] = iId;
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
$(this).toggleClass('row_selected');
} );
} );
< / script >
< / head >
< body id = "dt_example" >
< div id = "container" >
< div class = "full_width big" >
< i > DataTables< / i > server-side processing with user selectable rows example
< / div >
< h1 > Preamble< / h1 >
< p > When you want to detail with user selectable rows and DataTables, it is relatively simple when using DOM based data - but if using server-side processing, DataTables doesn't retain state over pages / filters etc, leaving this to the server-side instead. As such, you will need to keep a track of which rows a user as selected and mark them as selected on each draw. This is shown in this demo, which uses a unique ID in the first (and hidden) column.< / p >
< p > Credit for this example belongs with forum member < a href = "http://datatables.net/forums/comments.php?DiscussionID=582&page=1#Item_4" > iuliandum< / a > . Thanks!< / p >
< h1 > Live example< / h1 >
< div id = "dynamic" >
< table cellpadding = "0" cellspacing = "0" border = "0" class = "display" id = "example" >
< thead >
< tr >
< th width = "0%" > ID< / th >
< th width = "20%" > Rendering engine< / th >
< th width = "25%" > Browser< / th >
< th width = "25%" > Platform(s)< / th >
< th width = "15%" > Engine version< / th >
< th width = "15%" > CSS grade< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td colspan = "5" class = "dataTables_empty" > Loading data from server< / td >
< / tr >
< / tbody >
< tfoot >
< tr >
< th > ID< / 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;
var gaiSelected = [];
$(document).ready(function() {
$('#form').submit( function() {
alert (gaiSelected);
return false;
} );
/* Init the table */
oTable = $("#example").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_id.php",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
},
"aoColumns": [
{ "bVisible": 0, "aTargets": [0] }
]
});
/* Click event handler */
$('#example tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];
if ( jQuery.inArray(iId, gaiSelected) == -1 )
{
gaiSelected[gaiSelected.length++] = iId;
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
$(this).toggleClass('row_selected');
} );
} );< / pre >
< h1 > Other examples< / h1 >
< 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/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:
< 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 > /
2010-09-05 11:21:26 +02:00
< a href = "../basic_init/scroll_y_theme.html" > Themed< / a > /
< a href = "../basic_init/scroll_y_infinite.html" > Infinite< / a >
2010-08-17 09:42:13 +02:00
< / 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 > < a href = "../advanced_init/events_pre_init.html" > Events (pre initialisation)< / a > < / li >
< li > < a href = "../advanced_init/events_post_init.html" > Events (post initialisation)< / 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/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/complex_header.html" > Column grouping through col/row spans< / 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/language_file.html" > Change language information from a file (internationalisation)< / a > < / li >
< / ul >
< 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/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 >
< 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 >
< / 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 >
< 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 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 >
< p > Please refer to the < a href = "http://www.datatables.net/" > < i > DataTables< / i > documentation< / a > for full information about its API properties and methods.< / p >
< div id = "footer" style = "text-align:center;" >
< span style = "font-size:10px;" > DataTables © Allan Jardine 2008-2010< / span >
< / div >
< / div >
< / body >
< / html >
