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 API functions 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.
+ + + + + +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 fnGetHiddenNodes saved into a file (live example):
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript" src="dataTables.fnGetHiddenNodes.js"></script>
+<script type="text/javascript">
+ $(document).ready(function() {
+ var oTable = $('#example').dataTable();
+
+ $('#button').click( function () {
+ var nHidden = oTable.fnGetHiddenNodes();
+ alert( nHidden.length +' nodes were returned' );
+ } );
+ } );
+</script>
+
+
+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.
+ + +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).
+ +DataTables supports two different kinds of plug-in filtering methods:
+ +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 sType.
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript" src="dataTables.htmlColumnFilter.js"></script>
+<script type="text/javascript">
+ $(document).ready(function() {
+ var oTable = $('#example').dataTable({
+ "aoColumns": [
+ "sType": "html",
+ null
+ ]
+ });
+ } );
+</script>
+
+
+
+
+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 filters development page).
+ +In the following example the range filtering (numbers) 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 (live example):
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript" src="dataTables.rangeFilter.js"></script>
+<script type="text/javascript">
+ $(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(); } );
+ } );
+</script>
+
+
+
+
+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 let me know and I'll happily include the translation here.
+ + + + + +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 oLanguage property. The following example shows how to include the German translation as an Ajax file (live example - a live example for oLanguage control is also available):
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript">
+ $(document).ready(function() {
+ $('#example').dataTable( {
+ "oLanguage": {
+ "sUrl": "dataTables.german.txt"
+ }
+ } );
+ } );
+</script>
+
+
+
+
+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.
+ + + + + +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 scrolling pagination plug-in saved into a file (live example):
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript" src="dataTables.scrollingPagination.js"></script>
+<script type="text/javascript">
+ $(document).ready(function() {
+ $('#example').dataTable( {
+ "sPaginationType": "scrolling"
+ } );
+ } );
+</script>
+
+
+
+
+DataTables provides two APIs for sorting information in a table: type based sorting and custom data source sorting. They can be used together or independently, and are fully described on the sorting development page. 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.
+ +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 sType 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 numeric comma sorting plug-in (saved to a file) can be used with a DataTable, sorting on the fourth column (live example):
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript" src="dataTables.numericComma.js"></script>
+<script type="text/javascript">
+ $(document).ready(function() {
+ $('#example').dataTable( {
+ "aoColumns": [
+ null,
+ null,
+ null,
+ { "sType": "numeric-comma" },
+ null
+ ]
+ } );
+ } );
+</script>
+
+
+
+
+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.
+ +It is also worth noting that sorting function go hand-in-hand with type detection functions, and many of the function pairs below has a corresponding type detection function to make installation very easy.
+ + + + + + +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.
+ +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 sSortDataType parameter for the column, to tell it which plug-in function to use.
+ +The example below shows the use of multiple custom data source plug-ins, and also it's use in-combination with sType (live example):
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript" src="dataTables.dataSourcePlugins.js"></script>
+<script type="text/javascript">
+ $(document).ready(function() {
+ $('#example').dataTable( {
+ "aoColumns": [
+ null,
+ null,
+ { "sSortDataType": "dom-text" },
+ { "sSortDataType": "dom-text", "sType": "numeric" },
+ { "sSortDataType": "dom-select" },
+ { "sSortDataType": "dom-checkbox" }
+ ]
+ } );
+ } );
+</script>
+
+
+
+
+
+The custom data source functions are used to update the cached data in DataTables, so sorting can occur on columns with user input information.
+ + + + diff --git a/type-detection/index.html b/type-detection/index.html new file mode 100644 index 0000000..9129164 --- /dev/null +++ b/type-detection/index.html @@ -0,0 +1,30 @@ + +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 sType for the column - it will be picked up automatically.
+ + + + +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 numeric comma type detection and sorting functions, saved into two different files for clarity (live example):
+ +<script type="text/javascript" src="jquery.dataTables.js"></script>
+<script type="text/javascript" src="dataTables.numericCommaSort.js"></script>
+<script type="text/javascript" src="dataTables.numericCommaTypeDetect.js"></script>
+<script type="text/javascript">
+ $(document).ready(function() {
+ $('#example').dataTable();
+ } );
+</script>
+
+
+
+
+