Azaki
/
Plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Bootstrap integration files

Browse Source 
Add index files
pull/2/head
Allan Jardine 13 years ago
parent 391d7b7516
commit 6e221d94b9
9 changed files with 454 additions and 3 deletions
Show Stats Download Patch File Download Diff File

9
README.md
Unescape View File

@ -1,4 +1,7 @@
Plugins
=======
DataTables Plugins
==================
Plug-ins for DataTables
This repository contains a collection of plug-ins for the jQuery [DataTables](http://datatables.net) table enhancer. These plug-ins are feature enhancing for the DataTables library, adding extra options to core functionality such as additional sort algorithms, API methods and pagination controls. The plug-ins should not be confused with DataTables "extras" which are more significant software libraries which add additional features to DataTables.
* Sorting plug-ins
*

36
api/index.html
Unescape View File

@ -0,0 +1,36 @@
<h2>Custom API functions</h2>
<p>One of the most common interactions with DataTables for a developer (other than initialisation of the table of course!) is to make use of the <a href="/api">API functions</a> provided by DataTables. While allowing for a fairly extensive range of code interactions, the default API set can be greatly enhanced by making use of the functions provided below, as suitable for your application.</p>
<ul>
<li><a href="#how_to">How to use DataTables plug-in API functions</a></li>
<li><a href="#functions">Plug-in API functions</a></li>
</ul>
<a name="how_to"></a>
<h3>How to use DataTables plug-in API functions</h3>
<p>To make use of one of the plug-in API functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. After that, you will be able to initialise the table, and call the function on the resulting object. As an example the code below makes use of <a href="#fnGetHiddenNodes">fnGetHiddenNodes</a> saved into a file (<a href="/examples/plug-ins/plugin_api.html">live example</a>):</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.fnGetHiddenNodes.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
var oTable = $('#example').dataTable();
$('#button').click( function () {
var nHidden = oTable.fnGetHiddenNodes();
alert( nHidden.length +' nodes were returned' );
} );
} );
&lt;/script&gt;
</pre>
<p>Please note that DataTables will automatically pass the settings object as the first parameter. As such, you do not need to pass the settings object, which you will see if you look at the plug-in API's code.</p>
<a name="functions"></a>
<h3>Plug-in API functions</h3>
<!-- API -->

77
filtering/index.html
Unescape View File

@ -0,0 +1,77 @@
<h2>Filtering plug-in functions</h2>
<p>The filtering plug-in options that DataTables provides are remarkably powerful, and and let you set almost any filtering criterion you wish for user based input. A couple of things to note for filtering, firstly you will likely need to customise the filtering presented on this page to match your specific needs. Secondly, if you are using server-side processing, DataTables doesn't do any client-side filtering, so these plug-ins will not have any effect (with server-side processing, all data manipulation is done by the server - so you would need to implement these filters there).</p>
<p>DataTables supports two different kinds of plug-in filtering methods:</p>
<ul>
<li>Type based column filtering - filtering based on the sType of the column.
<ul style="font-size:1em;">
<li><a href="#how_to_type_based">How to use DataTables plug-in column type based filtering</a></li>
<li><a href="#functions_type_based">Plug-in column type based filtering</a></li>
</ul>
</li>
<li>Row based filtering - filtering applied to the data from the whole row.
<ul style="font-size:1em;">
<li><a href="#how_to">How to use DataTables plug-in row filtering functions</a></li>
<li><a href="#functions">Plug-in row filtering functions</a></li>
</ul>
</li>
</ul>
<a name="how_to"></a>
<h3>How to use DataTables plug-in column type based filtering</h3>
<p>To make use of the column (type) based filtering plug-in functions below, you need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. You must also set the column type for the column(s) that you wish to apply the filter to using <a href="/usage/columns#sType">sType</a>.</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.htmlColumnFilter.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
var oTable = $('#example').dataTable({
"aoColumns": [
"sType": "html",
null
]
});
} );
&lt;/script&gt;
</pre>
<a name="functions"></a>
<h3>Plug-in column type filtering functions</h3>
<!-- FILTERING_TYPE -->
<a name="how_to"></a>
<h3>How to use DataTables plug-in row filtering functions</h3>
<p>To add the functionality provided by the filtering functions below, you simply need to include it in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. These filters are global and will be applied whenever DataTables applies it's own filtering (for details please see the <a href="/development/filtering#global_filters">filters development page</a>).</p>
<p>In the following example the <a href="#range_numbers">range filtering (numbers)</a> plug-in is saved to a file, and used in the DataTable which is initialised. Note also that event listeners are applied to the two inputs, which will cause the table to redraw, and thus filter the new data (<a href="/examples/plug-ins/range_filtering.html">live example</a>):</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.rangeFilter.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
var oTable = $('#example').dataTable();
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
} );
&lt;/script&gt;
</pre>
<a name="functions"></a>
<h3>Plug-in row filtering functions</h3>
<!-- FILTERING_ROW -->

33
i18n/index.html
Unescape View File

@ -0,0 +1,33 @@
<h2>Internationalisation</h2>
<p>Localisation of the presentation layer is important for any software package, and I aim to make this normally arduous task as easy as possible in DataTables. To this end, a number of contributors have kindly translated the language strings used is DataTables into various different languages. If you translate DataTables into any other languages, please <a href="/contact">let me know</a> and I'll happily include the translation here.</p>
<ul>
<li><a href="#how_to">How to use DataTables internalisation options</a></li>
<li><a href="#functions">Translations</a></li>
</ul>
<a name="how_to"></a>
<h3>How to use DataTables internalisation options</h3>
<p>There are two methods by which you can include internalisation options in DataTables - loading the language file through an Ajax request, or at initialisation time using the <a href="/usage/i18n">oLanguage</a> property. The following example shows how to include the <a href="#German">German translation</a> as an Ajax file (<a href="/examples/advanced_init/language_file.html">live example</a> - a <a href="/examples/basic_init/language.html">live example</a> for oLanguage control is also available):</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "dataTables.german.txt"
}
} );
} );
&lt;/script&gt;
</pre>
<a name="functions"></a>
<h3>Translations</h3>
<!-- i18n -->

48
integration/bootstrap/dataTables.bootstrap.css
Unescape View File

@ -0,0 +1,48 @@
div.dataTables_length label {
float: left;
text-align: left;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
float: right;
}
div.dataTables_info {
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
table.table {
clear: both;
margin-bottom: 6px !important;
}
table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
cursor: pointer;
*cursor: hand;
}
table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; }
table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; }
table.dataTable th:active {
outline: none;
}

107
integration/bootstrap/dataTables.bootstrap.js
Unescape View File

@ -0,0 +1,107 @@
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
/* Default class modification */
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};
/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};
$(nPaging).addClass('pagination').append(
'<ul>'+
'<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
'<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
'</ul>'
);
var els = $('a', nPaging);
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
},
"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
// Remove the middle elements
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
// Add the new list items and their event handlers
for ( j=iStart ; j<=iEnd ; j++ ) {
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
$('<li '+sClass+'><a href="#">'+j+'</a></li>')
.insertBefore( $('li:last', an[i])[0] )
.bind('click', function (e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
fnDraw( oSettings );
} );
}
// Add / remove disabled classes from the static elements
if ( oPaging.iPage === 0 ) {
$('li:first', an[i]).addClass('disabled');
} else {
$('li:first', an[i]).removeClass('disabled');
}
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
$('li:last', an[i]).addClass('disabled');
} else {
$('li:last', an[i]).removeClass('disabled');
}
}
}
}
} );

33
pagination/index.html
Unescape View File

@ -0,0 +1,33 @@
<h2>Custom pagination types</h2>
<p>The style of the pagination options that Datatables presents to the end-user can greatly effect the look and feel of your table, as well as, of course, the interaction behaviour. Through the plug-in options you can define your own paging function to create the interaction that you are looking for.</p>
<ul>
<li><a href="#how_to">How to use DataTables plug-in pagination functions</a></li>
<li><a href="#functions">Plug-in pagination functions</a></li>
</ul>
<a name="how_to"></a>
<h3>How to use DataTables plug-in pagination functions</h3>
<p>To use a pagination plug-in, you must include the pagination plug-in code from the plug-ins available below, after you load the DataTables library, but before you initialise the DataTable. When initialising the DataTable, you must also tell it to make use of this plug-in, rather than using the default built-in types, by setting the 'sPaginationType' to the value required by the plug-in. As an example the code below makes use of the <a href="#scrolling">scrolling pagination plug-in</a> saved into a file (<a href="/examples/plug-ins/paging_plugin.html">live example</a>):</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.scrollingPagination.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "scrolling"
} );
} );
&lt;/script&gt;
</pre>
<a name="functions"></a>
<h3>Plug-in pagination functions</h3>
<!-- PAGINATION -->

84
sorting/index.html
Unescape View File

@ -0,0 +1,84 @@
<h2>Sorting plug-ins</h2>
<p>DataTables provides two APIs for sorting information in a table: <a href="/development/sorting#type_based">type based sorting</a> and <a href="/development/sorting#data_source">custom data source sorting</a>. They can be used together or independently, and are fully described on the <a href="/development/sorting">sorting development page</a>. By far the most commonly used of these two types is "type based sorting" and is the one you are most likely to want to use if just starting out with DataTables.</p>
<ul>
<li><a href="#how_to_type">How to use type based sorting plug-ins</a> - sorting based on the <a href="/usage/columns#sType">sType</a> of the column.</li>
<li><a href="#functions_type">Type based column sorting plug-ins</a></li>
<li><a href="#how_to_data_source">How to use custom data source sorting plug-ins</a> - sorting applied to data supplied by either a plug-in or custom function.</li>
<li><a href="#functions_data_source">Custom data source sorting plug-ins</a></li>
</ul>
<a name="how_to_type"></a>
<h3>How to use DataTables plug-in sorting functions functions (type based)</h3>
<p>To add the ability to sort specific data types, using the plug-in functions below, you simply need to include the plug-in's code in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. Then using the <a href="/usage/columns#sType">sType</a> parameter for that column, set it to the value needed for the plug-in. If sType is not given for a column, DataTables will attempt to detect the type automatically. The following example shows how the <a href="#numeric_comma">numeric comma sorting plug-in</a> (saved to a file) can be used with a DataTable, sorting on the fourth column (<a href="/examples/plug-ins/sorting_sType.html">live example</a>):</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.numericComma.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
{ "sType": "numeric-comma" },
null
]
} );
} );
&lt;/script&gt;
</pre>
<a name="functions_type"></a>
<h3>Sorting functions (type based column sorting)</h3>
<p>The main DataTables package includes sorting functions for string, date and numeric data, but you may very well wish to order data in some other manner (for example currency, formatting numbers, multi-part data etc). The sorting function pairs below provide a wealth of different sorting methods.</p>
<p>It is also worth noting that sorting function go hand-in-hand with <a href="/plug-ins/type-detection">type detection</a> functions, and many of the function pairs below has a corresponding type detection function to make installation very easy.</p>
<!-- SORT_TYPE -->
<a name="how_to_data_source"></a>
<h3>How to use custom data source sorting plug-ins</h3>
<p>Custom data source sorting plug-ins complement type based sorting by adding a method to DataTables to retrieve data live from the DOM just prior to the table being sorted. As such, you can use type based sorting, in-combination with custom data source sorting. This is particularly useful if dealing with DOM information in a table which can change dynamically, such as form inputs, but it can add a little extra overhead to the sorting.</p>
<p>To make use of the plug-ins below, you simply need to include the plug-in's code in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. You also need to specify the <a href="/usage/columns#sSortDataType">sSortDataType</a> parameter for the column, to tell it which plug-in function to use.</p>
<p>The example below shows the use of multiple custom data source plug-ins, and also it's use in-combination with sType (<a href="/examples/plug-ins/dom_sort.html">live example</a>):</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.dataSourcePlugins.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text", "sType": "numeric" },
{ "sSortDataType": "dom-select" },
{ "sSortDataType": "dom-checkbox" }
]
} );
} );
&lt;/script&gt;
</pre>
<a name="functions_data_source"></a>
<h3>Custom data source sorting</h3>
<p>The custom data source functions are used to update the cached data in DataTables, so sorting can occur on columns with user input information.</p>
<!-- SORT_DATA_SOURCE -->

30
type-detection/index.html
Unescape View File

@ -0,0 +1,30 @@
<h2>Type detection</h2>
<p>When a DataTable is initialised, each column is scanned automatically for the type of data it contains, which in turn allows DataTables to apply the require type of sorting function. There are three built-in types (string, date and numeric) but this can readily be expanded using the functions below. This can make installed a sorting plug-in much easier since you need not specify the <a href="/usage/columns#sType">sType</a> for the column - it will be picked up automatically.</p>
<ul>
<li><a href="#how_to">How to use DataTables plug-in type detection functions</a></li>
<li><a href="#functions">Plug-in type detection functions</a></li>
</ul>
<a name="how_to"></a>
<h3>How to use DataTables plug-in type detection functions</h3>
<p>To use of one of the plug-in type detections functions below, you simply need to include it and its counterpart sorting function, in the Javascript available for your page, after you load the DataTables library, but before you initialise the DataTable. Then all you need to do is initialise the DataTable and the type will be automatically detected. As an example the code below makes use of the <a href="#numeric_comma">numeric comma</a> type detection and sorting functions, saved into two different files for clarity (<a href="/examples/plug-ins/sorting_plugin.html">live example</a>):</p>
<pre class="brush: html">&lt;script type="text/javascript" src="jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.numericCommaSort.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dataTables.numericCommaTypeDetect.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example').dataTable();
} );
&lt;/script&gt;
</pre>
<a name="functions"></a>
<h3>Plug-in type detection functions</h3>
<!-- TYPE_DETECTION -->
Write Preview
Loading…
Cancel
Save