rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-03-21 13:29:04 +01:00
Code Issues Releases Activity

Dev: First commit of xml for examples build script

Browse Source
This commit is contained in:
Allan Jardine 2013-03-11 16:32:28 +00:00
parent b87187fc5b
commit f0694a8fbb
19 changed files with 455 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
examples_src/basic_init/alt_pagination.xml Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Alternative pagination</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"paginationType": "full_numbers"
} );
} );
]]></js>
<info>
<p>The page controls which are used by default in DataTables (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customise the controls presented to the end user. This is made simple by DataTables through its extensible pagination mechanism. There are two types of pagination controls built into DataTables: <value>two_button</value> (default) and <value>full_numbers</value>. To switch between these two types, use the <init>paginationType</init> initialisation parameter. You can add additional types of pagination control by extending the <code>$.fn.dataTableExt.oPagination</code> object.</p>
<p>The example below shows the <value>full_numbers</value> type of pagination, where 'first', 'previous', 'next' and 'last' buttons are presented, as well as the five pages around the current page.</p>
</info>
</dt-example>

19
examples_src/basic_init/complex_header.xml Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-complex-header">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Complex headers (row and colspans)</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable();
} );
]]></js>
<info>
When using tables to display data, you will often wish to display column information in groups. DataTables fully supports <code>colspan</code> and <code>rowspans</code> in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added. The example shown below has the core browser information grouped together.
</info>
</dt-example>

33
examples_src/basic_init/dom.xml Normal file
View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>DOM positioning</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
} );
} );
]]></js>
<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 <init>dom</init> initialisation parameter which can be set to indicate where you which particular features to appear in the DOM. You can also specify <code>div</code> wrapping containers (with classes) to provide complete layout flexibility. The syntax available is:</p>
<ul>
<li><b>l</b> - Length changing</li>
<li><b>f</b> - Filtering input</li>
<li><b>t</b> - The table!</li>
<li><b>i</b> - Information</li>
<li><b>p</b> - Pagination</li>
<li><b>r</b> - pRocessing</li>
<li><b>&lt;</b> and <b>&gt;</b> - div elements</li>
<li><b>&lt;"class"</b> and <b>&gt;</b> - div with a class</li>
<li>Examples: <b>&lt;"wrapper"flipt&gt;</b>, <b>&lt;lf&lt;t&gt;ip&gt;</b></li>
</ul>
<p>In the example below I've moved the table information to the top of the table, and all the interaction elements to the bottom, each wrapper in a container <code>div</code>.</p>
</info>
</dt-example>

26
examples_src/basic_init/filter_only.xml Normal file
View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Feature enable / disable</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"filter": true,
"paginate": false,
"lengthChange": false,
"sort": false,
"info": false,
"autoWidth": false
} );
} );
]]></js>
<info>
Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. In the following example only the filter feature is left enabled (although I've explicitly declared it as enabled).
</info>
</dt-example>

21
examples_src/basic_init/flexible_width.xml Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Flexible table width</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable();
} );
]]></js>
<info>
<p>Often you may want to have your table resize dynamically with the page. Typically this is done by assigning <code>width:100%</code> in your CSS, but this presents a problem for Javascript since it can be very hard to get that relative size, rather than the absolute pixels. As such, if you apply the <code>width</code> attribute to the HTML table tag, this will be used as the width for the table (overruling any CSS styles).</p>
<p>This example shows a table width <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize dynamically.</p>
</info>
</dt-example>

24
examples_src/basic_init/hidden_columns.xml Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Hidden columns</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{ "targets": [ 2 ], "visible": false, "searchable": false },
{ "targets": [ 3 ], "visible": false }
]
} );
} );
]]></js>
<info>
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 hidden data can still be filtered upon allowing the user access to that data (for example 'tag' information for a row entry), or this can be disabled. In the table below both the platform and engine version columns have been hidden, the former is searchable, the latter is not.
</info>
</dt-example>

19
examples_src/basic_init/index.xml Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Zero configuration</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable();
} );
]]></js>
<info>
DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).
</info>
</dt-example>

27
examples_src/basic_init/language.xml Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Language options</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"language": {
"lengthMenu": "Display _MENU_ records per page",
"zeroRecords": "Nothing found - sorry",
"info": "Showing _START_ to _END_ of _TOTAL_ records",
"infoEmpty": "Showing 0 to 0 of 0 records",
"infoFiltered": "(filtered from _MAX_ total records)"
}
} );
} );
]]></js>
<info>
Changing the language information displayed by DataTables is as simple as passing in a language object to the dataTable constructor. The example above shows a different set of English language definitions to be used, rather than the defaults.
</info>
</dt-example>

43
examples_src/basic_init/multi_col_sort.xml Normal file
View File

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Multi-column and custom sort</title>
<js><![CDATA[
/* Define custom sorting plug-in */
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"string-case-pre": function ( a ) {
return a;
},
"string-case-asc": function( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"string-case-desc": function(a,b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
$(document).ready(function() {
/* Build the DataTable with third column using our custom sort function */
$('#example').dataTable( {
"sorting": [ [0,'asc'], [1,'asc'] ],
"columnDefs": [ {
"targets": [ 2 ],
"type": 'string-case'
} ]
} );
} );
]]></js>
<info>
<p>As you would expect with a desktop application, DataTables allows you to sort by multiple columns at the same time. This multiple sorting mechanism is always active if the <init>sort</init> initialiser is <code>true</code> (it is by default) and the end user can activate it by 'shift' clicking on the column they want to add to the sort. You can also pass in an array of information using the <init>sorting</init> initialiser, as I have done in the example below there the first column is sorted as the primary column and the second one then used if the elements in the first column match. As many columns as you wish can be added to the sort.</p>
<p>DataTables also provides a method to add your own sorting functions, to extend those built into DataTables. This can be very useful if you wish to sort on data formats such as currency and non-Javascript standard date formats (<a href="http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm/">this natural sort</a> algorithm is a popular option). This is achieved by extending the <code>jQuery.fn.dataTableExt</code> object with ascending and descending sort functions. In the example below I've added case sensitive sorting functions.</p>
</info>
</dt-example>

19
examples_src/basic_init/multiple_tables.xml Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-multi">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Multiple tables</title>
<js><![CDATA[
$(document).ready(function() {
$('.dataTable').dataTable();
} );
]]></js>
<info>
Using standard jQuery selector syntax with DataTables it is trivial to initialise multiple tables with a single line of Javascript, as shown below. All tables are completely independent, but share the parameters passed thought the initialiser object (for example if you specific the Spanish language file, all tables will be shown in Spanish).
</info>
</dt-example>

24
examples_src/basic_init/scroll_x.xml Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title></title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": "100%",
"scrollXInner": "110%",
"scrollCollapse": true
} );
} );
]]></js>
<info>
<p>This DataTables horizontal scrolling example shows horizontal scrolling on a DataTable, which is very useful for when you have a wide table, with a large number of columns to display, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set the <init>scrollX</init> parameter to be whatever you want the container wrapper's width to be (any CSS measurement is acceptable, or just a number which is treated as pixels). Note also that sScrollXInner is used here to force the table to be wider than is strictly needed. You may or may not want to include this parameter depending on your application.</p>
<p>Also shown in this example is the use of a 'collapsing scroll table' by using <init>scrollCollapse</init>. When this parameter is set to true, the table size will 'collapse' down to match the number of rows, if the table height is smaller than the scrollable area.</p>
</info>
</dt-example>

23
examples_src/basic_init/scroll_xy.xml Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Horizontal and vertical scrolling</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"scrollX": "100%",
"scrollXInner": "110%"
} );
} );
]]></js>
<info>
In this example you can see DataTables doing horizontal and vertical scrolling at the same time. Note also that pagination is enabled, and the scrolling accounts for this.
</info>
</dt-example>

23
examples_src/basic_init/scroll_y.xml Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title></title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"paginate": false,
"scrollCollapse": true
} );
} );
]]></js>
<info>
This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!). The example is set up to show grid lines using CSS, which is useful for alignment, both for testing and end user usability. To enable y scrolling simply set the <init>scrollY</init> parameter to be whatever you want the container wrapper's height to be (any CSS measurement is acceptable, or just a number which is treated as pixels).
</info>
</dt-example>

25
examples_src/basic_init/scroll_y_infinite.xml Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Infinite vertical scrolling</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollInfinite": true,
"scrollCollapse": true,
"scrollY": "200px"
} );
} );
]]></js>
<info>
<p>This example shows the DataTables table body scrolling in the vertical direction with infinite scrolling. The idea of infinite scrolling means that data will be added to the table dynamically, as and when needed by the user scrolling the table. A sub-set of the data is loaded initially, and more added as needed (technically of course, it is not "infinite" since it will stop loading data at the end of the data set!). Note that pagination much be enabled for infinite scrolling to work, but the pagination controls will not be shown (they could be, but can cause very confusing user interaction).</p>
<p>DataTables' infinite scroll can be used with any of the <a href="http://datatables.net/usage/#data_sources">four data sources</a> supported, and they do not require any modification to work (including server-side scripts).</p>
</info>
</dt-example>

24
examples_src/basic_init/scroll_y_theme.xml Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="jqueryui" />
<css lib="datatables-jqueryui" />
<js lib="jquery" />
<js lib="datatables" />
<title>Vertical scrolling with jQuery UI ThemeRoller</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"jQueryUI": true,
"paginationType": "full_numbers"
} );
} );
]]></js>
<info>
This example is an extension of the vertical scrolling example, showing DataTables ability to be themed by jQuery UI's ThemeRoller.
</info>
</dt-example>

19
examples_src/basic_init/state_save.xml Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>State saving</title>
<js><![CDATA[
$('#example').dataTable( {
"stateSave": true
} );
]]></js>
<info>
DataTables can use cookies in the end user's web-browser in order to store it's state after each change in drawing. What this means is that if the user were to reload the page, the table should remain exactly as it was (length, filtering, pagination and sorting). This feature is disabled by default, but can be easily enabled using the <init>stateSave</init> initialisation parameter as shown in this example. Note also that the duration of the cookie can be set using the <init>stateDuration</init> initialisation parameter (which is in seconds).
</info>
</dt-example>

21
examples_src/basic_init/table_sorting.xml Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Default sorting</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable( {
"sorting": [[ 4, "desc" ]]
} );
} );
]]></js>
<info>
With DataTables you can alter the sorting characteristics of the table at initialisation time. Using the <init>sorting</init> initialisation parameter, you can get the table exactly how you want to present the information. The <init>sorting</init> parameter is an array of arrays where the first value is the column to sort on, and the second is 'asc' or 'desc' as required (it is a double array for <a href="../basic_init/multi_col_sort.html">multi-column sorting</a>). The table below is sorted (descending) by the CSS grade. Note also that the 'Engine version' column is automatically detected as a numeric column and sorted accordingly.
</info>
</dt-example>

23
examples_src/basic_init/themes.xml Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="jqueryui" />
<css lib="datatables-jqueryui" />
<js lib="jquery" />
<js lib="datatables" />
<title>jQuery UI themes</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable({
"jQueryUI": true,
"paginationType": "full_numbers"
});
} );
]]></js>
<info>
Styling widgets such as DataTables can often take a considerable amount of time to fully integrate it into your site / application, with the demo styles as a base. This holds true for all widgets, and the jQuery UI team have addressed this issue by introducing themes through their excellent <a href="http://jqueryui.com/themeroller/">ThemeRoller</a>. DataTables has full support for ThemeRoller created themes, all you need to do is enable the <init>jQueryUI</init> flag in the initialisation object, and the required mark-up and classes will be added by DataTables.
</info>
</dt-example>

19
examples_src/basic_init/zero_config.xml Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">
<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />
<title>Zero configuration</title>
<js><![CDATA[
$(document).ready(function() {
$('#example').dataTable();
} );
]]></js>
<info>
DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).
</info>
</dt-example>