From 43400684a4a505a30842b9af7408798160ed5847 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Thu, 19 Dec 2013 14:03:24 +0000 Subject: [PATCH] Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes --- .datatables-commit-sync | 2 +- examples/advanced_init/column_render.html | 23 +++++------- examples/advanced_init/complex_header.html | 17 ++++----- examples/advanced_init/defaults.html | 23 +++++------- .../advanced_init/dom_multiple_elements.html | 22 +++++------- examples/advanced_init/dom_toolbar.html | 23 +++++------- examples/advanced_init/dt_events.html | 30 +++++++--------- examples/advanced_init/events_live.html | 13 +++---- examples/advanced_init/footer_callback.html | 21 +++++------ .../advanced_init/html5-data-attributes.html | 13 +++---- examples/advanced_init/language_file.html | 20 +++++------ examples/advanced_init/length_menu.html | 17 ++++----- examples/advanced_init/row_callback.html | 19 ++++------ examples/advanced_init/row_grouping.html | 17 ++++----- .../advanced_init/sort_direction_control.html | 15 +++----- examples/ajax/custom_data_flat.html | 26 ++++++-------- examples/ajax/custom_data_property.html | 27 ++++++-------- examples/ajax/deep.html | 17 ++++----- examples/ajax/defer_render.html | 15 +++----- examples/ajax/index.html | 5 +-- examples/ajax/null_data_source.html | 35 +++++++++---------- examples/ajax/objects.html | 20 +++++------ examples/ajax/objects_subarrays.html | 32 ++++++++--------- examples/ajax/simple.html | 28 +++++++-------- examples/api/add_row.html | 27 ++++++-------- examples/api/api_in_init.html | 23 +++++------- examples/api/counter_columns.html | 26 ++++++-------- examples/api/form.html | 22 +++++------- examples/api/highlight.html | 21 +++++------ examples/api/multi_filter.html | 23 +++++------- examples/api/multi_filter_select.html | 25 ++++++------- examples/api/regex.html | 21 +++++------ examples/api/row_details.html | 23 +++++------- examples/api/select_row.html | 15 +++----- examples/api/select_single_row.html | 19 ++++------ examples/api/show_hide.html | 21 +++++------ examples/api/tabs_and_scrolling.html | 19 ++++------ examples/basic_init/alt_pagination.html | 21 +++++------ examples/basic_init/complex_header.html | 20 +++++------ examples/basic_init/dom.html | 32 ++++++++--------- examples/basic_init/filter_only.html | 13 +++---- examples/basic_init/flexible_width.html | 15 +++----- examples/basic_init/hidden_columns.html | 17 ++++----- examples/basic_init/language.html | 17 ++++----- examples/basic_init/multi_col_sort.html | 21 +++++------ examples/basic_init/multiple_tables.html | 15 +++----- examples/basic_init/scroll_x.html | 23 +++++------- examples/basic_init/scroll_xy.html | 15 +++----- examples/basic_init/scroll_y.html | 29 +++++++-------- examples/basic_init/scroll_y_theme.html | 13 +++---- examples/basic_init/state_save.html | 29 +++++++-------- examples/basic_init/table_sorting.html | 23 +++++------- examples/basic_init/zero_configuration.html | 13 +++---- examples/data_sources/ajax.html | 31 ++++++++-------- examples/data_sources/dom.html | 13 +++---- examples/data_sources/js_array.html | 22 +++++------- examples/data_sources/server_side.html | 17 ++++----- examples/plug-ins/api.html | 15 +++----- examples/plug-ins/dom_sort.html | 18 ++++------ examples/plug-ins/range_filtering.html | 13 +++---- examples/plug-ins/sorting_auto.html | 13 +++---- examples/plug-ins/sorting_manual.html | 21 +++++------ examples/resources/demo.css | 22 +++++++----- examples/resources/demo.js | 15 ++++---- examples/server_side/custom_vars.html | 18 ++++------ examples/server_side/defer_loading.html | 17 ++++----- examples/server_side/ids.html | 13 +++---- examples/server_side/index.html | 4 +-- examples/server_side/jsonp.html | 27 ++++++-------- examples/server_side/object_data.html | 18 ++++------ examples/server_side/pipeline.html | 19 ++++------ examples/server_side/post.html | 27 ++++++-------- examples/server_side/row_details.html | 25 ++++++------- examples/server_side/select_rows.html | 13 +++---- examples/server_side/simple.html | 17 ++++----- examples/styling/bootstrap.html | 13 +++---- examples/styling/cell-border.html | 13 +++---- examples/styling/display.html | 13 +++---- examples/styling/foundation.html | 13 +++---- examples/styling/hover.html | 13 +++---- examples/styling/jqueryUI.html | 26 ++++++-------- examples/styling/no-classes.html | 13 +++---- examples/styling/order-column.html | 13 +++---- examples/styling/row-border.html | 13 +++---- examples/styling/stripe.html | 13 +++---- 85 files changed, 625 insertions(+), 997 deletions(-) diff --git a/.datatables-commit-sync b/.datatables-commit-sync index 8eda34c8..f7e0c28d 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -c22b302995481a5da1b91cebaeae97183ce2fa7d +0f0ac66cb61d2858439d0faead1375fc1ca34e7e diff --git a/examples/advanced_init/column_render.html b/examples/advanced_init/column_render.html index 9faf619e..d2035147 100644 --- a/examples/advanced_init/column_render.html +++ b/examples/advanced_init/column_render.html @@ -46,12 +46,12 @@ $(document).ready(function() {

Each column has an optional rendering control called columns.render which can be used to process the content of each cell - before the data is used. columns.render has a wide array of options available to it for - rendering different types of data orthogonally (ordering, searching, display etc), but it can be used - very simply to manipulate the content of a cell, as shown here.

+ before the data is used. columns.render has a wide array of options available + to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can + be used very simply to manipulate the content of a cell, as shown here.

This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links, assigning colours based on content rules and any @@ -550,9 +550,8 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"columnDefs": [ 
 			{
@@ -567,8 +566,7 @@ $(document).ready(function() {
 			{ "visible": false,  "targets": [ 3 ] }
 		]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -590,10 +588,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/complex_header.html b/examples/advanced_init/complex_header.html index 24f86b96..925de457 100644 --- a/examples/advanced_init/complex_header.html +++ b/examples/advanced_init/complex_header.html @@ -43,9 +43,9 @@ $(document).ready(function() {

In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan attributes for each cell are automatically calculated and rendered on the page for you. This allows the columns.visible option and column().visible() method to take into account rowspan / colspan cells, drawing the header correctly.

@@ -552,17 +552,15 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"columnDefs": [ {
 			"visible": false,
 			"targets": -1
 		} ]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -584,10 +582,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/defaults.html b/examples/advanced_init/defaults.html index 08974b39..f906189d 100644 --- a/examples/advanced_init/defaults.html +++ b/examples/advanced_init/defaults.html @@ -40,11 +40,11 @@ $(document).ready(function() {

When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set dom to a - common value so all tables get the same layout). This can be done using the - $.fn.dataTable.defaults object. This object will take all of the same parameters as the - DataTables initialisation object, but in this case you are setting the default for all future - initialisations of DataTables.

+ "//datatables.net/reference/option/dom">dom to a common value so all tables get the same layout). This can + be done using the $.fn.dataTable.defaults object. This object will take all of the same + parameters as the DataTables initialisation object, but in this case you are setting the default for + all future initialisations of DataTables.

This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.

@@ -542,9 +542,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$.extend( $.fn.dataTable.defaults, {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$.extend( $.fn.dataTable.defaults, {
 	"searching": false,
 	"ordering": false
 } );
@@ -552,8 +551,7 @@ $.extend( $.fn.dataTable.defaults, {
 
 $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -575,10 +573,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/dom_multiple_elements.html b/examples/advanced_init/dom_multiple_elements.html index 1d652098..948295ba 100644 --- a/examples/advanced_init/dom_multiple_elements.html +++ b/examples/advanced_init/dom_multiple_elements.html @@ -43,9 +43,10 @@ $(document).ready(function() {

As is described by the basic DOM positioning example you can use the dom - initialisation parameter to move DataTables features around the table to where you want them. In - addition to this, you can also use dom initialisation parameter to move DataTables features around the + table to where you want them. In addition to this, you can also use dom to create multiple instances of these table controls. Simply include the feature's identification letter where you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table ('t') should be included only once).

@@ -546,14 +547,12 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -575,16 +574,13 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-div.dataTables_length {
+						below:
div.dataTables_length {
 	padding-left: 2em;
 	}
 	div.dataTables_length,
 	div.dataTables_filter {
 		padding-top: 0.55em;
-	}
-
+ }

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/dom_toolbar.html b/examples/advanced_init/dom_toolbar.html index 0700a21b..1269a974 100644 --- a/examples/advanced_init/dom_toolbar.html +++ b/examples/advanced_init/dom_toolbar.html @@ -45,13 +45,13 @@ $(document).ready(function() {

DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom elements. In this example a div with a class of 'toolbar' is created using dom, with - which HTML is inserted to create the toolbar. You could put whatever HTML you want into the toolbar and - add event handlers etc.

+ "//datatables.net/reference/option/dom">dom, with which HTML is inserted to create the toolbar. You could + put whatever HTML you want into the toolbar and add event handlers etc.

For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which are used in a table by a single character - reference in the dom option (like the built in option of f refers to 'filtering input', you could have an F option which creates your own filtering input control, custom to your app).

@@ -553,16 +553,14 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"dom": '<"toolbar">frtip'
 	} );
 
 	$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -584,12 +582,9 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-.toolbar {
+						below:
.toolbar {
 	float: left;
-}
-
+}

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/dt_events.html b/examples/advanced_init/dt_events.html index 3886241e..dae1909d 100644 --- a/examples/advanced_init/dt_events.html +++ b/examples/advanced_init/dt_events.html @@ -48,15 +48,16 @@ $(document).ready(function() {

All custom events fired by DataTables are fired with the namespace dt in order to prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables on() method can be used - like the jQuery on() method, but will automatically append the dt namespace - if required.

+ "//datatables.net/reference/api/on()">on() method can + be used like the jQuery on() method, but will automatically append the dt + namespace if required.

-

This example shows the use of the sort, search and page events by adding a notification that the event fired to an element on the page - to show that they have indeed fired.

+

This example shows the use of the sort, search and page events by + adding a notification that the event fired to an element on the page to show that they have indeed + fired.

@@ -553,9 +554,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var eventFired = function ( type ) {
 		var n = $('#demo_info')[0];
 		n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>';
@@ -567,8 +567,7 @@ $(document).ready(function() {
 		.on( 'search.dt', function () { eventFired( 'Search' ); } )
 		.on( 'page.dt',   function () { eventFired( 'Page' ); } )
 		.dataTable();
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -590,10 +589,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/events_live.html b/examples/advanced_init/events_live.html index 6b06391a..aac022f1 100644 --- a/examples/advanced_init/events_live.html +++ b/examples/advanced_init/events_live.html @@ -538,17 +538,15 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable();
 	
 	$('#example tbody').on('click', 'tr', function () {
 		var name = $('td', this).eq(0).text();
 		alert( 'You clicked on '+name+'\'s row' );
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -570,10 +568,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/footer_callback.html b/examples/advanced_init/footer_callback.html index f822063c..e13662cb 100644 --- a/examples/advanced_init/footer_callback.html +++ b/examples/advanced_init/footer_callback.html @@ -67,17 +67,17 @@ $(document).ready(function() {

Through the use of the header and footer callback manipulation functions provided by DataTables - (headerCallback and footerCallback), it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.

The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the column().data() API method and column().footer() for writing the value into the footer.

@@ -511,9 +511,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"footerCallback": function ( row, data, start, end, display ) {
 			var api = this.api();
@@ -547,8 +546,7 @@ $(document).ready(function() {
 			);
 		}
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -570,10 +568,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-th { white-space: nowrap; }
-
+ below:

th { white-space: nowrap; }

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/html5-data-attributes.html b/examples/advanced_init/html5-data-attributes.html index 33788450..c3c52091 100644 --- a/examples/advanced_init/html5-data-attributes.html +++ b/examples/advanced_init/html5-data-attributes.html @@ -550,12 +550,10 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable();
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -577,10 +575,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/language_file.html b/examples/advanced_init/language_file.html index 031ab95a..79f6509a 100644 --- a/examples/advanced_init/language_file.html +++ b/examples/advanced_init/language_file.html @@ -37,9 +37,10 @@ $(document).ready(function() {

As well as being able to pass language information to DataTables through the language - initialisation option, you can also store the language information in a file, which DataTables can load - by Ajax using the language initialisation option, you can also store the language + information in a file, which DataTables can load by Ajax using the language.url option.

The following example shows DataTables reading a German language file.

@@ -537,16 +538,14 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"language": {
 			"url": "../resources/de_DE.txt"
 		}
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -568,10 +567,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/length_menu.html b/examples/advanced_init/length_menu.html index cad2a793..5b8fae65 100644 --- a/examples/advanced_init/length_menu.html +++ b/examples/advanced_init/length_menu.html @@ -35,8 +35,8 @@ $(document).ready(function() {

It is possible to easily customise the options shown in the length menu (by default at the top left - of the table) using the lengthMenu initialisation option.

+ of the table) using the lengthMenu initialisation option.

This parameter can take one of two forms:

@@ -541,14 +541,12 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -570,10 +568,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/row_callback.html b/examples/advanced_init/row_callback.html index 5765a1a9..932cc484 100644 --- a/examples/advanced_init/row_callback.html +++ b/examples/advanced_init/row_callback.html @@ -45,13 +45,13 @@ $(document).ready(function() {

The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the createdRow function is called once and once only. It is passed the create row node which can then be modified.

In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $4,000. Note that createdCell could also be used to create exactly the same effect.

@@ -548,9 +548,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"createdRow": function ( row, data, index ) {
 			if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
@@ -558,8 +557,7 @@ $(document).ready(function() {
 			}
 		}
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -581,13 +579,10 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-td.highlight {
+						below:
td.highlight {
 		font-weight: bold;
 		color: blue;
-	}
-
+ }

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/row_grouping.html b/examples/advanced_init/row_grouping.html index f39e5cbb..21acd50c 100644 --- a/examples/advanced_init/row_grouping.html +++ b/examples/advanced_init/row_grouping.html @@ -75,7 +75,7 @@ $(document).ready(function() {

In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator is added by the drawCallback function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering @@ -574,9 +574,8 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var table = $('#example').DataTable({
 		"columnDefs": [
 			{ "visible": false, "targets": 2 }
@@ -610,8 +609,7 @@ $(document).ready(function() {
 			table.order( [ 2, 'asc' ] ).draw();
 		}
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -633,13 +631,10 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-tr.group,
+						below:
tr.group,
 tr.group:hover {
 	background-color: #ddd !important;
-}
-
+}

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/advanced_init/sort_direction_control.html b/examples/advanced_init/sort_direction_control.html index 46713697..ac825f5c 100644 --- a/examples/advanced_init/sort_direction_control.html +++ b/examples/advanced_init/sort_direction_control.html @@ -43,7 +43,7 @@ $(document).ready(function() {

At times you may wish to change the default ordering direction sequence for columns (some or all of them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of - the columns.orderSequence initialisation parameter. This parameter also allows you to limit the ordering to a single direction, or you could add complex behaviour to the ordering interaction.

@@ -556,9 +556,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"aoColumns": [
 			null,
@@ -569,8 +568,7 @@ $(document).ready(function() {
 			null
 		]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -592,10 +590,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/custom_data_flat.html b/examples/ajax/custom_data_flat.html index 02160aa0..579109ab 100644 --- a/examples/ajax/custom_data_flat.html +++ b/examples/ajax/custom_data_flat.html @@ -46,10 +46,10 @@ $(document).ready(function() {

When loading data from an Ajax source, by default, DataTables will look for the data to use in the data parameter of a returned object (e.g. { "data": [...] }). This can easily be change by using the dataSrc option of the ajax - initiation option.

+ "//datatables.net/reference/option/ajax">ajax initiation option.

-

The The ajax.dataSrc has a number of ways in which it can be used:

    @@ -62,9 +62,10 @@ $(document).ready(function() { Javascript object). The value returned from the function is used as the data for the table.
-

The example below shows ajax.dataSrc being used as an empty string. This tells DataTables - that the JSON loaded is a plain array, not an object with an array inside it as is the default.

+

The example below shows ajax.dataSrc being used as an empty string. This + tells DataTables that the JSON loaded is a plain array, not an object with an array inside it as is the + default.

@@ -100,9 +101,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": {
 			"url": "data/objects_root_array.txt",
@@ -117,8 +117,7 @@ $(document).ready(function() {
 			{ "data": "salary" }
 		]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -140,10 +139,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/custom_data_property.html b/examples/ajax/custom_data_property.html index e9871f19..7ca5d611 100644 --- a/examples/ajax/custom_data_property.html +++ b/examples/ajax/custom_data_property.html @@ -38,10 +38,10 @@ $(document).ready(function() {

When loading data from an Ajax source, by default, DataTables will look for the data to use in the data parameter of a returned object (e.g. { "data": [...] }). This can easily be change by using the dataSrc option of the ajax - initiation option.

+ "//datatables.net/reference/option/ajax">ajax initiation option.

-

The The ajax.dataSrc has a number of ways in which it can be used:

    @@ -54,10 +54,10 @@ $(document).ready(function() { Javascript object). The value returned from the function is used as the data for the table.
-

The example below shows ajax.dataSrc being used as a string to get the data from a different - source property, in this case demo but it could be any - value, included a nested property by using standard dotted Javascript object notation.

+

The example below shows ajax.dataSrc being used as a string to get the data + from a different source property, in this case demo but it + could be any value, included a nested property by using standard dotted Javascript object notation.

@@ -93,17 +93,15 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": {
 			"url": "data/arrays_custom_prop.txt",
 			"dataSrc": "demo"
 		}
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -125,10 +123,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/deep.html b/examples/ajax/deep.html index 3b82edbb..b1583827 100644 --- a/examples/ajax/deep.html +++ b/examples/ajax/deep.html @@ -42,11 +42,11 @@ $(document).ready(function() {

DataTables has the ability to use data from almost data JSON data source through the use of the - columns.data option. In its simplest case, it can be used to read arbitrary object properties, but can also be extended to n levels of nested objects / arrays through the use of standard Javascript dotted object notation. Each dot (.) in the - columns.data option represents another object level.

In this example hr.position refers to the position property of the @@ -106,9 +106,8 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"ajax": "data/objects_deep.txt",
@@ -121,8 +120,7 @@ $(document).ready(function() {
 			{ "data": "hr.salary" }
 		]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -144,10 +142,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/defer_render.html b/examples/ajax/defer_render.html index 40a02a1f..20262818 100644 --- a/examples/ajax/defer_render.html +++ b/examples/ajax/defer_render.html @@ -35,7 +35,7 @@ $(document).ready(function() {

When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in deferred rendering option in DataTables with the - deferRender option.

When deferred rendering is enabled, rather than having DataTables create all

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": "data/arrays.txt",
 		"deferRender": true
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -113,10 +111,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/index.html b/examples/ajax/index.html index 958fa777..710ecfc0 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -19,8 +19,9 @@

DataTables can read data from a server via Ajax, while still performing searching, ordering, paging etc on the client-side. This is done through use of the ajax option, - which has a number of options to customise how the data is retrieved from the server.

+ "//datatables.net/reference/option/ajax">ajax option, which has a number of options to customise how the data + is retrieved from the server.

The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.

diff --git a/examples/ajax/null_data_source.html b/examples/ajax/null_data_source.html index 9f44f835..6a562421 100644 --- a/examples/ajax/null_data_source.html +++ b/examples/ajax/null_data_source.html @@ -46,26 +46,28 @@ $(document).ready(function() { number of ways:

-

This examples shows the use of columns.defaultContent to create a button - element in the last column of the table. A simple jQuery click event listener is used to - watch for clicks on the row, and when activated uses the This examples shows the use of columns.defaultContent to create a button element in the + last column of the table. A simple jQuery click event listener is used to watch for clicks + on the row, and when activated uses the row().data() method to get the data for the row and show a bit of information about it in an alert box. This is a simple use case, but it can be built up to be arbitrarily complex.

-

Note also that the columns.data option for the column has been set to null - to indicate that the column has no information that should be obtained data source object.

+

Note also that the columns.data option for the column has been set to + null to indicate that the column has no information that should be obtained data source + object.

@@ -101,9 +103,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var table = $('#example').DataTable( {
 		"ajax": "data/arrays.txt",
 		"columnDefs": [ {
@@ -117,8 +118,7 @@ $(document).ready(function() {
 		var data = table.row( $(this).parents('tr') ).data();
 		alert( data[0] +"'s salary is: "+ data[ 5 ] );
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -140,10 +140,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/objects.html b/examples/ajax/objects.html index cfd31edd..fcdbbf00 100644 --- a/examples/ajax/objects.html +++ b/examples/ajax/objects.html @@ -46,9 +46,10 @@ $(document).ready(function() { working with the data much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.

-

This can be done quite simply by using the columns.data option which you use to tell DataTables - which property to use from the data source object for each column.

+

This can be done quite simply by using the columns.data option which you use to tell DataTables which property + to use from the data source object for each column.

In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example is:

@@ -98,9 +99,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": "data/objects.txt",
 		"columns": [
@@ -112,8 +112,7 @@ $(document).ready(function() {
 			{ "data": "salary" }
 		]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -135,10 +134,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/objects_subarrays.html b/examples/ajax/objects_subarrays.html index 3a53b405..6badf44b 100644 --- a/examples/ajax/objects_subarrays.html +++ b/examples/ajax/objects_subarrays.html @@ -41,21 +41,22 @@ $(document).ready(function() {

The information read from an Ajax data source can be arbitrarily complex, but still be displayed by - DataTables through the columns.data option, which is particularly useful for working with - JSON feeds in an already defined format.

+ DataTables through the columns.data option, which is particularly useful for working + with JSON feeds in an already defined format.

-

The The columns.data option has the ability to read information not only from objects, but also from arrays using the same dotted object syntax as for objects. In addition to - this, when working with an array data source columns.data can process the data to combine and - display the data in simple forms (more complex forms can be defined by using columns.data can process the data to combine and display the data in + simple forms (more complex forms can be defined by using columns.data as a function).

This example shows two different aspects of using columns.data to read arrays:

    @@ -119,9 +120,8 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": "data/objects_subarrays.txt",
 		"columns": [
@@ -133,8 +133,7 @@ $(document).ready(function() {
 			{ "data": "hr.1" }
 		]
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -156,10 +155,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/ajax/simple.html b/examples/ajax/simple.html index 97d44ecb..1a04fb13 100644 --- a/examples/ajax/simple.html +++ b/examples/ajax/simple.html @@ -34,19 +34,20 @@ $(document).ready(function() {

    DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting the ajax option - to the address of the JSON data source.

    + "//datatables.net/reference/option/ajax">ajax option to the address of the JSON data source.

    -

    The The ajax option also allows for more advanced configuration such as - altering how the Ajax request is made. See the ajax documentation or the other Ajax examples for - DataTables for further information.

    + altering how the Ajax request is made. See the ajax documentation or the other Ajax examples for DataTables for + further information.

    By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the column.data option, shown in other examples).

    The example below shows DataTables loading data for a table from arrays as the data source, where @@ -97,14 +98,12 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": "data/arrays.txt"
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -126,10 +125,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/add_row.html b/examples/api/add_row.html index ff43d04a..a9574cc4 100644 --- a/examples/api/add_row.html +++ b/examples/api/add_row.html @@ -49,15 +49,15 @@ $(document).ready(function() {

    New rows can be added to a DataTable very easily using the row.add() API - method. Simply call the API function with the data that is to be used for the new row (be it an array - or object). Multiple rows can be added using the rows.add() method - (note the plural).

    + "//datatables.net/reference/api/row.add()">row.add() + API method. Simply call the API function with the data that is to be used for the new row (be it an + array or object). Multiple rows can be added using the rows.add() + method (note the plural).

    Note that in order to see the new row in the table you must call the draw() method, which - is easily done through the chaining that the DataTables API makes use of.

    + "//datatables.net/reference/api/draw()">draw() method, + which is easily done through the chaining that the DataTables API makes use of.

    This example shows a single row being added each time the button below is clicked upon.

    @@ -93,9 +93,8 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	var t = $('#example').DataTable();
 	var counter = 1;
 
@@ -113,8 +112,7 @@ $(document).ready(function() {
 
 	// Automatically add a first row of data
 	$('#addRow').click();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -136,10 +134,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/api_in_init.html b/examples/api/api_in_init.html index e39d9506..6d3062ca 100644 --- a/examples/api/api_in_init.html +++ b/examples/api/api_in_init.html @@ -40,9 +40,9 @@ $(document).ready(function() {

    There are times when you may wish to call API functions inside the DataTables callback functions - (for example initComplete, rowCallback etc). The complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to a variable and then use that variable in the callback. However, all of DataTables' callback functions are executed in the scope of @@ -51,9 +51,9 @@ $(document).ready(function() { title="HTML tag">table node.

    In this example you will be able to see that the $() method is used to - get all cell nodes in the table's body and then act on them (in this case adding a click event). The - action here is to apply a filter to the table with the value of what is in each cell.

    + "//datatables.net/reference/api/%24()">$() method is + used to get all cell nodes in the table's body and then act on them (in this case adding a click + event). The action here is to apply a filter to the table with the value of what is in each cell.

    It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example shows the use of the API inside the @@ -552,9 +552,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"initComplete": function () {
 			var api = this.api();
@@ -563,8 +562,7 @@ $(document).ready(function() {
 			} );
 		}
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -586,10 +584,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/counter_columns.html b/examples/api/counter_columns.html index a87f45e3..7c1d70ef 100644 --- a/examples/api/counter_columns.html +++ b/examples/api/counter_columns.html @@ -51,15 +51,16 @@ $(document).ready(function() {

    This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs. This is done by listening for the order and search events emitted by - the table. When these events are detected the order and + search + events emitted by the table. When these events are detected the column().nodes() method is used to get the TD/TH nodes for the target column and the each() helper function used to iterate over each, which have their contents updated as needed. Note that the filter and order options are using in the - column() - method to get the nodes in the current order and with the currently applied filter.

    + column() method to get the nodes in the current order and with the currently + applied filter.

@@ -554,9 +555,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var t = $('#example').DataTable( {
 		"columnDefs": [ {
 			"searchable": false,
@@ -571,8 +571,7 @@ $(document).ready(function() {
 			cell.innerHTML = i+1;
 		} );
 	} ).draw();
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -594,10 +593,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/form.html b/examples/api/form.html index 3822c785..932911a1 100644 --- a/examples/api/form.html +++ b/examples/api/form.html @@ -47,10 +47,11 @@ $(document).ready(function() { pages requires a little bit of additional work to get the information that is not in the document any longer.

-

The $() - method can be used to get nodes from the document regardless of paging, ordering etc. This example - shows $() - being used to get all input elements from the table.

+

The $() method can be used to get nodes from the document regardless of paging, + ordering etc. This example shows $() being used to get all input + elements from the table.

In the example a simple alert() is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.

@@ -1616,9 +1617,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var table = $('#example').DataTable();
 
 	$('button').click( function() {
@@ -1629,8 +1629,7 @@ $(document).ready(function() {
 		);
 		return false;
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -1652,10 +1651,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/highlight.html b/examples/api/highlight.html index cdb11820..7cccf150 100644 --- a/examples/api/highlight.html +++ b/examples/api/highlight.html @@ -57,11 +57,11 @@ $(document).ready(function() { easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.

This example shows that in action on DataTable by making use of the cell().index() method to get the index of the column that is to be operated on, - and then the cells().nodes() and column().nodes() methods to remove old classes and apply the new highlighted class, respectively.

@@ -558,9 +558,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var lastIdx = null;
 	var table = $('#example').DataTable();
 	
@@ -576,8 +575,7 @@ $(document).ready(function() {
 		.on( 'mouseleave', function () {
 			$( table.cells().nodes() ).removeClass( 'highlight' );
 		} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -599,12 +597,9 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-td.highlight {
+						below:
td.highlight {
 	background-color: whitesmoke !important;
-}
-
+}

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/multi_filter.html b/examples/api/multi_filter.html index 9c00abbf..76a0e2ab 100644 --- a/examples/api/multi_filter.html +++ b/examples/api/multi_filter.html @@ -52,20 +52,20 @@ $(document).ready(function() { filter on specific columns only.

DataTables has the ability to apply filtering to a specific column through the column().search() method (note that the name of the method is search not filter since filter() is used to - apply a filter to a data set).

+ "//datatables.net/reference/api/filter()">filter() is + used to apply a filter to a data set).

The column filters are cumulative, so you can apply multiple individual column filters, in addition to the global filter, allowing complex filtering options to be presented to the user.

This examples shows text elements being used with the column().search() method to add input controls in the footer of the table for each column. Note that the *index*:visible option is used for the column selector to - ensure that the column() method takes into account any hidden columns when selecting the column to act upon.

@@ -562,9 +562,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	// Setup - add a text input to each footer cell
 	$('#example tfoot th').each( function () {
 		var title = $('#example thead th').eq( $(this).index() ).text();
@@ -581,8 +580,7 @@ $(document).ready(function() {
 			.search( this.value )
 			.draw();
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -604,10 +602,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/multi_filter_select.html b/examples/api/multi_filter_select.html index 6fe9876c..1029fb89 100644 --- a/examples/api/multi_filter_select.html +++ b/examples/api/multi_filter_select.html @@ -52,14 +52,14 @@ $(document).ready(function() {

After the table is initialised, the API is used to build the select inputs through the use of the column().data() method to get the data for each column in turn. The helper - methods unique() and sort() are also used to reduce the data for set input to unique and ordered - elements. Finally the change event from the unique() and sort() are also used to reduce the data for set input to unique and + ordered elements. Finally the change event from the select input is used to trigger a column search using the column().search() method.

@@ -555,9 +555,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var table = $('#example').DataTable();
 
 	$("#example tfoot th").each( function ( i ) {
@@ -573,8 +572,7 @@ $(document).ready(function() {
 			select.append( '<option value="'+d+'">'+d+'</option>' )
 		} );
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -596,10 +594,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/regex.html b/examples/api/regex.html index 45afed3e..0342f41c 100644 --- a/examples/api/regex.html +++ b/examples/api/regex.html @@ -58,13 +58,13 @@ $(document).ready(function() {

Filtering a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this interaction. There are APIs for the - global filter (search()) and for each individual column (column().search()).

-

Note also that you must call the draw() method after performing the search, in order for the results to be +

Note also that you must call the draw() method after performing the search, in order for the results to be displayed.

Each filter (global or column) can be marked as a regular expression (allowing you to create very @@ -630,9 +630,8 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-function filterGlobal () {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
function filterGlobal () {
 	$('#example').DataTable().search( 
 		$('#global_filter').val(),
 		$('#global_regex').prop('checked'), 
@@ -658,8 +657,7 @@ $(document).ready(function() {
 	$('input.column_filter').on( 'keyup click', function () {
 		filterColumn( $(this).parents('tr').attr('data-column') );
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -681,10 +679,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/row_details.html b/examples/api/row_details.html index f6088778..5d828f18 100644 --- a/examples/api/row_details.html +++ b/examples/api/row_details.html @@ -95,11 +95,11 @@ $(document).ready(function() { row in the DataTable. This can be used to show additional information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.

-

The example below makes use of the row().child methods to firstly check if a row is already displayed, and - if so hide it (The example below makes use of the row().child methods to firstly check if a row is already displayed, + and if so hide it (row().child.hide()), otherwise show it (row().child.show()). The content of the child row is, in this example, defined by the formatDetails() function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the @@ -137,9 +137,8 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-/* Formatting function for row details - modify as you need */
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
/* Formatting function for row details - modify as you need */
 function format ( d ) {
 	// `d` is the original data object for the row
 	return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
@@ -192,8 +191,7 @@ $(document).ready(function() {
 			tr.addClass('shown');
 		}
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -215,16 +213,13 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-td.details-control {
+						below:
td.details-control {
 	background: url('../resources/details_open.png') no-repeat center center;
 	cursor: pointer;
 }
 tr.details td.details-control {
 	background: url('../resources/details_close.png') no-repeat center center;
-}
-
+}

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/select_row.html b/examples/api/select_row.html index efe4e4a0..1cc11f4d 100644 --- a/examples/api/select_row.html +++ b/examples/api/select_row.html @@ -42,7 +42,7 @@ $(document).ready(function() {

It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add / remove a class on the table rows. The rows().data() method can then be used to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be developed.

@@ -544,9 +544,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var table = $('#example').DataTable();
 
 	$('#example tbody').on( 'click', 'tr', function () {
@@ -556,8 +555,7 @@ $(document).ready(function() {
 	$('#button').click( function () {
 		alert( table.rows('.selected').data().length +' row(s) selected' );
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -579,10 +577,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/select_single_row.html b/examples/api/select_single_row.html index 6b1564ec..12ace27e 100644 --- a/examples/api/select_single_row.html +++ b/examples/api/select_single_row.html @@ -51,10 +51,10 @@ $(document).ready(function() { if so removing it, if not then the class is removed from any other row in the table which does have it and applied to the row to be selected.

-

Also shown is the Also shown is the row().remove() method which will delete a row from a table, and the draw() method with - false as its first parameter. This will redraw the table keeping the current paging + "//datatables.net/reference/api/draw()">draw() method + with false as its first parameter. This will redraw the table keeping the current paging (without the false parameter the paging would be reset to the first page).

If you are looking for a more complete row selection option

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var table = $('#example').DataTable();
 
 	$('#example tbody').on( 'click', 'tr', function () {
@@ -572,8 +571,7 @@ $(document).ready(function() {
 	$('#button').click( function () {
 		table.row('.selected').remove().draw( false );
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -595,10 +593,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/show_hide.html b/examples/api/show_hide.html index 02e21064..97fed915 100644 --- a/examples/api/show_hide.html +++ b/examples/api/show_hide.html @@ -46,15 +46,15 @@ $(document).ready(function() {

This example shows how you can make use of the column().visible() API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, although that is not required for the API function to work.

In addition to this, groups of columns can be shown and hidden at the same time using the columns() method - to select multiple columns and then using the columns() + method to select multiple columns and then using the columns().visible() method to set their state.

If you are looking for a more complete column visibility interaction controls

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	var table = $('#example').DataTable( {
 		"scrollY": "200px",
 		"paging": false
@@ -578,8 +577,7 @@ $(document).ready(function() {
 		// Toggle the visibility
 		column.visible( ! column.visible() );
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -601,10 +599,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/api/tabs_and_scrolling.html b/examples/api/tabs_and_scrolling.html index acaa6c83..35ccea28 100644 --- a/examples/api/tabs_and_scrolling.html +++ b/examples/api/tabs_and_scrolling.html @@ -52,14 +52,14 @@ $(document).ready(function() { this will result in the misalignment of columns when scrolling is enabled.

This misalignment can be corrected by the columns.adjust() method when the table is made visible (i.e. it has dimensions).

This example shows how the jQuery UI show event can be used to trigger this method call. The visible tables on the page are selected using the static dt-api-static tables() - method and passing the result to columns.adjust().

+ method and passing the result to columns.adjust().

@@ -554,9 +554,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$("#tabs").tabs( {
 		"activate": function(event, ui) {
 			$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
@@ -569,8 +568,7 @@ $(document).ready(function() {
 		"paging": false,
 		"jQueryUI": true
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -594,10 +592,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/alt_pagination.html b/examples/basic_init/alt_pagination.html index b1001049..1e7497f3 100644 --- a/examples/basic_init/alt_pagination.html +++ b/examples/basic_init/alt_pagination.html @@ -35,7 +35,7 @@ $(document).ready(function() {

The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination - mechanism, the pagingType option.

There are four built-in options for which pagination controls DataTables should show:

@@ -51,9 +51,9 @@ $(document).ready(function() {

The language strings of 'First', 'Previous' etc can be optionally through the internationalisation - options of DataTables; language.first, language.first, language.previous etc.

Additional options for the buttons that are shown can be added through the use of pagination type @@ -556,14 +556,12 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"pagingType": "full_numbers"
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -585,10 +583,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/complex_header.html b/examples/basic_init/complex_header.html index 03904139..67dcc76c 100644 --- a/examples/basic_init/complex_header.html +++ b/examples/basic_init/complex_header.html @@ -36,9 +36,10 @@ $(document).ready(function() {

Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the irder listener, if more than - one cell for a column if found. The orderCellsTop option can be used to tell DataTables to use the - top cell if you prefer.

+ one cell for a column if found. The orderCellsTop option can be used to tell DataTables to use the top + cell if you prefer.

The example shown below has two sets of grouped information, grouped by colspan in the header.

@@ -539,12 +540,10 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable();
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -566,10 +565,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/dom.html b/examples/basic_init/dom.html index f6031662..f1040c62 100644 --- a/examples/basic_init/dom.html +++ b/examples/basic_init/dom.html @@ -35,14 +35,15 @@ $(document).ready(function() {

When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom - initialisation parameter which can be set to indicate where you which particular features to appear in - the DOM. You can also specify div wrapping containers (with an id and / or class) to - provide complete layout flexibility.

+ "//datatables.net/reference/option/dom">dom initialisation parameter which can be set to indicate where you + which particular features to appear in the DOM. You can also specify div wrapping + containers (with an id and / or class) to provide complete layout flexibility.

Each HTML control element presented by DataTables is denoted by a single character in the dom option. - For example the l option is used for the Length changing input option.

+ "//datatables.net/reference/option/dom">dom option. For example the l option is used for the + Length changing input option.

The built-in options available are:

@@ -101,9 +102,9 @@ $(document).ready(function() { times, for if you want to show the same control multiple times (pagination at the top and bottom of the table for example).

-

Furthermore, note that additional dom options can be added to DataTables through the use of - plug-ins.

+

Furthermore, note that additional dom options can be added to DataTables through the + use of plug-ins.

In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container div.

@@ -601,14 +602,12 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"dom": '<"top"i>rt<"bottom"flp><"clear">'
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -630,10 +629,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/filter_only.html b/examples/basic_init/filter_only.html index 153b224f..80a3a391 100644 --- a/examples/basic_init/filter_only.html +++ b/examples/basic_init/filter_only.html @@ -531,16 +531,14 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"paging":   false,
 		"ordering": false,
 		"info":     false
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -562,10 +560,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/flexible_width.html b/examples/basic_init/flexible_width.html index 19db3e9c..57e6eac3 100644 --- a/examples/basic_init/flexible_width.html +++ b/examples/basic_init/flexible_width.html @@ -536,12 +536,10 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable();
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -563,12 +561,9 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-div.container {
+						below:
div.container {
 		width: 80%;
-	}
-
+ }

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/hidden_columns.html b/examples/basic_init/hidden_columns.html index 28d924d1..b594871f 100644 --- a/examples/basic_init/hidden_columns.html +++ b/examples/basic_init/hidden_columns.html @@ -45,8 +45,8 @@ $(document).ready(function() {

There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user. This is done through the visible - column option.

+ "//datatables.net/reference/option/visible">visible column option.

The column that is hidden is still part of the table and can be made visible through the api column().visible() API method at a future time if you wish to have columns which can be shown @@ -552,9 +552,8 @@ $(document).ready(function() {

-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"columnDefs": [ 
 			{
@@ -568,8 +567,7 @@ $(document).ready(function() {
 			}
 		]
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -591,10 +589,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/language.html b/examples/basic_init/language.html index 370fd003..a1f280ed 100644 --- a/examples/basic_init/language.html +++ b/examples/basic_init/language.html @@ -39,8 +39,8 @@ $(document).ready(function() {

Changing the language information displayed by DataTables is as simple as passing in a language - object to the DataTable constructor.

+ "//datatables.net/reference/option/language">language object to the DataTable constructor.

The example above shows a different set of English string being used, rather than the defaults.

@@ -537,9 +537,8 @@ $(document).ready(function() {
-

The Javascript shown below is used to initialise the table shown in this example:

- 
-$(document).ready(function() {
+					
The Javascript shown below is used to initialise the table shown in this
+					example:
$(document).ready(function() {
 	$('#example').dataTable( {
 		"language": {
 			"lengthMenu": "Display _MENU_ records per page",
@@ -549,8 +548,7 @@ $(document).ready(function() {
 			"infoFiltered": "(filtered from _MAX_ total records)"
 		}
 	} );
-} );
-
+} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

@@ -572,10 +570,7 @@ $(document).ready(function() {

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

- 
-
-
+ below:

The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/multi_col_sort.html b/examples/basic_init/multi_col_sort.html index edd4a3ba..61d4bbcf 100644 --- a/examples/basic_init/multi_col_sort.html +++ b/examples/basic_init/multi_col_sort.html @@ -50,17 +50,17 @@ $(document).ready(function() { column).

  • On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the orderData option.
    • -
  • Using the Using the orderData option to specify a multiple column order by default (for example [ [0,'asc'], [1,'asc'] ]).
    • -
  • Through the Through the order() API method.

    • Note that, the ability for the user to shift click to order multiple columns can be disabled through - the orderMutli option.

    The example below shows the first column having a secondary order applied to the second column in @@ -491,9 +491,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		columnDefs: [ {
 			targets: [ 0 ],
@@ -506,8 +505,7 @@ $(document).ready(function() {
 			orderData: [ 4, 0 ]
 		} ]
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -529,10 +527,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/multiple_tables.html b/examples/basic_init/multiple_tables.html index d2f1c2b0..e7eefd3b 100644 --- a/examples/basic_init/multiple_tables.html +++ b/examples/basic_init/multiple_tables.html @@ -331,12 +331,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('table.display').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -358,12 +356,9 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -div.dataTables_wrapper {
+						below:
    div.dataTables_wrapper {
 		margin-bottom: 3em;
-	}
-
    + }

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/scroll_x.html b/examples/basic_init/scroll_x.html index ff6b8d69..d921d1b1 100644 --- a/examples/basic_init/scroll_x.html +++ b/examples/basic_init/scroll_x.html @@ -40,10 +40,10 @@ $(document).ready(function() {

    DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited horizontal display area. To enable - x-scrolling simply set the scrollX parameter to be whatever you want the container wrapper's - width to be (this should be 100% in almost all cases with the width being constrained by the container - element).

    + x-scrolling simply set the scrollX parameter to be whatever you want the container + wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the + container element).

    The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of th, td { white-space: nowrap; } is also set to have the text content of each @@ -706,14 +706,12 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"scrollX": true
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -735,14 +733,11 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -th, td { white-space: nowrap; }
+						below:
    th, td { white-space: nowrap; }
 	div.dataTables_wrapper {
 		width: 800px;
 		margin: 0 auto;
-	}
-
    + }

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/scroll_xy.html b/examples/basic_init/scroll_xy.html index 86ecb92f..575088bb 100644 --- a/examples/basic_init/scroll_xy.html +++ b/examples/basic_init/scroll_xy.html @@ -698,15 +698,13 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"scrollY": 200,
 		"scrollX": true
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -728,14 +726,11 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -th, td { white-space: nowrap; }
+						below:
    th, td { white-space: nowrap; }
 	div.dataTables_wrapper {
 		width: 800px;
 		margin: 0 auto;
-	}
-
    + }

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/scroll_y.html b/examples/basic_init/scroll_y.html index 94a0d60c..7391d8f9 100644 --- a/examples/basic_init/scroll_y.html +++ b/examples/basic_init/scroll_y.html @@ -39,15 +39,15 @@ $(document).ready(function() { area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!).

    -

    To enable y-scrolling simply set the scrollY parameter to be whatever you want the container - wrapper's height to be (any CSS measurement is acceptable, or just a number which is treated as - pixels).

    +

    To enable y-scrolling simply set the scrollY parameter to be whatever you want the container wrapper's + height to be (any CSS measurement is acceptable, or just a number which is treated as pixels).

    -

    Note also that the scrollCollapse option is enabled in this example. This will have the - container match the height of the rows shown in the table if that height is smaller than that given - height by the Note also that the scrollCollapse option is enabled in this example. This will + have the container match the height of the rows shown in the table if that height is smaller than that + given height by the scrollY.

    @@ -543,16 +543,14 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"scrollY":        "200px",
 		"scrollCollapse": true,
 		"paging":         false
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -574,10 +572,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/scroll_y_theme.html b/examples/basic_init/scroll_y_theme.html index 3e2cc395..c3764396 100644 --- a/examples/basic_init/scroll_y_theme.html +++ b/examples/basic_init/scroll_y_theme.html @@ -531,16 +531,14 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"scrollY":        200,
 		"scrollCollapse": true,
 		"jQueryUI":       true
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -562,10 +560,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/state_save.html b/examples/basic_init/state_save.html index 735ff8f6..131ed5b9 100644 --- a/examples/basic_init/state_save.html +++ b/examples/basic_init/state_save.html @@ -33,26 +33,26 @@ $('#example').dataTable( {

    DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the stateSave option.

    The built in state saving method uses the HTML5 localStorage API for efficient storage of the data. Please note that this means that the built in state saving option will not work with IE6/7 as these browsers do not support this API. Alternative options of using cookies or saving the state on the server through Ajax can be used through the stateSaveCallback and stateLoadCallback options.

    Additionally, note also that the duration for which the saved state is valid and can be used to - restore the table state can be set using the stateDuration initialisation parameter (2 hours by - default).

    + restore the table state can be set using the stateDuration initialisation parameter (2 hours by default).

    The example below simply shows state saving enabled in DataTables with the saveSave - option.

    + "//datatables.net/reference/option/saveSave">saveSave option.

    @@ -547,12 +547,10 @@ $('#example').dataTable( {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$('#example').dataTable( {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $('#example').dataTable( {
 	"stateSave": true
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -574,10 +572,7 @@ $('#example').dataTable( {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/table_sorting.html b/examples/basic_init/table_sorting.html index 0b35f12a..debfe1e1 100644 --- a/examples/basic_init/table_sorting.html +++ b/examples/basic_init/table_sorting.html @@ -33,17 +33,17 @@ $(document).ready(function() {

    With DataTables you can alter the ordering characteristics of the table at initialisation time. - Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want.

    -

    The The order parameter is an array of arrays where the first value of the inner array is the column to order on, and the second is 'asc' (ascending ordering) or 'desc' - (descending ordering) as required. order is a 2D array to allow multi-column ordering to be - defined.

    + (descending ordering) as required. order is a 2D array to allow multi-column ordering to + be defined.

    The table below is ordered (descending) by the Age column.

    @@ -540,14 +540,12 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"order": [[ 3, "desc" ]]
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -569,10 +567,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/basic_init/zero_configuration.html b/examples/basic_init/zero_configuration.html index a01e7aec..c9076008 100644 --- a/examples/basic_init/zero_configuration.html +++ b/examples/basic_init/zero_configuration.html @@ -531,12 +531,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -558,10 +556,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/data_sources/ajax.html b/examples/data_sources/ajax.html index 66d0173f..73b51c9e 100644 --- a/examples/data_sources/ajax.html +++ b/examples/data_sources/ajax.html @@ -36,18 +36,20 @@ $(document).ready(function() {

    DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting the ajax option - to the address of the JSON data source.

    + "//datatables.net/reference/option/ajax">ajax option to the address of the JSON data source.

    -

    The The ajax option also allows for more advanced configuration such as - altering how the Ajax request is made. See the ajax documentation or the other Ajax examples for - DataTables for further information.

    + altering how the Ajax request is made. See the ajax documentation or the other Ajax examples for DataTables for + further information.

    The example below shows DataTables loading data for a table from arrays as the data source (object - parameters can also be used through the columns.data option ).

    + parameters can also be used through the columns.data option ).

    @@ -83,14 +85,12 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": '../ajax/data/arrays.txt'
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -112,10 +112,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/data_sources/dom.html b/examples/data_sources/dom.html index a3833ac7..2079cb26 100644 --- a/examples/data_sources/dom.html +++ b/examples/data_sources/dom.html @@ -529,12 +529,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -556,10 +554,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/data_sources/js_array.html b/examples/data_sources/js_array.html index 1e32eca8..4e90a283 100644 --- a/examples/data_sources/js_array.html +++ b/examples/data_sources/js_array.html @@ -105,10 +105,11 @@ $(document).ready(function() {

    At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This is achieved using the data option - in the initialisation object, passing in an array of data to be used (like all other DataTables handled - data, this can be arrays or objects using the columns.data option).

    + "//datatables.net/reference/option/data">data option in the initialisation object, passing in an array of + data to be used (like all other DataTables handled data, this can be arrays or objects using the + columns.data option).

    A <table> must be available on the page for DataTables to use. This examples shows the element being added by Javascript and then initialising the DataTable with a set of data from @@ -125,9 +126,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -var dataSet = [
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    var dataSet = [
 	['Trident','Internet Explorer 4.0','Win 95+','4','X'],
 	['Trident','Internet Explorer 5.0','Win 95+','5','C'],
 	['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
@@ -200,8 +200,7 @@ $(document).ready(function() {
 			{ "title": "Grade", "class": "center" }
 		]
 	} );	
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -223,10 +222,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/data_sources/server_side.html b/examples/data_sources/server_side.html index f9a78d66..9afc62f2 100644 --- a/examples/data_sources/server_side.html +++ b/examples/data_sources/server_side.html @@ -42,9 +42,9 @@ $(document).ready(function() { result in a new Ajax request being made to get the required data.

    Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data - source through the ajax option.

    This example shows a very simple table, matching the other examples, but in this instance using @@ -84,16 +84,14 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
 		"ajax": "../server_side/scripts/server_processing.php"
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -115,10 +113,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/plug-ins/api.html b/examples/plug-ins/api.html index 05104487..a45e9579 100644 --- a/examples/plug-ins/api.html +++ b/examples/plug-ins/api.html @@ -62,7 +62,7 @@ $(document).ready(function() { sum of a column in a single line: table.column().data().sum(). Due to the chaining of the methods, this allows sum() to very easily give the sum for any selected column, and to limit the sum to just the current page, filtered data or all pages. This is done using the options for - the column() method and the options for its selectors.

    For more information about API plug-ins; creating them and their requirements, please refer to the @@ -562,9 +562,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$.fn.dataTable.Api.register( 'column().data().sum()', function () {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $.fn.dataTable.Api.register( 'column().data().sum()', function () {
 	return this.reduce( function (a, b) {
 		var x = parseFloat( a ) || 0;
 		var y = parseFloat( b ) || 0;
@@ -587,8 +586,7 @@ $(document).ready(function() {
 		.on( 'click', function () {
 			alert( 'Column sum is: '+ table.column( 3, {page:'current'} ).data().sum() );
 		} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -610,10 +608,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/plug-ins/dom_sort.html b/examples/plug-ins/dom_sort.html index a755e7c7..355a0428 100644 --- a/examples/plug-ins/dom_sort.html +++ b/examples/plug-ins/dom_sort.html @@ -78,8 +78,9 @@ $(document).ready(function() {

    This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling order() or draw() methods.

    + "//datatables.net/reference/api/order()">order() or + draw() + methods.

    @@ -1642,9 +1643,8 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -/* Create an array with the values of all the input boxes in a column */
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    /* Create an array with the values of all the input boxes in a column */
 $.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
 {
 	return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
@@ -1678,8 +1678,7 @@ $(document).ready(function() {
 			{ "orderDataType": "dom-select" }
 		]
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -1701,10 +1700,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/plug-ins/range_filtering.html b/examples/plug-ins/range_filtering.html index ada7190e..0fa7dfb9 100644 --- a/examples/plug-ins/range_filtering.html +++ b/examples/plug-ins/range_filtering.html @@ -568,9 +568,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -/* Custom filtering function which will filter data in column four between two values */
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    /* Custom filtering function which will filter data in column four between two values */
 $.fn.dataTable.ext.filter.push(
 	function( settings, data, dataIndex ) {
 		var min = $('#min').val() * 1;
@@ -595,8 +594,7 @@ $(document).ready(function() {
 	$('#min, #max').keyup( function() {
 		table.draw();
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -618,10 +616,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/plug-ins/sorting_auto.html b/examples/plug-ins/sorting_auto.html index 64bf521d..ec1b79fc 100644 --- a/examples/plug-ins/sorting_auto.html +++ b/examples/plug-ins/sorting_auto.html @@ -552,9 +552,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$.fn.dataTable.ext.type.detect.unshift(
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $.fn.dataTable.ext.type.detect.unshift(
 	function ( d ) {
 		return /^[\-\d,]+$/.test( d ) ? 'numeric-comma' : null;
 	}
@@ -567,8 +566,7 @@ $.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
 
 $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -590,10 +588,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/plug-ins/sorting_manual.html b/examples/plug-ins/sorting_manual.html index 76abdfc0..728094c5 100644 --- a/examples/plug-ins/sorting_manual.html +++ b/examples/plug-ins/sorting_manual.html @@ -45,10 +45,10 @@ $(document).ready(function() { more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.

    -

    This is done by using the columns.type parameter, in combination with a ordering plug-in. The - ordering plug-in can be be of any level of complexity (natural ordering for example can be fairly - complex while also very powerful), and is defined by attaching to the +

    This is done by using the columns.type parameter, in combination with a + ordering plug-in. The ordering plug-in can be be of any level of complexity (natural ordering for + example can be fairly complex while also very powerful), and is defined by attaching to the $.fn.dataTable.ext.type.order object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in development documentation.

    @@ -551,9 +551,8 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
 	return parseFloat( d.replace(/,/g, '.') ) || 0;
 };
 
@@ -564,8 +563,7 @@ $(document).ready(function() {
 			"targets": 3
 		} ]
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -587,10 +585,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/resources/demo.css b/examples/resources/demo.css index 2ded9da9..6c1dac70 100644 --- a/examples/resources/demo.css +++ b/examples/resources/demo.css @@ -163,36 +163,42 @@ code { } code.option { - color: #D14; + color: #D14; /* red */ background-color: #fcf6f8; border: 1px solid #f7d6df; } code.path { - color: #095c05; + color: #095c05; /* dark green */ border: 1px solid #D6E9C6; } code.tag { - color: #095c05; - background-color: #f5fcf5; + color: #cad119; /* yellow */ + background-color: #f7f8e6; border: 1px solid #D6E9C6; } code.api { - color: #0c199c; + color: #0c199c; /* dark blue */ background-color: #f4f5fc; border: 1px solid #c6cbe9; } +code.type { + color: #d119cf; /* purple */ + background-color: #faebfa; + border: 1px solid #f3aef2; +} + code.event { - color: #2a839e; + color: #2a839e; /* deep aqua */ background-color: #f5fafb; border: 1px solid #a8ddec; } code.string { - color: #e8941e; + color: #e8941e; /* orange */ background-color: #fcf8f1; border: 1px solid #f7e4c9; } @@ -241,7 +247,7 @@ ul.tabs li.active:hover { } div.tabs>div { - padding: 0 20px; + padding: 1em; border: 1px solid #ccc; margin-top: 1px; display: none; diff --git a/examples/resources/demo.js b/examples/resources/demo.js index 2fdbbecb..dbae659d 100644 --- a/examples/resources/demo.js +++ b/examples/resources/demo.js @@ -1,5 +1,6 @@ /*global SyntaxHighlighter*/ +SyntaxHighlighter.config.tagName = 'code'; $(document).ready( function () { // Work around for WebKit bug 55740 @@ -15,16 +16,16 @@ $(document).ready( function () { // css var cssContainer = $('div.tabs div.css'); - if ( $.trim( cssContainer.find('pre').text() ) === '' ) { - cssContainer.find('pre, p:eq(0), div').css('display', 'none'); + if ( $.trim( cssContainer.find('code').text() ) === '' ) { + cssContainer.find('code, p:eq(0), div').css('display', 'none'); } // init html var table = $('

    ').append( $('table').clone() ).html(); $('div.tabs div.table').append( - '

    \t\t\t'+
+		'\t\t\t'+
 			escapeHtml( table )+
-		'
    ' + '' ); //SyntaxHighlighter.highlight({}, $('#display-init-html')[0]); @@ -36,7 +37,7 @@ $(document).ready( function () { var show = function ( str ) { ajaxTab.css( 'display', 'block' ); - $('div.tabs div.ajax pre').remove(); + $('div.tabs div.ajax code').remove(); // Old IE :-| try { @@ -44,9 +45,9 @@ $(document).ready( function () { } catch ( e ) {} $('div.tabs div.ajax').append( - '
    '+str+'
    ' + ''+str+'' ); - SyntaxHighlighter.highlight( {}, $('div.tabs div.ajax pre')[0] ); + SyntaxHighlighter.highlight( {}, $('div.tabs div.ajax code')[0] ); }; // First draw diff --git a/examples/server_side/custom_vars.html b/examples/server_side/custom_vars.html index ef90271d..32086b74 100644 --- a/examples/server_side/custom_vars.html +++ b/examples/server_side/custom_vars.html @@ -43,8 +43,9 @@ $(document).ready(function() {

    It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the ajax - option's data parameter which can be used in one of two different ways:

    + "//datatables.net/reference/option/ajax">ajax option's data parameter which can be used in one + of two different ways:

    • object - An object data to send to the server. This is useful for adding static @@ -91,9 +92,8 @@ $(document).ready(function() {
      -

      The Javascript shown below is used to initialise the table shown in this example:

      - 
      -$(document).ready(function() {
+					
      The Javascript shown below is used to initialise the table shown in this
+					example:
      $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
@@ -106,8 +106,7 @@ $(document).ready(function() {
 			}
 		}
 	} );
-} );
-
      +} );

      In addition to the above code, the following Javascript library files are loaded for use in this example:

      @@ -129,10 +128,7 @@ $(document).ready(function() {

      This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

      - 
      -
-
      + below:

      The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/defer_loading.html b/examples/server_side/defer_loading.html index 823075d4..4f25f82e 100644 --- a/examples/server_side/defer_loading.html +++ b/examples/server_side/defer_loading.html @@ -42,14 +42,14 @@ $(document).ready(function() { reasons).

      This automatic Ajax call to get the first page of data can be overridden by using the deferLoading initialisation property. It serves two purposes, firstly to indicate that deferred loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination to be displayed correctly).

      In the example below, the HTML page already has the first 10 rows of data available it in, so we use - deferLoading to tell DataTables that this data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.

      @@ -168,17 +168,15 @@ $(document).ready(function() {
      -

      The Javascript shown below is used to initialise the table shown in this example:

      - 
      -$(document).ready(function() {
+					
      The Javascript shown below is used to initialise the table shown in this
+					example:
      $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
 		"ajax": "scripts/server_processing.php",
 		"deferLoading": 57
 	} );
-} );
-
      +} );

      In addition to the above code, the following Javascript library files are loaded for use in this example:

      @@ -200,10 +198,7 @@ $(document).ready(function() {

      This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

      - 
      -
-
      + below:

      The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/ids.html b/examples/server_side/ids.html index d9944a00..1884607b 100644 --- a/examples/server_side/ids.html +++ b/examples/server_side/ids.html @@ -95,9 +95,8 @@ $(document).ready(function() {

      -

      The Javascript shown below is used to initialise the table shown in this example:

      - 
      -$(document).ready(function() {
+					
      The Javascript shown below is used to initialise the table shown in this
+					example:
      $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
@@ -111,8 +110,7 @@ $(document).ready(function() {
 			{ "data": "salary" }
 		]
 	} );
-} );
-
      +} );

      In addition to the above code, the following Javascript library files are loaded for use in this example:

      @@ -134,10 +132,7 @@ $(document).ready(function() {

      This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

      - 
      -
-
      + below:

      The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/index.html b/examples/server_side/index.html index 153a6718..fd285048 100644 --- a/examples/server_side/index.html +++ b/examples/server_side/index.html @@ -25,9 +25,9 @@ result in a new Ajax request being made to get the required data.

      Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data - source through the ajax option.

      The examples in this section show server-side processing in use and

      diff --git a/examples/server_side/jsonp.html b/examples/server_side/jsonp.html index ead98d88..4226258b 100644 --- a/examples/server_side/jsonp.html +++ b/examples/server_side/jsonp.html @@ -41,17 +41,17 @@ $(document).ready(function() { several methods to allow the use of JSON data from any server (browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load server-side sourced data from any domain and is quite simply done with the - dataType option of the ajax initialisation option.

      + dataType option of the ajax initialisation option.

      -

      When given as an object, the ajax option maps directly onto the When given as an object, the ajax option maps directly onto the jQuery ajax options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's ajax - option).

      + "//datatables.net/reference/option/ajax">ajax option).

      -

      The example below shows The example below shows ajax being used with the dataType option set to retrieve JSONP data for server-side processing in DataTables.

      @@ -89,9 +89,8 @@ $(document).ready(function() {
      -

      The Javascript shown below is used to initialise the table shown in this example:

      - 
      -$(document).ready(function() {
+					
      The Javascript shown below is used to initialise the table shown in this
+					example:
      $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
@@ -100,8 +99,7 @@ $(document).ready(function() {
 			"dataType": "jsonp"
 		}
 	} );
-} );
-
      +} );

      In addition to the above code, the following Javascript library files are loaded for use in this example:

      @@ -123,10 +121,7 @@ $(document).ready(function() {

      This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

      - 
      -
-
      + below:

      The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/object_data.html b/examples/server_side/object_data.html index dda1ea9f..ed06d595 100644 --- a/examples/server_side/object_data.html +++ b/examples/server_side/object_data.html @@ -49,8 +49,9 @@ $(document).ready(function() { for objects as well as arrays.

      In this example the server responds with an array of objects, where DataTables will look up and use - each property that is specified by the columns.data property given for each column.

      + each property that is specified by the columns.data property given for each column.

    @@ -86,9 +87,8 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
@@ -102,8 +102,7 @@ $(document).ready(function() {
 			{ "data": "salary" }
 		]
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -125,10 +124,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/pipeline.html b/examples/server_side/pipeline.html index 3dc35b0a..ce7552ae 100644 --- a/examples/server_side/pipeline.html +++ b/examples/server_side/pipeline.html @@ -132,9 +132,9 @@ $(document).ready(function() { caching more data than is needed for each draw. This is done by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This intercept of the Ajax request is performed by giving the ajax option - as a function. This function then performs the logic of deciding if another Ajax call is needed, or if - data from the cache can be used.

    + "//datatables.net/reference/option/ajax">ajax option as a function. This function then performs the logic of + deciding if another Ajax call is needed, or if data from the cache can be used.

    Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set, when using server-side processing, @@ -174,9 +174,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -//
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    //
 // Pipelining function for DataTables. To be used to the `ajax` option of DataTables
 //
 $.fn.dataTable.pipeline = function ( opts ) {
@@ -270,8 +269,7 @@ $(document).ready(function() {
 			pages: 5 // number of pages to cache
 		} )
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -293,10 +291,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/post.html b/examples/server_side/post.html index 988b6066..4b58568d 100644 --- a/examples/server_side/post.html +++ b/examples/server_side/post.html @@ -48,17 +48,17 @@ $(document).ready(function() {

    By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to use POST. This is very easily done by - using the type option of the ajax initialisation option.

    + using the type option of the ajax initialisation option.

    -

    When given as an object, the ajax option maps directly onto the When given as an object, the ajax option maps directly onto the jQuery ajax options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's ajax - option).

    + "//datatables.net/reference/option/ajax">ajax option).

    -

    The example below shows The example below shows ajax being used with the type option set to POST to make a POST request.

    @@ -96,9 +96,8 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
@@ -115,8 +114,7 @@ $(document).ready(function() {
 			{ "data": "salary" }
 		]
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -138,10 +136,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/row_details.html b/examples/server_side/row_details.html index 8d5d76a4..d433d160 100644 --- a/examples/server_side/row_details.html +++ b/examples/server_side/row_details.html @@ -83,15 +83,15 @@ $(document).ready(function() {

    The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's display. This is set up using columns.data and columns.defaultContent, in combination with CSS to show an empty cell with a background image which can be clicked upon.

    -

    The event handler makes use of the row().child methods to firstly check if a row is already displayed, and - if so hide it, if not show it. The content of the child row is, in this example, defined by the +

    The event handler makes use of the row().child methods to firstly check if a row is already displayed, + and if so hide it, if not show it. The content of the child row is, in this example, defined by the formatDetails() function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show. Note that the format details function has access to the full data source object @@ -130,9 +130,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -function format ( d ) {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    function format ( d ) {
 	return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
 	    'Salary: '+d.salary+'<br>'+
 		'The child row can contain any data you wish, including links, images, inner tables etc.';
@@ -171,8 +170,7 @@ $(document).ready(function() {
 			row.child( format( row.data() ) ).show();
 		}
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -194,16 +192,13 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -td.details-control {
+						below:
    td.details-control {
 	background: url('../resources/details_open.png') no-repeat center center;
 	cursor: pointer;
 }
 tr.details td.details-control {
 	background: url('../resources/details_close.png') no-repeat center center;
-}
-
    +}

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/select_rows.html b/examples/server_side/select_rows.html index e2beef1a..5fe20a05 100644 --- a/examples/server_side/select_rows.html +++ b/examples/server_side/select_rows.html @@ -100,9 +100,8 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	var selected = [];
 
 	$("#example").dataTable({
@@ -128,8 +127,7 @@ $(document).ready(function() {
 
 		$(this).toggleClass('selected');
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -151,10 +149,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/server_side/simple.html b/examples/server_side/simple.html index 4dcbe347..a56b8a70 100644 --- a/examples/server_side/simple.html +++ b/examples/server_side/simple.html @@ -42,9 +42,9 @@ $(document).ready(function() { result in a new Ajax request being made to get the required data.

    Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data - source through the ajax option.

    This example shows a very simple table, matching the other client-side processing examples, but in @@ -84,16 +84,14 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"serverSide": true,
 		"ajax": "scripts/server_processing.php"
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -115,10 +113,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/bootstrap.html b/examples/styling/bootstrap.html index d95a682c..fd3666e3 100644 --- a/examples/styling/bootstrap.html +++ b/examples/styling/bootstrap.html @@ -539,12 +539,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -568,10 +566,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -body { font-size: 140%; }
-
    + below:

    body { font-size: 140%; }

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/cell-border.html b/examples/styling/cell-border.html index 9bd115bf..503fe7ec 100644 --- a/examples/styling/cell-border.html +++ b/examples/styling/cell-border.html @@ -526,12 +526,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -553,10 +551,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/display.html b/examples/styling/display.html index 4e5afcbe..d6447432 100644 --- a/examples/styling/display.html +++ b/examples/styling/display.html @@ -542,12 +542,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -569,10 +567,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/foundation.html b/examples/styling/foundation.html index c12c65c9..6b5428f0 100644 --- a/examples/styling/foundation.html +++ b/examples/styling/foundation.html @@ -538,12 +538,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -567,10 +565,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/hover.html b/examples/styling/hover.html index 9fdeb335..07da6006 100644 --- a/examples/styling/hover.html +++ b/examples/styling/hover.html @@ -526,12 +526,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -553,10 +551,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/jqueryUI.html b/examples/styling/jqueryUI.html index 93383580..3cfdf4d3 100644 --- a/examples/styling/jqueryUI.html +++ b/examples/styling/jqueryUI.html @@ -36,13 +36,14 @@ $(document).ready(function() {

    DataTables has built in support for (jQuery UI ThemeRoller)[http://jqueryui.com/themeroller/] which makes it very easy to style your tables to match other jQuery UI components. To enable the jQuery UI styling of DataTables, simply include the jQuery stylesheet, DataTables' additions for the jQuery - stylesheet (to add row styling etc) and set the jQueryUI initialisation for your table.

    + stylesheet (to add row styling etc) and set the jQueryUI initialisation for your table.

    -

    Please note that the jQueryUI option is deprecated in DataTables 1.10. In DataTables 1.11 - it will be replaced with a styling plug-in, matching how Bootstrap and Foundation styles are integrated - into DataTables.

    +

    Please note that the jQueryUI option is deprecated in DataTables 1.10. In + DataTables 1.11 it will be replaced with a styling plug-in, matching how Bootstrap and Foundation + styles are integrated into DataTables.

    @@ -537,14 +538,12 @@ $(document).ready(function() {
    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		jQueryUI: true
 	} );
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -566,10 +565,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/no-classes.html b/examples/styling/no-classes.html index 2d34f2e9..a0525d53 100644 --- a/examples/styling/no-classes.html +++ b/examples/styling/no-classes.html @@ -526,12 +526,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -553,10 +551,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/order-column.html b/examples/styling/order-column.html index e06217ec..ad2dd830 100644 --- a/examples/styling/order-column.html +++ b/examples/styling/order-column.html @@ -527,12 +527,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -554,10 +552,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/row-border.html b/examples/styling/row-border.html index 9c49070a..123eb5f8 100644 --- a/examples/styling/row-border.html +++ b/examples/styling/row-border.html @@ -526,12 +526,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -553,10 +551,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the diff --git a/examples/styling/stripe.html b/examples/styling/stripe.html index 5dc5603c..f433e01e 100644 --- a/examples/styling/stripe.html +++ b/examples/styling/stripe.html @@ -525,12 +525,10 @@ $(document).ready(function() {

    -

    The Javascript shown below is used to initialise the table shown in this example:

    - 
    -$(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this
+					example:
    $(document).ready(function() {
 	$('#example').dataTable();
-} );
-
    +} );

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    @@ -552,10 +550,7 @@ $(document).ready(function() {

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown - below:

    - 
    -
-
    + below:

    The following CSS library files are loaded for use in this example to provide the styling of the