Dev: Updating Markdown extension for linking to documentation and also the styles to make more visible

- Have used :after for the information about what type of link it is -
  this stops it from being included in a copy / paste which was annoying
- The postfix is a bit more informative than a letter about what
  software it relates to
- With the move to the 1.10 API for all of the extensions, showing the
  extension letter was redundent anyway
- Adding -button link type
- Improved the colours

.datatables-commit-sync

@@ -1 +1 @@
-3289d1ff95731db19c7d9f2ba15f46c00237c5e7
+a93fb4bfd244230f71f8c9dea10102f0b1cb4ff0

examples/advanced_init/column_render.html

@@ -47,10 +47,10 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>Each column has an optional rendering control called <a href="//datatables.net/reference/option/columns.render"><code class="option" title=
-				"DataTables initialisation option">columns.render<span>DT</span></code></a> which can be used to process the content of each cell before the data is used. <a href=
+				"DataTables initialisation option">columns.render</code></a> which can be used to process the content of each cell before the data is used. <a href=
-				"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render<span>DT</span></code></a> has a
+				"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> has a wide array of
-				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
+				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
-				manipulate the content of a cell, as shown here.</p>
+				content of a cell, as shown here.</p>
 
 				<p>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 other form of text manipulation you require.</p>

examples/advanced_init/complex_header.html

@@ -42,9 +42,9 @@ $(document).ready(function() {
 
 				<p>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 <a href=
-				"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible<span>DT</span></code></a> option
+				"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href=
-				and <a href="//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()<span>DT</span></code></a> method
+				"//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account
-				to take into account rowspan / colspan cells, drawing the header correctly.</p>
+				rowspan / colspan cells, drawing the header correctly.</p>
 
 				<p>Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply
 				ordering.</p>

examples/advanced_init/defaults.html

@@ -40,9 +40,9 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>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
-				<a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom<span>DT</span></code></a> to a common value so
+				<a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> to a common value so all tables get
-				all tables get the same layout). This can be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same parameters as the
+				the same layout). This can be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same parameters as the DataTables
-				DataTables initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
+				initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
 
 				<p>This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.</p>
 			</div>

examples/advanced_init/dom_multiple_elements.html

@@ -44,11 +44,10 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>As is described by the basic DOM positioning example you can use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
-				"DataTables initialisation option">dom<span>DT</span></code></a> initialisation parameter to move DataTables features around the table to where you want them. In
+				"DataTables initialisation option">dom</code></a> initialisation parameter to move DataTables features around the table to where you want them. In addition to
-				addition to this, you can also use <a href="//datatables.net/reference/option/dom"><code class="option" title=
+				this, you can also use <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> to create
-				"DataTables initialisation option">dom<span>DT</span></code></a> to create multiple instances of these table controls. Simply include the feature's identification
+				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
-				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
+				controls will all sync up (note that obviously the table ('t') should be included only once).</p>
-				once).</p>
 
 				<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
 			</div>

examples/advanced_init/dom_toolbar.html

@@ -45,13 +45,13 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <code class="tag" title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
-				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom<span>DT</span></code></a>, with which HTML is inserted to
+				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>, with which HTML is inserted to create the
-				create the toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.</p>
+				toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.</p>
 
 				<p>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 <a href="//datatables.net/reference/option/dom"><code class="option" title=
-				"DataTables initialisation option">dom<span>DT</span></code></a> option (like the built in option of <code class="string" title="String">f</code> refers to
+				"DataTables initialisation option">dom</code></a> option (like the built in option of <code class="string" title="String">f</code> refers to 'filtering input', you
-				'filtering input', you could have an <code class="string" title="String">F</code> option which creates your own filtering input control, custom to your app).</p>
+				could have an <code class="string" title="String">F</code> option which creates your own filtering input control, custom to your app).</p>
 
 				<p><a href="https://datatables.net/extras/tabletools">TableTools</a> is a feature plug-in for DataTables which adds buttons into a toolbar for a table, which
 				controls such as copy to clipboard, export and custom buttons.</p>

examples/advanced_init/dt_events.html

@@ -47,13 +47,13 @@ $(document).ready(function() {
 				be used), allowing your code to perform custom actions when these events occur.</p>
 
 				<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to prevent conflicts arising with other jQuery plug-ins which also
-				fire events. The DataTables <a href="//datatables.net/reference/api/on()"><code class="api" title="DataTables API method">on()<span>DT</span></code></a> method can
+				fire events. The DataTables <a href="//datatables.net/reference/api/on()"><code class="api" title="DataTables API method">on()</code></a> method can be used like
-				be used like the jQuery <code>on()</code> method, but will automatically append the <code>dt</code> namespace if required.</p>
+				the jQuery <code>on()</code> method, but will automatically append the <code>dt</code> namespace if required.</p>
 
-				<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order<span>DT</span></code></a>,
+				<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a>, <a href=
-				<a href="//datatables.net/reference/event/search"><code class="event" title="DataTables event">search<span>DT</span></code></a> and <a href=
+				"//datatables.net/reference/event/search"><code class="event" title="DataTables event">search</code></a> and <a href=
-				"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page<span>DT</span></code></a> events by adding a notification that the event
+				"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page</code></a> events by adding a notification that the event fired to an
-				fired to an element on the page to show that they have indeed fired.</p>
+				element on the page to show that they have indeed fired.</p>
 			</div>
 
 			<div id="demo_info" class="box"></div>

examples/advanced_init/footer_callback.html

@@ -69,14 +69,14 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>Through the use of the header and footer callback manipulation functions provided by DataTables (<a href=
-				"//datatables.net/reference/option/headerCallback"><code class="option" title="DataTables initialisation option">headerCallback<span>DT</span></code></a> and
+				"//datatables.net/reference/option/headerCallback"><code class="option" title="DataTables initialisation option">headerCallback</code></a> and <a href=
-				<a href="//datatables.net/reference/option/footerCallback"><code class="option" title="DataTables initialisation option">footerCallback<span>DT</span></code></a>),
+				"//datatables.net/reference/option/footerCallback"><code class="option" title="DataTables initialisation option">footerCallback</code></a>), it is possible to
-				it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.</p>
+				perform some powerful and useful data manipulation functions, such as summarising data in the table.</p>
 
 				<p>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 <a href=
-				"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()<span>DT</span></code></a> API method and <a href=
+				"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> API method and <a href=
-				"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()<span>DT</span></code></a> for writing the
+				"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()</code></a> for writing the value into the
-				value into the footer.</p>
+				footer.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/advanced_init/html5-data-options.html

@@ -42,14 +42,13 @@ $(document).ready(function() {
 				for a string (see the <code>data-order</code> example below).</p>
 
 				<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is
-				used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
+				used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
-				"DataTables initialisation option">pageLength<span>DT</span></code></a>.</p>
 
 				<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
-				"DataTables initialisation option">pageLength<span>DT</span></code></a> and <a href="//datatables.net/reference/option/order"><code class="option" title=
+				"DataTables initialisation option">pageLength</code></a> and <a href="//datatables.net/reference/option/order"><code class="option" title=
-				"DataTables initialisation option">order<span>DT</span></code></a> on the main table. Column options can also be defined on the table column cells, as shown by the
+				"DataTables initialisation option">order</code></a> on the main table. Column options can also be defined on the table column cells, as shown by the use of the
-				use of the <a href="//datatables.net/reference/option/columns.orderable"><code class="option" title=
+				<a href="//datatables.net/reference/option/columns.orderable"><code class="option" title="DataTables initialisation option">columns.orderable</code></a> option on
-				"DataTables initialisation option">columns.orderable<span>DT</span></code></a> option on the fifth column below.</p>
+				the fifth column below.</p>
 			</div>
 
 			<table id="example" class="display" width="100%" data-page-length="25" data-order="[[ 1, &quot;asc&quot; ]]">

examples/advanced_init/language_file.html

@@ -38,9 +38,9 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>As well as being able to pass language information to DataTables through the <a href="//datatables.net/reference/option/language"><code class="option" title=
-				"DataTables initialisation option">language<span>DT</span></code></a> initialisation option, you can also store the language information in a file, which
+				"DataTables initialisation option">language</code></a> initialisation option, you can also store the language information in a file, which DataTables can load by
-				DataTables can load by Ajax using the <a href="//datatables.net/reference/option/language.url"><code class="option" title=
+				Ajax using the <a href="//datatables.net/reference/option/language.url"><code class="option" title="DataTables initialisation option">language.url</code></a>
-				"DataTables initialisation option">language.url<span>DT</span></code></a> option.</p>
+				option.</p>
 
 				<p>The following example shows DataTables reading a German language file which is hosted on the <a href="http://cdn.datatables.net">DataTables CDN</a></p>
 			</div>

examples/advanced_init/length_menu.html

@@ -36,8 +36,7 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the <a href=
-				"//datatables.net/reference/option/lengthMenu"><code class="option" title="DataTables initialisation option">lengthMenu<span>DT</span></code></a> initialisation
+				"//datatables.net/reference/option/lengthMenu"><code class="option" title="DataTables initialisation option">lengthMenu</code></a> initialisation option.</p>
-				option.</p>
 
 				<p>This parameter can take one of two forms:</p>
 

examples/advanced_init/object_dom_read.html

@@ -46,10 +46,10 @@ $(document).ready(function() {
 				into an array that DataTables stores internally. Each array element represents a column.</p>
 
 				<p>It can be very useful to have DataTables read the information into an object rather than an array, an option that can be triggered using the <a href=
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a>
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> initialisation option to
-				initialisation option to define how you want the data to be stored. Typically <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				define how you want the data to be stored. Typically <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> is used with <a href="../ajax/objects.html">Ajax sourced data</a> to tell DataTables
+				"DataTables initialisation option">columns.data</code></a> is used with <a href="../ajax/objects.html">Ajax sourced data</a> to tell DataTables where to read data
-				where to read data from, but as can be seen here it also tells DataTables where to write the data to.</p>
+				from, but as can be seen here it also tells DataTables where to write the data to.</p>
 
 				<p>This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.</p>
 

examples/advanced_init/row_callback.html

@@ -45,12 +45,12 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>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
-				<a href="//datatables.net/reference/option/createdRow"><code class="option" title="DataTables initialisation option">createdRow<span>DT</span></code></a> function
+				<a href="//datatables.net/reference/option/createdRow"><code class="option" title="DataTables initialisation option">createdRow</code></a> function is called once
-				is called once and once only. It is passed the create row node which can then be modified.</p>
+				and once only. It is passed the create row node which can then be modified.</p>
 
 				<p>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 <a href="//datatables.net/reference/option/columns.createdCell"><code class="option" title=
-				"DataTables initialisation option">columns.createdCell<span>DT</span></code></a> could also be used to create exactly the same effect.</p>
+				"DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/advanced_init/row_grouping.html

@@ -74,10 +74,9 @@ $(document).ready(function() {
 				possible to give the look and feel of row grouping.</p>
 
 				<p>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 <a href="//datatables.net/reference/option/drawCallback"><code class="option" title=
+				is added by the <a href="//datatables.net/reference/option/drawCallback"><code class="option" title="DataTables initialisation option">drawCallback</code></a>
-				"DataTables initialisation option">drawCallback<span>DT</span></code></a> function, which will parse through the rows which are displayed, and enter a grouping TR
+				function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event handler is
-				element where a new group is found. A <code>click</code> event handler is added for the grouping rows to allow the grouping order to be restored as well as
+				added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.</p>
-				ordering by any other column.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/advanced_init/sort_direction_control.html

@@ -44,8 +44,8 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
-				"DataTables initialisation option">columns.orderSequence<span>DT</span></code></a> initialisation parameter. This parameter also allows you to limit the ordering
+				"DataTables initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also allows you to limit the ordering to a single
-				to a single direction, or you could add complex behaviour to the ordering interaction.</p>
+				direction, or you could add complex behaviour to the ordering interaction.</p>
 
 				<p>The example below shows:</p>
 

examples/ajax/custom_data_flat.html

@@ -46,10 +46,10 @@ $(document).ready(function() {
 			<div class="info">
 				<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
 				<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
 
-				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
+				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
-				"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which it can be used:</p>
+				of ways in which it can be used:</p>
 
 				<ul class="markdown">
 					<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
@@ -59,8 +59,8 @@ $(document).ready(function() {
 				</ul>
 
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
-				"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain
+				"DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an
-				array, not an object with an array inside it as is the default.</p>
+				object with an array inside it as is the default.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/ajax/custom_data_property.html

@@ -38,10 +38,10 @@ $(document).ready(function() {
 			<div class="info">
 				<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
 				<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
 
-				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
+				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
-				"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which it can be used:</p>
+				of ways in which it can be used:</p>
 
 				<ul class="markdown">
 					<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
@@ -51,8 +51,8 @@ $(document).ready(function() {
 				</ul>
 
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
-				"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> being used as a string to get the data from a different source property, in this case
+				"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
-				<code class="string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
+				"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/ajax/deep.html

@@ -43,10 +43,10 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>DataTables has the ability to use data from almost data JSON data source through the use of the <a href=
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option. In
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option. In its simplest
-				its simplest case, it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays through the use of
+				case, it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays through the use of standard
-				standard Javascript dotted object notation. Each dot (<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				Javascript dotted object notation. Each dot (<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> option represents another object level.</p>
+				"DataTables initialisation option">columns.data</code></a> option represents another object level.</p>
 
 				<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the <code>hr</code> object in the row's data source object, while
 				<code>contact.0</code> refers to the first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested data.</p>

examples/ajax/defer_render.html

@@ -36,7 +36,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href="//datatables.net/reference/option/deferRender"><code class="option" title=
-				"DataTables initialisation option">deferRender<span>DT</span></code></a> option.</p>
+				"DataTables initialisation option">deferRender</code></a> option.</p>
 
 				<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag" title="HTML tag">TR</code> and <code class="tag" title=
 				"HTML tag">TD</code> nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of

examples/ajax/index.html

@@ -20,8 +20,8 @@
 
 			<div class="info">
 				<p>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
-				<a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option, which has a
+				<a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option, which has a number of
-				number of options to customise how the data is retrieved from the server.</p>
+				options to customise how the data is retrieved from the server.</p>
 
 				<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.</p>
 			</div>

examples/ajax/null_data_source.html

@@ -46,21 +46,21 @@ $(document).ready(function() {
 				<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
 
 				<ul class="markdown">
-					<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
+					<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> for
-					"DataTables initialisation option">columns.render<span>DT</span></code></a> for content that is dynamic (i.e. based upon the row's data)</li>
+					content that is dynamic (i.e. based upon the row's data)</li>
 					<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
-					"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> for static content (i.e. simple strings)</li>
+					"DataTables initialisation option">columns.defaultContent</code></a> for static content (i.e. simple strings)</li>
 				</ul>
 
 				<p>This examples shows the use of <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
-				"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> to create a <em>button</em> element in the last column of the table. A simple
+				"DataTables initialisation option">columns.defaultContent</code></a> to create a <em>button</em> element in the last column of the table. A simple jQuery
-				jQuery <code>click</code> event listener is used to watch for clicks on the row, and when activated uses the <a href=
+				<code>click</code> event listener is used to watch for clicks on the row, and when activated uses the <a href=
-				"//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()<span>DT</span></code></a> method to get the data for the
+				"//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to get the data for the row and show a
-				row and show a bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
+				bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
 
 				<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> option for the column has been set to <code>null</code> to indicate that the column has
+				"DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information
-				no information that should be obtained data source object.</p>
+				that should be obtained data source object.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/ajax/objects.html

@@ -46,8 +46,8 @@ $(document).ready(function() {
 				much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
 
 				<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell DataTables which property to use from the data source object
+				"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
-				for each column.</p>
+				column.</p>
 
 				<p>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:</p>

examples/ajax/objects_subarrays.html

@@ -42,19 +42,18 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the <a href=
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option, which
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, which is
-				is particularly useful for working with JSON feeds in an already defined format.</p>
+				particularly useful for working with JSON feeds in an already defined format.</p>
 
-				<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option has
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> option has the ability to read information not only from objects, but also from arrays
+				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
-				using the same dotted object syntax as for objects. In addition to this, when working with an array data source <a href=
+				with an array data source <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> can process
+				"DataTables initialisation option">columns.data</code></a> can process the data to combine and display the data in simple forms (more complex forms can be defined
-				the data to combine and display the data in simple forms (more complex forms can be defined by using <a href=
+				by using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> as a
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> as a
 				function).</p>
 
 				<p>This example shows two different aspects of using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> to read arrays:</p>
+				"DataTables initialisation option">columns.data</code></a> to read arrays:</p>
 
 				<ul class="markdown">
 					<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which are automatically concatenated together. This is done by

examples/ajax/orthogonal-data.html

@@ -49,8 +49,8 @@ $(document).ready(function() {
 				much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
 
 				<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell DataTables which property to use from the data source object
+				"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
-				for each column.</p>
+				column.</p>
 
 				<p>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:</p>

examples/ajax/simple.html

@@ -34,17 +34,17 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>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 <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option to the
+				the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
-				address of the JSON data source.</p>
+				JSON data source.</p>
 
-				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option also
+				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
-				allows for more advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option"
+				advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
-				title="DataTables initialisation option">ajax<span>DT</span></code></a> documentation or the other Ajax examples for DataTables for further information.</p>
+				"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
 
 				<p>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 <a href=
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option, shown
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other
-				in other examples).</p>
+				examples).</p>
 
 				<p>The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:</p>
 				<pre>

examples/api/add_row.html

@@ -50,12 +50,12 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
-				"DataTables API method">row.add()<span>DT</span></code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an
+				"DataTables API method">row.add()</code></a> 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).
-				array or object). Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title=
+				Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
-				"DataTables API method">rows.add()<span>DT</span></code></a> method (note the plural).</p>
+				method (note the plural).</p>
 
 				<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
-				"DataTables API method">draw()<span>DT</span></code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
+				"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
 
 				<p>This example shows a single row being added each time the button below is clicked upon.</p>
 			</div><button id="addRow">Add new row</button>

examples/api/api_in_init.html

@@ -41,16 +41,15 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example <a href=
-				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete<span>DT</span></code></a>, <a href=
+				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a>, <a href=
-				"//datatables.net/reference/option/rowCallback"><code class="option" title="DataTables initialisation option">rowCallback<span>DT</span></code></a> etc). The
+				"//datatables.net/reference/option/rowCallback"><code class="option" title="DataTables initialisation option">rowCallback</code></a> etc). The complicating issue
-				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.
+				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
-				However, all of DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable
+				DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable <code>this</code> to access the
-				<code>this</code> to access the API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag" title="HTML tag">table</code>
+				API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag" title="HTML tag">table</code> node.</p>
-				node.</p>
 
-				<p>In this example you will be able to see that the <a href="//datatables.net/reference/api/%24()"><code class="api" title=
+				<p>In this example you will be able to see that the <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()</code></a>
-				"DataTables API method">$()<span>DT</span></code></a> method is used to get all cell nodes in the table's body and then act on them (in this case adding a click
+				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
-				event). The action here is to apply a filter to the table with the value of what is in each cell.</p>
+				table with the value of what is in each cell.</p>
 
 				<p>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 callbacks!</p>

examples/api/counter_columns.html

@@ -50,13 +50,12 @@ $(document).ready(function() {
 				change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
 
 				<p>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 <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order<span>DT</span></code></a> and
+				This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href=
-				<a href="//datatables.net/reference/event/search"><code class="event" title="DataTables event">search<span>DT</span></code></a> events emitted by the table. When
+				"//datatables.net/reference/event/search"><code class="event" title="DataTables event">search</code></a> events emitted by the table. When these events are
-				these events are detected the <a href="//datatables.net/reference/api/column().nodes()"><code class="api" title=
+				detected the <a href="//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> method is used
-				"DataTables API method">column().nodes()<span>DT</span></code></a> method is used to get the TD/TH nodes for the target column and the <code>each()</code> helper
+				to get the TD/TH nodes for the target column and the <code>each()</code> helper function used to iterate over each, which have their contents updated as needed.
-				function used to iterate over each, which have their contents updated as needed. Note that the <code>filter</code> and <code>order</code> options are using in the
+				Note that the <code>filter</code> and <code>order</code> options are using in the <a href="//datatables.net/reference/api/column()"><code class="api" title=
-				<a href="//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()<span>DT</span></code></a> method to get the nodes in the
+				"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
-				current order and with the currently applied filter.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/api/form.html

@@ -46,9 +46,9 @@ $(document).ready(function() {
 				not inserted into the document). This increases performance and compatibility, however, it means that submitting forms which span multiple pages requires a little
 				bit of additional work to get the information that is not in the document any longer.</p>
 
-				<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()<span>DT</span></code></a> method can be used to get nodes
+				<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()</code></a> method can be used to get nodes from the
-				from the document regardless of paging, ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api" title=
+				document regardless of paging, ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api" title=
-				"DataTables API method">$()<span>DT</span></code></a> being used to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
+				"DataTables API method">$()</code></a> being used to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
 
 				<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an Ajax call to the server with the form data could easily be
 				performed.</p>

examples/api/highlight.html

@@ -57,10 +57,10 @@ $(document).ready(function() {
 				columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
 
 				<p>This example shows that in action on DataTable by making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
-				"DataTables API method">cell().index()<span>DT</span></code></a> method to get the index of the column that is to be operated on, and then the <a href=
+				"DataTables API method">cell().index()</code></a> method to get the index of the column that is to be operated on, and then the <a href=
-				"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()<span>DT</span></code></a> and <a href=
+				"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()</code></a> and <a href=
-				"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()<span>DT</span></code></a> methods to remove old
+				"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> methods to remove old classes and
-				classes and apply the new highlighted class, respectively.</p>
+				apply the new highlighted class, respectively.</p>
 			</div>
 
 			<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">

examples/api/multi_filter.html

@@ -61,17 +61,16 @@ $(document).ready(function() {
 				global, and you may wish to present controls to search on specific columns only.</p>
 
 				<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
-				title="DataTables API method">column().search()<span>DT</span></code></a> method (note that the name of the method is <code>search</code> not <code>filter</code>
+				title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code> since <a href=
-				since <a href="//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()<span>DT</span></code></a> is used to apply a
+				"//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p>
-				filter to a result set).</p>
 
 				<p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options
 				to be presented to the user.</p>
 
 				<p>This examples shows text elements being used with the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
-				"DataTables API method">column().search()<span>DT</span></code></a> method to add input controls in the footer of the table for each column. Note that the
+				"DataTables API method">column().search()</code></a> method to add input controls in the footer of the table for each column. Note that the
 				<code>*index*:visible</code> option is used for the column selector to ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
-				"DataTables API method">column()<span>DT</span></code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
+				"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/api/multi_filter_select.html

@@ -58,27 +58,25 @@ $(document).ready(function() {
 				"HTML tag">select</code> input controls.</p>
 
 				<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of the <a href=
-				"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()<span>DT</span></code></a> method to get the data
+				"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> method to get the data for each column
-				for each column in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title=
+				in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
-				"DataTables API method">unique()<span>DT</span></code></a> and <a href="//datatables.net/reference/api/sort()"><code class="api" title=
+				"//datatables.net/reference/api/sort()"><code class="api" title="DataTables API method">sort()</code></a> are also used to reduce the data for set input to unique
-				"DataTables API method">sort()<span>DT</span></code></a> are also used to reduce the data for set input to unique and ordered elements. Finally the
+				and ordered elements. Finally the <code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search
-				<code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search using the <a href=
+				using the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method.</p>
-				"//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()<span>DT</span></code></a> method.</p>
 
-				<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
+				<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in
-				"DataTables API method">column().search()<span>DT</span></code></a> method in this particular case performs an exact match through the use of a custom regular
+				this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information
-				expression and disabling DataTables built in smart searching. For more information on the search options in DataTables API please refer to the documentation for
+				on the search options in DataTables API please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
-				<a href="//datatables.net/reference/api/search()"><code class="api" title="DataTables API method">search()<span>DT</span></code></a>, <a href=
+				"DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
-				"//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()<span>DT</span></code></a> and <a href=
+				"DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
-				"//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
+				"DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions
-				"DataTables API method">$.fn.dataTable.util.escapeRegex()<span>DT</span></code></a> which are used for searching globally, by column and escaping regular
+				respectively.</p>
-				expressions respectively.</p>
 
 				<p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
-				"DataTables initialisation option">initComplete<span>DT</span></code></a> a callback function that is triggered when the table has fully loaded. Use of this
+				"DataTables initialisation option">initComplete</code></a> a callback function that is triggered when the table has fully loaded. Use of this callback isn't
-				callback isn't actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
+				actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
-				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete<span>DT</span></code></a> is useful to
+				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code
-				execute code after the data has been loaded.</p>
+				after the data has been loaded.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/api/regex.html

@@ -59,11 +59,11 @@ $(document).ready(function() {
 			<div class="info">
 				<p>Searching 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 search (<a href="//datatables.net/reference/api/search()"><code class="api" title=
-				"DataTables API method">search()<span>DT</span></code></a>) and for each individual column (<a href="//datatables.net/reference/api/column().search()"><code class=
+				"DataTables API method">search()</code></a>) and for each individual column (<a href="//datatables.net/reference/api/column().search()"><code class="api" title=
-				"api" title="DataTables API method">column().search()<span>DT</span></code></a>).</p>
+				"DataTables API method">column().search()</code></a>).</p>
 
-				<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
+				<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method after
-				"DataTables API method">draw()<span>DT</span></code></a> method after performing the search, in order for the results to be displayed.</p>
+				performing the search, in order for the results to be displayed.</p>
 
 				<p>Each search (global or column) can be marked as a regular expression (allowing you to create very complex interactions) and as a smart search or not. When smart
 				searching is enabled on a particular search, DataTables will modify the user input string to a complex regular expression which can make searching more

examples/api/row_details.html

@@ -95,12 +95,12 @@ $(document).ready(function() {
 				<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> 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.</p>
 
-				<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title=
+				<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
-				"DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a row is already displayed, and if so hide it (<a href=
+				methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
-				"//datatables.net/reference/api/row().child.hide()"><code class="api" title="DataTables API method">row().child.hide()<span>DT</span></code></a>), otherwise show
+				"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
-				it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title="DataTables API method">row().child.show()<span>DT</span></code></a>). The
+				"DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but
-				content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but you would replace that with whatever you wanted to show the
+				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
-				content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.</p>
+				information to show.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/api/select_row.html

@@ -43,8 +43,8 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
-				"DataTables API method">rows().data()<span>DT</span></code></a> method can then be used to get the data for the selected rows. In this case it is simply counting
+				"DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
-				the number of selected rows, but much more complex interactions can easily be developed.</p>
+				selected rows, but much more complex interactions can easily be developed.</p>
 
 				<p>If you are looking for a more complete row selection option <a href="http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete
 				API for selecting rows and acting upon those selected rows.</p>

examples/api/select_single_row.html

@@ -51,10 +51,10 @@ $(document).ready(function() {
 				row already has a selected class or not, and 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.</p>
 
-				<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
+				<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which
-				"DataTables API method">row().remove()<span>DT</span></code></a> method which will delete a row from a table, and the <a href=
+				will delete a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method
-				"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()<span>DT</span></code></a> method with <code>false</code> as its
+				with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
-				first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be reset to the first page).</p>
+				reset to the first page).</p>
 
 				<p>If you are looking for a more complete row selection option <a href="http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete
 				API for selecting rows and acting upon those selected rows.</p>

examples/api/show_hide.html

@@ -47,13 +47,12 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
-				"DataTables API method">column().visible()<span>DT</span></code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling,
+				"DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it
-				just to show it enabled with this API method, although that is not required for the API function to work.</p>
+				enabled with this API method, although that is not required for the API function to work.</p>
 
 				<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
-				title="DataTables API method">columns()<span>DT</span></code></a> method to select multiple columns and then using the <a href=
+				title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
-				"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()<span>DT</span></code></a> method to set
+				"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
-				their state.</p>
 
 				<p>If you are looking for a more complete column visibility interaction controls <a href="http://datatables.net/extras/colvis">ColVis for DataTables</a> provides a
 				complete interface for allowing the user to show and hide columns in the table.</p>

examples/api/tabs_and_scrolling.html

@@ -52,11 +52,11 @@ $(document).ready(function() {
 				enabled.</p>
 
 				<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
-				"DataTables API method">columns.adjust()<span>DT</span></code></a> method when the table is made visible (i.e. it has dimensions).</p>
+				"DataTables API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has dimensions).</p>
 
 				<p>This example shows how the jQuery UI <code>show</code> event can be used to trigger this method call. The visible tables on the page are selected using the
 				static <code>dt-api-static tables()</code> method and passing the result to <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
-				"DataTables API method">columns.adjust()<span>DT</span></code></a>.</p>
+				"DataTables API method">columns.adjust()</code></a>.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/basic_init/alt_pagination.html

@@ -35,7 +35,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href=
-				"//datatables.net/reference/option/pagingType"><code class="option" title="DataTables initialisation option">pagingType<span>DT</span></code></a> option.</p>
+				"//datatables.net/reference/option/pagingType"><code class="option" title="DataTables initialisation option">pagingType</code></a> option.</p>
 
 				<p>There are four built-in options for which pagination controls DataTables should show:</p>
 
@@ -48,10 +48,9 @@ $(document).ready(function() {
 				</ul>
 
 				<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; <a href=
-				"//datatables.net/reference/option/language.paginate.first"><code class="option" title=
+				"//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
-				"DataTables initialisation option">language.paginate.first<span>DT</span></code></a>, <a href=
+				<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
-				"//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
+				"DataTables initialisation option">language.paginate.previous</code></a> etc.</p>
-				"DataTables initialisation option">language.paginate.previous<span>DT</span></code></a> etc.</p>
 
 				<p>Additional options for the buttons that are shown can be added through the use of pagination type plug-ins. Furthermore, how the buttons are actually shown can
 				be altered through the use of plug-in pagination renderers.</p>

examples/basic_init/comma-decimal.html

@@ -41,14 +41,14 @@ $(document).ready(function() {
 				the decimal place in a displayed number.</p>
 
 				<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however, DataTables' type detection and sorting methods can be instructed
-				through the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title=
+				through the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title="DataTables initialisation option">language.decimal</code></a>
-				"DataTables initialisation option">language.decimal<span>DT</span></code></a> option which character is used as the decimal place in your numbers. This will be
+				option which character is used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type detection and sorting algorithms to
-				used to correctly adjust DataTables' type detection and sorting algorithms to sort numbers in your table.</p>
+				sort numbers in your table.</p>
 
 				<p>Any character can be passed in using the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title=
-				"DataTables initialisation option">language.decimal<span>DT</span></code></a> option, although the decimal place character used in a single table must be
+				"DataTables initialisation option">language.decimal</code></a> option, although the decimal place character used in a single table must be consistent (i.e. numbers
-				consistent (i.e. numbers with a dot decimal place and comma decimal place cannot both appear in the same table). Different tables on the same page can use
+				with a dot decimal place and comma decimal place cannot both appear in the same table). Different tables on the same page can use different decimal characters if
-				different decimal characters if required.</p>
+				required.</p>
 
 				<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
 			</div>

examples/basic_init/complex_header.html

@@ -36,7 +36,7 @@ $(document).ready(function() {
 
 				<p>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 order listener, if more than one cell for a column if found. The <a href="//datatables.net/reference/option/orderCellsTop"><code class="option" title=
-				"DataTables initialisation option">orderCellsTop<span>DT</span></code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
+				"DataTables initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
 
 				<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
 			</div>

examples/basic_init/dom.html

@@ -35,13 +35,13 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href=
-				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom<span>DT</span></code></a> initialisation parameter which
+				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> initialisation parameter which can be set to
-				can be set to indicate where you wish particular features to appear in the DOM. You can also specify <code>div</code> wrapping containers (with an id and / or
+				indicate where you wish particular features to appear in the DOM. You can also specify <code>div</code> wrapping containers (with an id and / or class) to provide
-				class) to provide complete layout flexibility.</p>
+				complete layout flexibility.</p>
 
 				<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href="//datatables.net/reference/option/dom"><code class="option"
-				title="DataTables initialisation option">dom<span>DT</span></code></a> option. For example the <code>l</code> option is used for the <code>L</code>ength changing
+				title="DataTables initialisation option">dom</code></a> option. For example the <code>l</code> option is used for the <code>L</code>ength changing input
-				input option.</p>
+				option.</p>
 
 				<p>The built-in options available are:</p>
 
@@ -99,8 +99,8 @@ $(document).ready(function() {
 				<p>All options (with the exception of the <code>t</code> (table) option can be specified multiple times, for if you want to show the same control multiple times
 				(pagination at the top and bottom of the table for example).</p>
 
-				<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class="option" title=
+				<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>
-				"DataTables initialisation option">dom<span>DT</span></code></a> options can be added to DataTables through the use of plug-ins.</p>
+				options can be added to DataTables through the use of plug-ins.</p>
 
 				<p>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
 				<code>div</code>.</p>

examples/basic_init/hidden_columns.html

@@ -45,8 +45,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href=
-				"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible<span>DT</span></code></a> column
+				"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> column option.</p>
-				option.</p>
 
 				<p>The column that is hidden is still part of the table and can be made visible through the <code>api column().visible()</code> API method at a future time if you
 				wish to have columns which can be shown and hidden.</p>

examples/basic_init/language.html

@@ -40,7 +40,7 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option"
-				title="DataTables initialisation option">language<span>DT</span></code></a> object to the DataTable constructor.</p>
+				title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
 
 				<p>The example above shows a different set of English string being used, rather than the defaults.</p>
 			</div>

examples/basic_init/multi_col_sort.html

@@ -48,17 +48,14 @@ $(document).ready(function() {
 				<ul class="markdown">
 					<li>User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column).</li>
 					<li>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 <a href=
-					"//datatables.net/reference/option/columns.orderData"><code class="option" title="DataTables initialisation option">columns.orderData<span>DT</span></code></a>
+					"//datatables.net/reference/option/columns.orderData"><code class="option" title="DataTables initialisation option">columns.orderData</code></a> option.</li>
-					option.</li>
 					<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option" title=
-					"DataTables initialisation option">columns.orderData<span>DT</span></code></a> option to specify a multiple column order by default (for example <code>[ 0, 1
+					"DataTables initialisation option">columns.orderData</code></a> option to specify a multiple column order by default (for example <code>[ 0, 1 ]</code>).</li>
-					]</code>).</li>
+					<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> API method.</li>
-					<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()<span>DT</span></code></a> API
-					method.</li>
 				</ul>
 
 				<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through the <a href=
-				"//datatables.net/reference/option/orderMulti"><code class="option" title="DataTables initialisation option">orderMulti<span>DT</span></code></a> option.</p>
+				"//datatables.net/reference/option/orderMulti"><code class="option" title="DataTables initialisation option">orderMulti</code></a> option.</p>
 
 				<p>The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied
 				directly to the first and the salary column to the first name column.</p>

examples/basic_init/scroll_x.html

@@ -40,8 +40,8 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href="//datatables.net/reference/option/scrollX"><code class="option" title=
-				"DataTables initialisation option">scrollX<span>DT</span></code></a> parameter to be whatever you want the container wrapper's width to be (this should be 100% in
+				"DataTables initialisation option">scrollX</code></a> parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all
-				almost all cases with the width being constrained by the container element).</p>
+				cases with the width being constrained by the container element).</p>
 
 				<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of <code>th, td { white-space: nowrap; }</code> is
 				also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).</p>

examples/basic_init/scroll_y.html

@@ -40,13 +40,13 @@ $(document).ready(function() {
 				with pagination enabled as well!).</p>
 
 				<p>To enable y-scrolling simply set the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
-				"DataTables initialisation option">scrollY<span>DT</span></code></a> parameter to be whatever you want the container wrapper's height to be (any CSS measurement is
+				"DataTables initialisation option">scrollY</code></a> parameter to be whatever you want the container wrapper's height to be (any CSS measurement is acceptable, or
-				acceptable, or just a number which is treated as pixels).</p>
+				just a number which is treated as pixels).</p>
 
 				<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option" title=
-				"DataTables initialisation option">scrollCollapse<span>DT</span></code></a> option is enabled in this example. This will have the container match the height of the
+				"DataTables initialisation option">scrollCollapse</code></a> option is enabled in this example. This will have the container match the height of the rows shown in
-				rows shown in the table if that height is smaller than that given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
+				the table if that height is smaller than that given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
-				"DataTables initialisation option">scrollY<span>DT</span></code></a>.</p>
+				"DataTables initialisation option">scrollY</code></a>.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/basic_init/state_save.html

@@ -35,22 +35,20 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <a href=
-				"//datatables.net/reference/option/stateSave"><code class="option" title="DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
+				"//datatables.net/reference/option/stateSave"><code class="option" title="DataTables initialisation option">stateSave</code></a> option.</p>
 
 				<p>The built in state saving method uses the HTML5 <code>localStorage</code> and <code>sessionStorage</code> APIs for efficient storage of the data. Please note
 				that this means that the built in state saving option <strong>will not work with IE6/7</strong> as these browsers do not support these APIs. Alternative options of
 				using cookies or saving the state on the server through Ajax can be used through the <a href="//datatables.net/reference/option/stateSaveCallback"><code class=
-				"option" title="DataTables initialisation option">stateSaveCallback<span>DT</span></code></a> and <a href=
+				"option" title="DataTables initialisation option">stateSaveCallback</code></a> and <a href="//datatables.net/reference/option/stateLoadCallback"><code class=
-				"//datatables.net/reference/option/stateLoadCallback"><code class="option" title="DataTables initialisation option">stateLoadCallback<span>DT</span></code></a>
+				"option" title="DataTables initialisation option">stateLoadCallback</code></a> options.</p>
-				options.</p>
 
 				<p>The duration for which the saved state is valid and can be used to restore the table state can be set using the <a href=
-				"//datatables.net/reference/option/stateDuration"><code class="option" title="DataTables initialisation option">stateDuration<span>DT</span></code></a>
+				"//datatables.net/reference/option/stateDuration"><code class="option" title="DataTables initialisation option">stateDuration</code></a> initialisation parameter
-				initialisation parameter (2 hours by default). This parameter also controls if <code>localStorage</code> (0 or greater) or <code>sessionStorage</code> (-1) is used
+				(2 hours by default). This parameter also controls if <code>localStorage</code> (0 or greater) or <code>sessionStorage</code> (-1) is used to store the data.</p>
-				to store the data.</p>
 
 				<p>The example below simply shows state saving enabled in DataTables with the <a href="//datatables.net/reference/option/stateSave"><code class="option" title=
-				"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
+				"DataTables initialisation option">stateSave</code></a> option.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/basic_init/table_sorting.html

@@ -34,14 +34,13 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the <a href=
-				"//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order<span>DT</span></code></a> initialisation parameter,
+				"//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order</code></a> initialisation parameter, you can set the
-				you can set the table to display the data in exactly the order that you want.</p>
+				table to display the data in exactly the order that you want.</p>
 
-				<p>The <a href="//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order<span>DT</span></code></a> parameter is
+				<p>The <a href="//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order</code></a> parameter is an array of
-				an array of arrays where the first value of the inner array is the column to order on, and the second is <code class="string" title="String">'asc'</code>
+				arrays where the first value of the inner array is the column to order on, and the second is <code class="string" title="String">'asc'</code> (ascending ordering)
-				(ascending ordering) or <code class="string" title="String">'desc'</code> (descending ordering) as required. <a href=
+				or <code class="string" title="String">'desc'</code> (descending ordering) as required. <a href="//datatables.net/reference/option/order"><code class="option"
-				"//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order<span>DT</span></code></a> is a 2D array to allow
+				title="DataTables initialisation option">order</code></a> is a 2D array to allow multi-column ordering to be defined.</p>
-				multi-column ordering to be defined.</p>
 
 				<p>The table below is ordered (descending) by the Age column.</p>
 			</div>

examples/data_sources/ajax.html

@@ -36,16 +36,15 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>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 <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option to the
+				the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
-				address of the JSON data source.</p>
+				JSON data source.</p>
 
-				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option also
+				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
-				allows for more advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option"
+				advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
-				title="DataTables initialisation option">ajax<span>DT</span></code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further
+				"DataTables initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further information.</p>
-				information.</p>
 
 				<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option ).</p>
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/data_sources/js_array.html

@@ -105,10 +105,9 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>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 <a href="//datatables.net/reference/option/data"><code class="option" title="DataTables initialisation option">data<span>DT</span></code></a>
+				is achieved using the <a href="//datatables.net/reference/option/data"><code class="option" title="DataTables initialisation option">data</code></a> option in the
-				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
+				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 <a href=
-				<a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a>
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option).</p>
-				option).</p>
 
 				<p>A <code>&lt;table&gt;</code> 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 a Javascript array.</p>

examples/data_sources/server_side.html

@@ -41,8 +41,8 @@ $(document).ready(function() {
 				of the table will result in a new Ajax request being made to get the required data.</p>
 
 				<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
-				"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
+				"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
 
 				<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of
 				using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>

examples/plug-ins/api.html

@@ -60,8 +60,7 @@ $(document).ready(function() {
 				<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
 				<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> 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 <a href=
-				"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()<span>DT</span></code></a> method and the options for its
+				"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>
-				selectors.</p>
 
 				<p>For more information about API plug-ins; creating them and their requirements, please refer to the plug-in development documentation.</p>
 			</div>

examples/plug-ins/dom_sort.html

@@ -83,8 +83,8 @@ $(document).ready(function() {
 
 				<p>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 <a href=
-				"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()<span>DT</span></code></a> or <a href=
+				"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href=
-				"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()<span>DT</span></code></a> methods.</p>
+				"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/plug-ins/sorting_manual.html

@@ -51,8 +51,8 @@ $(document).ready(function() {
 				the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
 
 				<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title=
-				"DataTables initialisation option">columns.type<span>DT</span></code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any
+				"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of
-				level of complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
+				complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
 				<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in
 				development documentation.</p>
 

examples/resources/demo.css

@@ -181,59 +181,80 @@ code {
 	        border-radius: 3px;
 }
 
-code > span {
+code:after {
+	display: inline-block;
 	border-left: 1px solid rgba( 0, 0, 0, 0.2 );
 	margin-left: 4px;
 	padding-left: 4px;
 	opacity: 0.5;
 }
 
+a code {
+	text-decoration: underline;
+}
+
 code.option {
 	color: #D14; /* red */
 	background-color: #fcf6f8;
 	border: 1px solid #f7d6df;
 }
+code.option:after { content: 'Option'; }
 
 code.path {
 	color: #095c05; /* dark green */
-	border: 1px solid #D6E9C6;
+	background-color: #eef7ed;
+	border: 1px solid #8ccb89;
 }
+code.path:after { content: 'Path'; }
 
 code.tag {
-	color: #a1a713; /* yellow */
+	color: #c29f00; /* yellow */
-	background-color: #f7f8e6;
+	background-color: #fff9d7;
-	border: 1px solid #D6E9C6;
+	border: 1px solid #ffe700;
 }
+code.tag:after { content: 'Tag'; }
 
 code.api {
 	color: #0c199c; /* dark blue */
 	background-color: #f4f5fc;
 	border: 1px solid #c6cbe9;
 }
+code.api:after { content: 'API'; }
 
 code.type {
-	color: #d119cf; /* purple */
+	color: #d119cf; /* pink */
 	background-color: #faebfa;
 	border: 1px solid #f3aef2;
 }
+code.type:after { content: 'Type'; }
 
 code.event {
 	color: #2a839e; /* deep aqua */
 	background-color: #f5fafb;
 	border: 1px solid #a8ddec;
 }
+code.event:after { content: 'Event'; }
 
 code.string {
-	color: #e8941e; /* orange */
+	color: #c05f1d; /* brown */
-	background-color: #fcf8f1;
+	background-color: #f5eee9;
-	border: 1px solid #f7e4c9;
+	border: 1px solid #dfc4b2;
 }
+code.string:after { content: 'String'; }
 
 code.field {
 	color: #ad1ee8; /* purple */
 	background-color: #f9f1fc;
 	border: 1px solid #ebc9f7;
 }
+code.field:after { content: 'Field'; }
+
+code.button {
+	color: #464e50; /* grey */
+	background-color: #f2f7f9;
+	border: 1px solid #b8c3c5;
+}
+code.button:after { content: 'Button'; }
 
 code.multiline {
 	display: inline-block;

examples/server_side/custom_vars.html

@@ -43,8 +43,8 @@ $(document).ready(function() {
 
 			<div class="info">
 				<p>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 <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option's <code>data</code>
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option's <code>data</code> parameter which
-				parameter which can be used in one of two different ways:</p>
+				can be used in one of two different ways:</p>
 
 				<ul class="markdown">
 					<li><code>object</code> - An object data to send to the server. This is useful for adding static data to the request.</li>

examples/server_side/defer_loading.html

@@ -41,13 +41,13 @@ $(document).ready(function() {
 				preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).</p>
 
 				<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href="//datatables.net/reference/option/deferLoading"><code class=
-				"option" title="DataTables initialisation option">deferLoading<span>DT</span></code></a> initialisation property. It serves two purposes, firstly to indicate that
+				"option" title="DataTables initialisation option">deferLoading</code></a> initialisation property. It serves two purposes, firstly to indicate that deferred
-				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
+				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
-				pagination to be displayed correctly).</p>
+				to be displayed correctly).</p>
 
 				<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
-				"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading<span>DT</span></code></a> to tell
+				"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
-				DataTables that this data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
+				data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/server_side/ids.html

@@ -45,9 +45,8 @@ $(document).ready(function() {
 			<div class="info">
 				<p>Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for
 				example). By assigning the ID you want to apply to each row using the property <code>DT_RowId</code> of the data source object for each row (this property name can
-				be configured using the <a href="//datatables.net/reference/option/idSrc"><code class="option" title=
+				be configured using the <a href="//datatables.net/reference/option/idSrc"><code class="option" title="DataTables initialisation option">idSrc</code></a> option),
-				"DataTables initialisation option">idSrc<span>DT</span></code></a> option), DataTables will automatically add it for you (note that this will work for Ajax and
+				DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).</p>
-				Javascript loaded data as well as for server-side processing).</p>
 
 				<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions:</p>
 

examples/server_side/index.html

@@ -25,8 +25,8 @@
 				each draw of the table will result in a new Ajax request being made to get the required data.</p>
 
 				<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
-				"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
+				"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
 
 				<p>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
 			</div>

examples/server_side/jsonp.html

@@ -41,16 +41,15 @@ $(document).ready(function() {
 				<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of 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 <code>dataType</code> option of the <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation option.</p>
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
 
-				<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
+				<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
-				"DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a>
+				option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
-				options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class=
+				also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
-				"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
+				option).</p>
 
-				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
+				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
-				"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>dataType</code> option set to retrieve JSONP data for server-side
+				used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
-				processing in DataTables.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/server_side/object_data.html

@@ -48,8 +48,8 @@ $(document).ready(function() {
 				database for example). For these situations DataTables supports the reading of data for objects as well as arrays.</p>
 
 				<p>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 <a href=
-				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> property
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
-				given for each column.</p>
+				column.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/server_side/pipeline.html

@@ -164,8 +164,8 @@ $(document).ready(function() {
 				<p>This example shows one technique to reduce the number of Ajax calls that are made to the server by 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 <a href="//datatables.net/reference/option/ajax"><code class="option" title=
-				"DataTables initialisation option">ajax<span>DT</span></code></a> option as a function. This function then performs the logic of deciding if another Ajax call is
+				"DataTables initialisation option">ajax</code></a> option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if
-				needed, or if data from the cache can be used.</p>
+				data from the cache can be used.</p>
 
 				<p>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, is only available at the server.</p>

examples/server_side/post.html

@@ -49,16 +49,15 @@ $(document).ready(function() {
 			<div class="info">
 				<p>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 <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
-				"DataTables initialisation option">ajax<span>DT</span></code></a> initialisation option.</p>
+				"DataTables initialisation option">ajax</code></a> initialisation option.</p>
 
-				<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
+				<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
-				"DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a>
+				option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
-				options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class=
+				also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
-				"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
+				option).</p>
 
-				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
+				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
-				"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>type</code> option set to <code class="string" title=
+				used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
-				"String">POST</code> to make a POST request.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">

examples/server_side/row_details.html

@@ -101,15 +101,15 @@ $(document).ready(function() {
 
 				<p>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 <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
-				"DataTables initialisation option">columns.data<span>DT</span></code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class=
+				"DataTables initialisation option">columns.data</code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
-				"option" title="DataTables initialisation option">columns.defaultContent<span>DT</span></code></a>, in combination with CSS to show an empty cell with a background
+				"DataTables initialisation option">columns.defaultContent</code></a>, in combination with CSS to show an empty cell with a background image which can be clicked
-				image which can be clicked upon.</p>
+				upon.</p>
 
-				<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title=
+				<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
-				"DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a row is already displayed, and if so hide it, if not show it. The
+				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
-				content of the child row is, in this example, defined by the <code>format()</code> function, but you would replace that with whatever you wanted to show the
+				<code>format()</code> function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to
-				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
+				the server to obtain the extra information to show. Note that the format details function has access to the full data source object for the row, including
-				access to the full data source object for the row, including information that is not actually shown in the table (the salary parameter for example).</p>
+				information that is not actually shown in the table (the salary parameter for example).</p>
 
 				<p>Furthermore, this example shows a small difference from the <a href="../api/row_details.html">client-side row details example</a> in that to have rows
 				automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row <code>id</code>. This is required because

examples/server_side/simple.html

@@ -41,8 +41,8 @@ $(document).ready(function() {
 				each draw of the table will result in a new Ajax request being made to get the required data.</p>
 
 				<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
-				"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
+				"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
 
 				<p>This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.</p>
 			</div>

examples/styling/jqueryUI.html

@@ -41,9 +41,9 @@ $(document).ready(function() {
 				information.</p>
 
 				<p>Please note that DataTables 1.10- actually has built-in support for jQuery UI styling integration through the <a href=
-				"//datatables.net/reference/option/jQueryUI"><code class="option" title="DataTables initialisation option">jQueryUI<span>DT</span></code></a> option. However, this
+				"//datatables.net/reference/option/jQueryUI"><code class="option" title="DataTables initialisation option">jQueryUI</code></a> option. However, this option is
-				option is deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other libraries - a more modular,
+				deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other libraries - a more modular, maintainable
-				maintainable and extensible method. The method presented on this page is the method that will be use in future.</p>
+				and extensible method. The method presented on this page is the method that will be use in future.</p>
 			</div>
 
 			<table id="example" class="display" cellspacing="0" width="100%">