Permalink
Browse files

Dev: First commit of xml for examples build script

  • Loading branch information...
1 parent b87187f commit f0694a8fbb12148d88afc6d563319ceaf15ce635 @DataTables committed Mar 11, 2013
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
Oops, something went wrong.

0 comments on commit f0694a8

Please sign in to comment.