rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-02-19 17:54:14 +01:00
Code Issues Releases Activity

Update: Improved responsivness for examples CSS

Browse Source
This commit is contained in:
Allan Jardine 2014-03-14 12:32:46 +00:00
parent 3e33795877
commit e948a3682a
94 changed files with 112 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
fa83229b3cd91482f9cefa5a6fffd6dddc3b5f55
c3899371c805bd9eb4736ef080554facc6604083

2
examples/advanced_init/column_render.html
View File

@ -43,7 +43,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Column rendering</span></h1>
<h1>DataTables example <span>Column rendering</span></h1>
<div class="info">
<p>Each column has an optional rendering control called <a href=

2
examples/advanced_init/complex_header.html
View File

@ -35,7 +35,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Complex headers (rowspan / colspan)</span></h1>
<h1>DataTables example <span>Complex headers (rowspan / colspan)</span></h1>
<div class="info">
<p>Complex headers (using colspan / rowspan) can be used to group columns of similar information in

2
examples/advanced_init/defaults.html
View File

@ -36,7 +36,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Setting defaults</span></h1>
<h1>DataTables example <span>Setting defaults</span></h1>
<div class="info">
<p>When working with DataTables over multiple pages it is often useful to set the initialisation

2
examples/advanced_init/dom_multiple_elements.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Multiple table control elements</span></h1>
<h1>DataTables example <span>Multiple table control elements</span></h1>
<div class="info">
<p>As is described by the basic DOM positioning example you can use the <a href=

2
examples/advanced_init/dom_toolbar.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom toolbar elements</span></h1>
<h1>DataTables example <span>Custom toolbar elements</span></h1>
<div class="info">
<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make

2
examples/advanced_init/dt_events.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- DataTables events</span></h1>
<h1>DataTables example <span>DataTables events</span></h1>
<div class="info">
<p>DataTables fires a number of custom events which you can bind to in the standard jQuery fashion

2
examples/advanced_init/events_live.html
View File

@ -35,7 +35,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- DOM / jQuery events</span></h1>
<h1>DataTables example <span>DOM / jQuery events</span></h1>
<div class="info">
<p>Events assigned to the table can be exceptionally useful for user interaction, however you must be

2
examples/advanced_init/footer_callback.html
View File

@ -64,7 +64,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Footer callback</span></h1>
<h1>DataTables example <span>Footer callback</span></h1>
<div class="info">
<p>Through the use of the header and footer callback manipulation functions provided by DataTables

2
examples/advanced_init/html5-data-attributes.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- HTML5 data-* attributes</span></h1>
<h1>DataTables example <span>HTML5 data-* attributes</span></h1>
<div class="info">
<p>DataTables can use different data for different actions (display, ordering and searching) which can

2
examples/advanced_init/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Advanced initialisation</span></h1>
<h1>DataTables example <span>Advanced initialisation</span></h1>
<div class="info">
<p>The configuration options offered by DataTables extend much further than the options shown in the

2
examples/advanced_init/language_file.html
View File

@ -34,7 +34,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Language file</span></h1>
<h1>DataTables example <span>Language file</span></h1>
<div class="info">
<p>As well as being able to pass language information to DataTables through the <a href=

2
examples/advanced_init/length_menu.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Page length options</span></h1>
<h1>DataTables example <span>Page length options</span></h1>
<div class="info">
<p>It is possible to easily customise the options shown in the length menu (by default at the top left

2
examples/advanced_init/row_callback.html
View File

@ -41,7 +41,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row created callback</span></h1>
<h1>DataTables example <span>Row created callback</span></h1>
<div class="info">
<p>The following example shows how a callback function can be used to format a particular row at draw

2
examples/advanced_init/row_grouping.html
View File

@ -67,7 +67,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row grouping</span></h1>
<h1>DataTables example <span>Row grouping</span></h1>
<div class="info">
<p>Although DataTables doesn't have row grouping built-in (picking one of the many methods available

2
examples/advanced_init/sort_direction_control.html
View File

@ -39,7 +39,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Order direction sequence control</span></h1>
<h1>DataTables example <span>Order direction sequence control</span></h1>
<div class="info">
<p>At times you may wish to change the default ordering direction sequence for columns (some or all of

2
examples/ajax/custom_data_flat.html
View File

@ -41,7 +41,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Flat array data source</span></h1>
<h1>DataTables example <span>Flat array data source</span></h1>
<div class="info">
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the

2
examples/ajax/custom_data_property.html
View File

@ -33,7 +33,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom data source property</span></h1>
<h1>DataTables example <span>Custom data source property</span></h1>
<div class="info">
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the

2
examples/ajax/deep.html
View File

@ -39,7 +39,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Nested object data (objects)</span></h1>
<h1>DataTables example <span>Nested object data (objects)</span></h1>
<div class="info">
<p>DataTables has the ability to use data from almost data JSON data source through the use of the

2
examples/ajax/defer_render.html
View File

@ -31,7 +31,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Deferred rendering for speed</span></h1>
<h1>DataTables example <span>Deferred rendering for speed</span></h1>
<div class="info">
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs.

2
examples/ajax/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax sourced data</span></h1>
<h1>DataTables example <span>Ajax sourced data</span></h1>
<div class="info">
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging

2
examples/ajax/null_data_source.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Generated content for a column</span></h1>
<h1>DataTables example <span>Generated content for a column</span></h1>
<div class="info">
<p>In some tables you might wish to have some content generated automatically. This can be done in a

2
examples/ajax/objects.html
View File

@ -38,7 +38,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax data source (objects)</span></h1>
<h1>DataTables example <span>Ajax data source (objects)</span></h1>
<div class="info">
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for

2
examples/ajax/objects_subarrays.html
View File

@ -38,7 +38,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Nested object data (arrays)</span></h1>
<h1>DataTables example <span>Nested object data (arrays)</span></h1>
<div class="info">
<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by

2
examples/ajax/orthogonal-data.html
View File

@ -41,7 +41,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Orthogonal data</span></h1>
<h1>DataTables example <span>Orthogonal data</span></h1>
<div class="info">
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for

2
examples/ajax/simple.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax data source (arrays)</span></h1>
<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
<div class="info">
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by

2
examples/api/add_row.html
View File

@ -46,7 +46,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Add rows</span></h1>
<h1>DataTables example <span>Add rows</span></h1>
<div class="info">
<p>New rows can be added to a DataTable very easily using the <a href=

2
examples/api/api_in_init.html
View File

@ -37,7 +37,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Using API in callbacks</span></h1>
<h1>DataTables example <span>Using API in callbacks</span></h1>
<div class="info">
<p>There are times when you may wish to call API functions inside the DataTables callback functions

2
examples/api/counter_columns.html
View File

@ -43,7 +43,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Index column</span></h1>
<h1>DataTables example <span>Index column</span></h1>
<div class="info">
<p>A fairly common requirement for highly interactive tables which are displayed on the web is to have

2
examples/api/form.html
View File

@ -39,7 +39,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Form inputs</span></h1>
<h1>DataTables example <span>Form inputs</span></h1>
<div class="info">
<p>In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the

2
examples/api/highlight.html
View File

@ -50,7 +50,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Highlighting rows and columns</span></h1>
<h1>DataTables example <span>Highlighting rows and columns</span></h1>
<div class="info">
<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor

2
examples/api/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- API</span></h1>
<h1>DataTables example <span>API</span></h1>
<div class="info">
<p>The real power of DataTables can be exploited through the use of the API that it presents. The

2
examples/api/multi_filter.html
View File

@ -45,7 +45,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Individual column filtering (text inputs)</span></h1>
<h1>DataTables example <span>Individual column filtering (text inputs)</span></h1>
<div class="info">
<p>The filtering functionality that is provided by DataTables is very useful for quickly search through

2
examples/api/multi_filter_select.html
View File

@ -44,7 +44,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Individual column filtering (select inputs)</span></h1>
<h1>DataTables example <span>Individual column filtering (select inputs)</span></h1>
<div class="info">
<p>This example is almost identical to text based individual column example and provides the same

2
examples/api/regex.html
View File

@ -54,7 +54,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Filtering API (regular expressions)</span></h1>
<h1>DataTables example <span>Filtering API (regular expressions)</span></h1>
<div class="info">
<p>Filtering a table is one of the most common user interactions with a DataTables table, and

2
examples/api/row_details.html
View File

@ -89,7 +89,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Child rows (show extra / detailed information)</span></h1>
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
<div class="info">
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em>

2
examples/api/select_row.html
View File

@ -38,7 +38,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row selection (multiple rows)</span></h1>
<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
<div class="info">
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable.

2
examples/api/select_single_row.html
View File

@ -44,7 +44,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row selection and deletion (single row)</span></h1>
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
<div class="info">
<p>This example shows a modification of the multiple row selection example, where just a single can now

2
examples/api/show_hide.html
View File

@ -43,7 +43,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Show / hide columns dynamically</span></h1>
<h1>DataTables example <span>Show / hide columns dynamically</span></h1>
<div class="info">
<p>This example shows how you can make use of the <a href=

2
examples/api/tabs_and_scrolling.html
View File

@ -44,7 +44,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scrolling and jQuery UI tabs</span></h1>
<h1>DataTables example <span>Scrolling and jQuery UI tabs</span></h1>
<div class="info">
<p>This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed

2
examples/basic_init/alt_pagination.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Alternative pagination</span></h1>
<h1>DataTables example <span>Alternative pagination</span></h1>
<div class="info">
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page

2
examples/basic_init/comma-decimal.html
View File

@ -33,7 +33,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Language - Comma decimal place</span></h1>
<h1>DataTables example <span>Language - Comma decimal place</span></h1>
<div class="info">
<p>A dot (<code>.</code>) is used to mark the decimal place in Javascript, however, <a href=

2
examples/basic_init/complex_header.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Complex headers (rowspan and colspan)</span></h1>
<h1>DataTables example <span>Complex headers (rowspan and colspan)</span></h1>
<div class="info">
<p>When using tables to display data, you will often wish to display column information in groups.

2
examples/basic_init/dom.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- DOM positioning</span></h1>
<h1>DataTables example <span>DOM positioning</span></h1>
<div class="info">
<p>When customising DataTables for your own usage, you might find that the default position of the

2
examples/basic_init/filter_only.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Feature enable / disable</span></h1>
<h1>DataTables example <span>Feature enable / disable</span></h1>
<div class="info">
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a

2
examples/basic_init/flexible_width.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Flexible table width</span></h1>
<h1>DataTables example <span>Flexible table width</span></h1>
<div class="info">
<p>Often you may want to have your table resize dynamically with the page. Typically this is done by

2
examples/basic_init/hidden_columns.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Hidden columns</span></h1>
<h1>DataTables example <span>Hidden columns</span></h1>
<div class="info">
<p>There are times when you might find it useful to display only a sub-set of the information that was

2
examples/basic_init/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Basic initialisation</span></h1>
<h1>DataTables example <span>Basic initialisation</span></h1>
<div class="info">
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The

2
examples/basic_init/language.html
View File

@ -36,7 +36,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Language options</span></h1>
<h1>DataTables example <span>Language options</span></h1>
<div class="info">
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href=

2
examples/basic_init/multi_col_sort.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Multi-column ordering</span></h1>
<h1>DataTables example <span>Multi-column ordering</span></h1>
<div class="info">
<p>DataTables allows ordering by multiple columns at the same time, which can be activated in a number

2
examples/basic_init/multiple_tables.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Multiple tables</span></h1>
<h1>DataTables example <span>Multiple tables</span></h1>
<div class="info">
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done

2
examples/basic_init/scroll_x.html
View File

@ -36,7 +36,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - horizontal</span></h1>
<h1>DataTables example <span>Scroll - horizontal</span></h1>
<div class="info">
<p>DataTables has the ability to show tables with horizontal scrolling, which is very useful for when

2
examples/basic_init/scroll_xy.html
View File

@ -37,7 +37,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - horizontal and vertical</span></h1>
<h1>DataTables example <span>Scroll - horizontal and vertical</span></h1>
<div class="info">
<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same

2
examples/basic_init/scroll_y.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - vertical</span></h1>
<h1>DataTables example <span>Scroll - vertical</span></h1>
<div class="info">
<p>This example shows the DataTables table body scrolling in the vertical direction. This can generally

2
examples/basic_init/scroll_y_theme.html
View File

@ -34,7 +34,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - vertical with jQuery UI ThemeRoller</span></h1>
<h1>DataTables example <span>Scroll - vertical with jQuery UI ThemeRoller</span></h1>
<div class="info">
<p>This example is an extension of the vertical scrolling example, showing DataTables ability to be

2
examples/basic_init/state_save.html
View File

@ -28,7 +28,7 @@ $('#example').dataTable( {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- State saving</span></h1>
<h1>DataTables example <span>State saving</span></h1>
<div class="info">
<p>DataTables has the option of being able to save the state of a table (its paging position, ordering

2
examples/basic_init/table_sorting.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Default ordering (sorting)</span></h1>
<h1>DataTables example <span>Default ordering (sorting)</span></h1>
<div class="info">
<p>With DataTables you can alter the ordering characteristics of the table at initialisation time.

2
examples/basic_init/zero_configuration.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Zero configuration</span></h1>
<h1>DataTables example <span>Zero configuration</span></h1>
<div class="info">
<p>DataTables has most features enabled by default, so all you need to do to use it with your own

2
examples/data_sources/ajax.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax sourced data</span></h1>
<h1>DataTables example <span>Ajax sourced data</span></h1>
<div class="info">
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by

2
examples/data_sources/dom.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- HTML (DOM) sourced data</span></h1>
<h1>DataTables example <span>HTML (DOM) sourced data</span></h1>
<div class="info">
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table

2
examples/data_sources/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Data sources</span></h1>
<h1>DataTables example <span>Data sources</span></h1>
<div class="info">
<p>DataTables can obtain data from four different fundamental sources:</p>

2
examples/data_sources/js_array.html
View File

@ -101,7 +101,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Javascript sourced data</span></h1>
<h1>DataTables example <span>Javascript sourced data</span></h1>
<div class="info">
<p>At times you will wish to be able to create a table from dynamic information passed directly to

2
examples/data_sources/server_side.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Server-side processing</span></h1>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large

2
examples/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Examples index</span></h1>
<h1>DataTables example <span>Examples index</span></h1>
<div class="info">
<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands

2
examples/plug-ins/api.html
View File

@ -51,7 +51,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- API plug-in methods</span></h1>
<h1>DataTables example <span>API plug-in methods</span></h1>
<div class="info">
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add

2
examples/plug-ins/dom_sort.html
View File

@ -62,7 +62,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Live DOM ordering</span></h1>
<h1>DataTables example <span>Live DOM ordering</span></h1>
<div class="info">
<p>This example shows how you can use information available in the DOM to order columns. Typically

2
examples/plug-ins/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Plug-ins</span></h1>
<h1>DataTables example <span>Plug-ins</span></h1>
<div class="info">
<p>While DataTables has a wide range of options and data type support built in, it can never cater for

2
examples/plug-ins/range_filtering.html
View File

@ -53,7 +53,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom filtering - range search</span></h1>
<h1>DataTables example <span>Custom filtering - range search</span></h1>
<div class="info">
<p>There may be occasions when you wish to search data presented to the end user in your own manner,

2
examples/plug-ins/sorting_auto.html
View File

@ -41,7 +41,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ordering plug-ins (with type detection)</span></h1>
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
<div class="info">
<p>Although DataTables will automatically order data from a number of different data types using the

2
examples/plug-ins/sorting_manual.html
View File

@ -39,7 +39,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ordering plug-ins (no type detection)</span></h1>
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
<div class="info">
<p>Although DataTables will order a number of data types using the built in methods, When dealing with

19
examples/resources/demo.css
View File

@ -30,10 +30,12 @@ h1 {
font-weight: 100;
letter-spacing: 1px;
font-size: 3em;
line-height: 1em;
}
h1 span {
font-size: 0.5em;
line-height: 1em;
}
a {
@ -184,6 +186,13 @@ code {
border-radius: 3px;
}
code > span {
border-left: 1px solid rgba( 0, 0, 0, 0.2 );
margin-left: 4px;
padding-left: 4px;
opacity: 0.5;
}
code.option {
color: #D14; /* red */
background-color: #fcf6f8;
@ -225,6 +234,12 @@ code.string {
border: 1px solid #f7e4c9;
}
code.field {
color: #ad1ee8; /* purple */
background-color: #f9f1fc;
border: 1px solid #ebc9f7;
}
code.multiline {
display: inline-block;
width: 95%;
@ -314,5 +329,9 @@ div.column_half {
-o-column-count: 1;
column-count: 1;
}
h1 span {
display: block;
}
}

2
examples/resources/syntax/shCore.css
View File

@ -136,7 +136,7 @@
right: 1px !important;
top: 1px !important;
font-size: 10px !important;
z-index: 10 !important;
z-index: 7 !important;
}
.syntaxhighlighter .toolbar span.title {
display: inline !important;

2
examples/server_side/custom_vars.html
View File

@ -39,7 +39,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom HTTP variables</span></h1>
<h1>DataTables example <span>Custom HTTP variables</span></h1>
<div class="info">
<p>It can often be useful to send extra information to the server when utilising DataTables'

2
examples/server_side/defer_loading.html
View File

@ -33,7 +33,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Deferred loading of data</span></h1>
<h1>DataTables example <span>Deferred loading of data</span></h1>
<div class="info">
<p>When using DataTables with server-side processing, the default behaviour is to have DataTables

2
examples/server_side/ids.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Automatic addition of row ID attributes</span></h1>
<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
<div class="info">
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on

2
examples/server_side/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Server-side processing</span></h1>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large

2
examples/server_side/jsonp.html
View File

@ -35,7 +35,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- JSONP data source for remote domains</span></h1>
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
<div class="info">
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of

2
examples/server_side/object_data.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Object data source</span></h1>
<h1>DataTables example <span>Object data source</span></h1>
<div class="info">
<p>The default data format that DataTables expects for server-side processing is a 2D array of data

2
examples/server_side/pipeline.html
View File

@ -154,7 +154,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Pipelining data to reduce Ajax calls for paging</span></h1>
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
<div class="info">
<p>Sever-side processing can be quite hard on your server, since it makes an Ajax call to the server

2
examples/server_side/post.html
View File

@ -44,7 +44,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- POST data</span></h1>
<h1>DataTables example <span>POST data</span></h1>
<div class="info">
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP

2
examples/server_side/row_details.html
View File

@ -93,7 +93,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row details</span></h1>
<h1>DataTables example <span>Row details</span></h1>
<div class="info">
<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to

2
examples/server_side/select_rows.html
View File

@ -54,7 +54,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row selection</span></h1>
<h1>DataTables example <span>Row selection</span></h1>
<div class="info">
<p>When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM

2
examples/server_side/simple.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Server-side processing</span></h1>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large

2
examples/styling/bootstrap.html
View File

@ -34,7 +34,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Bootstrap</span></h1>
<h1>DataTables example <span>Bootstrap</span></h1>
<div class="info">
<p>DataTables can integrate seamlessly with <a href="http://getbootstrap.com/">Bootstrap</a> using

2
examples/styling/cell-border.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style - cell borders</span></h1>
<h1>DataTables example <span>Base style - cell borders</span></h1>
<div class="info">
<p>This example shows DataTables with just the <code>cell-border</code> class specified, giving a

2
examples/styling/display.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style</span></h1>
<h1>DataTables example <span>Base style</span></h1>
<div class="info">
<p>The DataTables default style file has a number of features which can be enabled based on the class

2
examples/styling/foundation.html
View File

@ -33,7 +33,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Foundation</span></h1>
<h1>DataTables example <span>Foundation</span></h1>
<div class="info">
<p>DataTables can integrate seamlessly with <a href="http://foundation.zurb.com/">Foundation</a> using

2
examples/styling/hover.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style - hover</span></h1>
<h1>DataTables example <span>Base style - hover</span></h1>
<div class="info">
<p>This example shows DataTables with just the <code>hover</code> class specified. This class will

2
examples/styling/index.html
View File

@ -16,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Styling</span></h1>
<h1>DataTables example <span>Styling</span></h1>
<div class="info">
<p>When using DataTables, you want your tables to fit in with your site / app to make the end user

2
examples/styling/jqueryUI.html
View File

@ -32,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- jQuery UI ThemeRoller</span></h1>
<h1>DataTables example <span>jQuery UI ThemeRoller</span></h1>
<div class="info">
<p>DataTables has the ability to integrate seamlessly with almost any styling library, and integration

2
examples/styling/no-classes.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style - no styling classes</span></h1>
<h1>DataTables example <span>Base style - no styling classes</span></h1>
<div class="info">
<p>This example shows the base DataTables style file being used, with none of the additional feature

2
examples/styling/order-column.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style - order-column</span></h1>
<h1>DataTables example <span>Base style - order-column</span></h1>
<div class="info">
<p>This example shows DataTables with just the <code>order-column</code> class specified. Typically you

2
examples/styling/row-border.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style - row borders</span></h1>
<h1>DataTables example <span>Base style - row borders</span></h1>
<div class="info">
<p>This example shows DataTables with just the <code>row-border</code> class specified, which can

2
examples/styling/stripe.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style - stripe</span></h1>
<h1>DataTables example <span>Base style - stripe</span></h1>
<div class="info">
<p>This example shows DataTables with just the <code>stripe</code> class specified.</p>