rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-02-01 00:52:11 +01:00
Code Issues Releases Activity
DataTables/examples/ajax/objects_subarrays.html

193 lines
9.6 KiB
HTML
Raw Normal View History

Size: The default formatNumber method has been reduced in size. - Exactly the same functionality, but now uses a regex to perform the same operation
2013-09-23 11:44:58 +01:00
<!DOCTYPE html>
New: Significant change to how data is handled by DataTables. DataTables now has the ability to deal with complex objects as data sourced, which is particularly useful for dealing with Ajax data, and other data which doesn't belong in the visible table (db IDs for example). See the examples/ajax/ files that are in this commit for examples on how this works. More unit tests and further tidy up to come. Detailed examples will also be added in future - the current examples are mainly for testing
2011-04-19 19:35:33 +01:00
<html>
Size: The default formatNumber method has been reduced in size. - Exactly the same functionality, but now uses a regex to perform the same operation
2013-09-23 11:44:58 +01:00
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Nested object data (arrays)</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() {
$('#example').dataTable( {
"ajax": "sources/objects_subarrays.txt",
"columns": [
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform[, ]" },
{ "data": "details.0" },
{ "data": "details.1" }
New: New examples for the various features of DataTables 1.8
2011-04-25 19:07:57 +01:00
]
New: Significant change to how data is handled by DataTables. DataTables now has the ability to deal with complex objects as data sourced, which is particularly useful for dealing with Ajax data, and other data which doesn't belong in the visible table (db IDs for example). See the examples/ajax/ files that are in this commit for examples on how this works. More unit tests and further tidy up to come. Detailed examples will also be added in future - the current examples are mainly for testing
2011-04-19 19:35:33 +01:00
} );
Size: The default formatNumber method has been reduced in size. - Exactly the same functionality, but now uses a regex to perform the same operation
2013-09-23 11:44:58 +01:00
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<h1>DataTables example - Nested object data (arrays)</h1>
<p>Information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables
through the <a href="//datatables.net/init/columns.data"><code>columns.data</code></a> option. The <a href=
"//datatables.net/init/columns.data"><code>columns.data</code></a> has the ability to read information not only
from objects, but also from arrays using the same dotted object syntax as for objects, but additionally, when
working with an array data source <a href="//datatables.net/init/columns.data"><code>columns.data</code></a>
can process the data to combine and display the data in simple forms (more complex forms can be defined by
using <a href="//datatables.net/init/columns.data"><code>columns.data</code></a> as a function).</p>
<p>This example shows two different aspects of using <a href=
"//datatables.net/init/columns.data"><code>columns.data</code></a> to read arrays:</p>
<ul>
<li>The <em>Platform</em> column is sourced from an array of items, which are automatically concatenated
together. This is done by using array bracket syntax, with the characters between the brackets being used
as the glue between elements (e.g. <code>platform[, ]</code>).</li>
<li>The <em>Version</em> and <em>Grade</em> columns are read directly from array elements using dotted
object notation (e.g. <code>details.0</code>).</li>
</ul>
<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="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li class="active"><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">AJAX custom data source example</a></li>
<li><a href="./defer_render.html">AJAX deferred rendering example</a></li>
</ul>
<h3><a href="../server_side/index.html">Server Side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">POST data</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/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>
New: Significant change to how data is handled by DataTables. DataTables now has the ability to deal with complex objects as data sourced, which is particularly useful for dealing with Ajax data, and other data which doesn't belong in the visible table (db IDs for example). See the examples/ajax/ files that are in this commit for examples on how this works. More unit tests and further tidy up to come. Detailed examples will also be added in future - the current examples are mainly for testing
2011-04-19 19:35:33 +01:00
</html>
Reference in New Issue Copy Permalink