Size: The default formatNumber method has been reduced in size.

- Exactly the same functionality, but now uses a regex to perform the
  same operation
This commit is contained in:
Allan Jardine
2013-09-23 11:44:58 +01:00
parent e61e402e37
commit 4e5cad9640
141 changed files with 28091 additions and 49142 deletions

View File

@@ -1,256 +1,200 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<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">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Row selection</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<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" language="javascript">
$(document).ready(function() {
var aSelected = [];
/* Init the table */
var selected = [];
$("#example").dataTable({
"processing": true,
"serverSide": true,
"ajax": "scripts/id.php",
"rowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
$(nRow).addClass('row_selected');
"rowCallback": function( row, data, displayIndex ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('row_selected');
}
}
});
/* Click event handler */
$('#example tbody tr').live('click', function () {
$('#example tbody').on('click', 'tr', function () {
var id = this.id;
var index = jQuery.inArray(id, aSelected);
var index = $.inArray(id, selected);
if ( index === -1 ) {
aSelected.push( id );
selected.push( id );
} else {
aSelected.splice( index, 1 );
selected.splice( index, 1 );
}
$(this).toggleClass('row_selected');
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables 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 assigned to the TR element (this is done automatically through the use of the <i>DT_RowId</i> special property returned as part of the object given by the server for each row).</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<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>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 class="brush: js;">$(document).ready(function() {
var aSelected = [];
/* Init the table */
$("#example").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/id.php",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
$(nRow).addClass('row_selected');
}
}
});
/* Click event handler */
$('#example tbody tr').live('click', function () {
var id = this.id;
var index = jQuery.inArray(id, aSelected);
if ( index === -1 ) {
aSelected.push( id );
} else {
aSelected.splice( index, 1 );
}
$(this).toggleClass('row_selected');
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<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/flexible_width.html">Flexible table width</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</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>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</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>
<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/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>
<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> &copy; 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>
</div>
</div>
</body>
</script>
</head>
<body class="dt-example">
<div class="container">
<h1>DataTables example - Row selection</h1>
<p>When you want to detail with user selectable rows and DataTables, it is relatively simple when using DOM
based data - but when using server-side processing, DataTables doesn't retain DOM row elements over pages /
filtering etc. As such, you will need to keep a track of which rows a user as selected and mark them as
selected on each draw.</p>
<p>This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically
through the use of the <code>DT_RowId</code> special property returned as part of the object given by the
server for each row).</p>
<section>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</section>
<section>
<h3><a href="../basic_init/index.html">Basic Init</a></h3>
<ul class="toc">
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/language.html">Language options</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/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/themes.html">jQuery UI themes</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
</ul>
<h3><a href="../advanced_init/index.html">Advanced Init</a></h3>
<ul class="toc">
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="../advanced_init/defaults.html">Defaults</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/events_live.html">Events</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Row grouping</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
</ul>
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</ul>
<h3><a href="../data_sources/index.html">Data Sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">DOM sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">AJAX custom data source example</a></li>
<li><a href="../ajax/defer_render.html">AJAX deferred rendering example</a></li>
</ul>
<h3><a href="./index.html">Server Side</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Server-side processing</a></li>
<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
<li><a href="./post.html">POST data</a></li>
<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="./object_data.html">Object data source</a></li>
<li><a href="./row_details.html">POST data</a></li>
<li class="active"><a href="./select_rows.html">Row selection</a></li>
<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="./defer_loading.html">Deferred loading of data</a></li>
<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
<h3><a href="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select inputs)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
</ul>
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
</ul>
</section>
</div>
</body>
</html>