Compare commits

..

426 Commits

Author SHA1 Message Date
Allan Jardine
b1bca78111 DataTables 1.10.9 release 2015-09-01 09:51:29 +01:00
Allan Jardine
648726b19e Fix: When using a cell selector, if the element doesn't have a parent node (caused by it being hidden and a jQuery selector being used) an error would be thrown.
- The fix is to loop over the data array to find the cell. Slower, but
  for an edge case I think this is an approriate fix.
- This fixes DataTables/DataTables #653
2015-09-01 08:38:38 +01:00
Allan Jardine
119a355970 Fix: It was possible to select an item multiple times using redundant selectors.
- Example: table.rows( ['', '', '', ''] ) would have selected all rows 4
  times!
2015-09-01 08:38:09 +01:00
Allan Jardine
8a4dc8a9d7 Fix: Using Array.prototype.push.apply can fail on larger tables / queries due to limits on the number of arguments that can be passed to a function, imposed by the various Javascript engines.
- The fix is to replace with more approriate options. The jquery
 `$.merge` function in particular is useful and array concat when we
 don't need to maintain a refernce.
- This fixes DataTables/DataTables #651
2015-08-31 14:26:04 +01:00
Allan Jardine
e48efdf316 Fix: Setting non-array data when DataTables has been told to expect an array results in a Javascript error. Although this is somewhat unexpected input, it is reasonable to expect DataTables to handle null values here, even although an empty array is much prefered.
- THis fixes DataTables/DataTablesSrc #55
2015-08-31 14:25:09 +01:00
Allan Jardine
4f27154fe4 Fix: Clear cache of row ids when the table is cleared. This is particularly important when server-side processing since the rows should no longer exist on the client-side when paging between records. 2015-08-28 12:20:41 +01:00
Allan Jardine
726bfe5ebb Fix: Rows could still be selected by id after they had been removed from the table. This could result in a memory leak as well as rows being selectable when they shouldn't be. 2015-08-28 12:20:11 +01:00
Allan Jardine
3a43de4224 Fix: Column data setter function would be called twice for the first row in the table
- This was caused by using `_fnGetRowElements` to get the cells. While
  it was good for performance with large number or rows to do so, it
  isn't needed for a single row and a single line of jQuery is simpliler
  and doesn't trigger the set function
- Fixes DataTables/DataTables #638
2015-08-27 10:54:28 +01:00
Allan Jardine
4e611f31ff Fix - styling: Bootstrap and Foundation would apply padding to a header cell, making space for a sort icon, even when the column is not sortable.
- This fixes DataTables/DataTables #639
2015-08-26 14:35:18 +01:00
Allan Jardine
03dc5a31ac Fix: When using a DOM data source, the cell's data function, as a setter, would be called twice
- The issue was effectively duplicate code - for 1.9- compatiblity when
  I introduced 1.10 I had the set function run specifically if a DOM
  node was given. But later in the 1.10 series when it became possible
  to have the data written to an object rather than an array, that code
  would itself call the setter, thus leading to two calls when there is
  a DOM node present for the row.
- The first is simply to remove the code that was running the setter for
  the DOM specific case.
- This fixes DataTables/DataTables #638 and thread 25846. Thanks to
  @Jamaur and @strang91 for following up on this.
2015-08-25 15:10:06 +01:00
Allan Jardine
17d0ce4cce Fix: Columns could be set to 0 width in IE6/7 when there are hidden columns in the table
- This fix also comes out of DataTables/DataTables #633. Thanks again to
  @nddery and @epitaphmike.
2015-08-25 14:18:58 +01:00
Allan Jardine
7d3c5cc276 Fix: Browsers on Macs with zero width scrollbars would be incorrected treated the same way as IE6/7 causing column width calculations to be incorrect.
- The issue was caused by the check for the `bScrollOversize` option
  which looks for the container being the same width as its inner
  content area. Obviously that happens to be true if there is no
  scrollbar. Adding a check for the clientWidth not being 100 as well
  resolves this.
- I've also combined the scrollbar width detection with the other
  browser detect functions. The two functions were performing very
  similar operations and so easily combined
- The browser detect DOM creation will only run once, rather than for
  every table initialisation, optimising multi-table loading
- Fixes DataTables/DataTables #633 - Thanks to @nddery and @epitaphmike
  for the input
2015-08-25 14:18:30 +01:00
Allan Jardine
6352732eac Fix - example: Column filtering would reset the paging on change event, which could give the impression that pading didn't happen since it is immediately over written.
Thread 29670
2015-08-25 14:17:32 +01:00
Allan Jardine
e7e439dd0a Fix: Cell invalidation would fail due to incorrect logic
- If d or objectRead were truthful then the row's data object would be
  replaced with an empty object. This was one shortcut in code too many!

- Relates to thread 29530 with thanks to idleog.
2015-08-19 14:40:22 +01:00
Allan Jardine
9ef7f1ad20 Fix: Compatibility with jQuery 2's isPlainObject. API instances were returning as plain objects
- This appears to be caused by setting the prototype chain as an object
  directly. For example:

  var test = function () {};
  test.prototype = {};
  $.isPlainObject( new test() );

  will return `true` with jQuery 2.1.4 (and `false` for 1.11.3).

  If an item is added to the prototype object then it will return
  `false`, although for some reason that wasn't the case with
  DataTables' API prototype.

  More investigation required, but for full compatiblity with exisiting
  jQuery releases, the correct thing to do here is to build on the
  exisiting prototype, which we can do with `$.extend`.
2015-08-19 12:25:28 +01:00
Allan Jardine
a7a9ac1910 Dev: Fix case issue with file names for the example builder
- This is the problem with developing on a case insensitive file system
  which the Mac default is!
2015-08-19 12:24:58 +01:00
Allan Jardine
50cac9640a Dev: Nowrap in syntax highlighter 2015-08-19 09:56:33 +01:00
Allan Jardine
0482633dff Fix - CSS: Bootstrap and Foundation were missing the empty row class to align text to the center 2015-08-19 09:55:39 +01:00
Allan Jardine
3950e119e2 Fix - docs: Add note to dt-api draw() that the string options require 1.10.8 or newer 2015-08-19 09:54:48 +01:00
Allan Jardine
a6e75123eb Update rows().ids().xml
Spell mistake
2015-08-19 09:54:19 +01:00
Allan Jardine
7898f4e585 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2015-08-19 09:53:47 +01:00
Allan Jardine
52531db870 Update selector-modifier.xml
Just a small spell mistake
2015-08-19 09:52:44 +01:00
Allan Jardine
085d7f3137 Fix: Row invalidation would throw an error when reading from a DOM row
- Fixes DataTables/DataTables #623
2015-08-17 09:34:39 +01:00
Allan Jardine
44b1402fa6 DataTables 1.10.9 development starts 2015-08-17 09:34:10 +01:00
Allan Jardine
1c22b79471 Dev: Update make file to minified the integration files 2015-08-17 09:32:50 +01:00
Allan Jardine
953d1fc6ca Add minified integration files 2015-08-12 20:17:46 +01:00
Allan Jardine
3977c5de72 Sync with latest DataTablesSrc 2015-08-12 19:50:30 +01:00
Allan Jardine
f91373337b DataTables 1.10.8 release 2015-08-12 19:49:47 +01:00
Allan Jardine
60273a0a75 Dev: Update the new rowId option to be able to read the id from the DOM 2015-08-12 19:49:29 +01:00
Allan Jardine
13c3a5400e Dev: Don't just jQuery code if jQuery hasn't been loaded (example index pages) 2015-08-12 19:48:50 +01:00
Allan Jardine
7811a69f30 Update - examples: Improve descriptions of examples and refer to the new extensions where appropriate 2015-08-12 19:48:33 +01:00
Allan Jardine
588e78f92b Update - example: Use Bootstrap rather than jQuery UI for the scrolling and tabs example.
Bootstrap tabs seem to be more popular these days
2015-08-12 19:48:15 +01:00
Allan Jardine
9cc3be030f Fix: Calculation for horizontal scroll bar adjustment when the dt-init scrollCollapse parameter is set could be incorrect when the standard height exceeds the window height.
- This is an interesting one, and I suspect a bit of an edge case in the
  browsers - what is happening is that the window is going from having a
  scrollbar to not having a scrollbar when the scrolling viewport is
  collapsed. This causes the browser to show the scrollbars in the
  viewport for an instant, even although they aren't actually required.
  If the height of the viewport is 53px and you up it to 80 so there are
  no scrollbars and reduce it back to 53 the scrollbars are gone! The
  browser must be stopping a race condition once the scrollbars are
  shown.

- The fix is to use `max-height` for the scrolling container if the
  scroll collapse is set and `height` otherwise. The browser native
  methods makes the code _much_ easier to work with, more performant and
  easier to understand.
2015-08-10 17:47:34 +01:00
Allan Jardine
07c04c69f8 Dev fix: Commit f2df0716 removed a check for IE6/7 to disable the smart
column width for these tables. However, that was in error - it is in
fact required still as the smart width calculations cause the browser to
crash (APPCRASH). There is no indication as to why this is, not is it as
simple as just disabling one or two pieces of code to stop the crash.
This leads me to suspect that it is the number of operations being
performed - particularly to do with the cloning of the elements. If this
is the case, then its just never going to work. Also IE6/7 are such a
small market now (thank goodness) this is just a feature that won't be
available in those browsers.

If anyone is interested in working on fixing it, or paying me to do so,
I'm happy to hear from you :-)
2015-08-10 17:47:12 +01:00
Allan Jardine
e111fae862 Dev: Update example templates to refer to extensions rather than extras 2015-08-10 14:59:41 +01:00
Allan Jardine
d0e9e78db4 Fix: Horizontal scrolling could incorrectly be triggered in Firefox when there is lots of room available and scrolling is not required. This was due to sub-pixel rendering of the columns, but the widths being rounded up to integer values. Using getBoundingClientRect addresses this. IE8- have to continue using the old method.
Fix: The auto width calculation table, when scrolling is enabled, being inserted into the scrolling container could cause the viewport to scroll, even when the main table doesn't actually need scrolling. This causes the column width calculations to be incorrect by the scrollbar's width. The fix is to have the calculation table `position:absolute` in the scrolling container and height:1px so it has no effect on the vewport's scrolling.

- These two fixes address DataTables/DataTables #612. Kudos to @Delgan
  for reporting these issues and supplying test cases - thanks!
2015-08-10 14:59:04 +01:00
Allan Jardine
bb33384e62 Update - styling: Altering the paging buttons to have a styling that is consistent with the Buttons extension. This is just a darkening of the active border and a small border radius. 2015-08-10 14:58:05 +01:00
Allan Jardine
781f7fcaef Update - examples: All examples now use $().DataTable() to construct the table.
- The API examples already used the new form, but many were still
  `$().dataTable()`, which still works, but the new API form method is
  prefered.
2015-08-10 14:57:47 +01:00
Allan Jardine
ecf94192ae Dev: Update Foundation CDN
Dev: Built fixes for Editor
2015-08-06 20:42:36 +01:00
Allan Jardine
201cc7fb69 Fix: If dt-init deferRender was enabled, the dt-event init event wouldn't trigger until after the table's second draw.
- This could be seen specifically when using Responsive with a defer
  rendered table - Responsive wouldn't kick in until after the second
  draw.
2015-08-06 20:42:01 +01:00
Allan Jardine
21705f049a Dev: Example build update to allow the new components frameworks to build from the CDN 2015-08-06 20:41:26 +01:00
Allan Jardine
065e3d2b1d Update - examples: Remove jQuery UI themed scrolling example
- Bootstrap is proving to be a far more popular theme for DataTables -
  this example comes from back in the day when jQuery UI theming was
  first added, so it is no longer required.
2015-08-06 20:41:08 +01:00
Allan Jardine
eff925f168 Fix - examples: Pipelining description had a typo 2015-08-06 20:40:12 +01:00
Allan Jardine
a67cb611de Fix - docs: dt-api columns() incorrect argument type for column selector
Fix - docs: `dt-api column().index()` incorrect return type was documented
2015-08-06 20:39:33 +01:00
Allan Jardine
c6cea56621 New - example: Scrolling example with dynamic height using the vh CSS unit 2015-07-24 15:39:18 +01:00
Allan Jardine
a2948e4c1e Fix: Simplification and improvement of table widths when scrolling
Fix: Table could overscroll if `dt-init data` is used to populate the table

This is a fairly significant change to how DataTables operates for the
scrolling width calculations and primarily is due to a simplification
with the use of `clientWidth` to get the scrolling container width.
Rather than getting the offsetWidth and then removing the scrollbar
width if required the `clientWidth` will give us the value directly.

With the scrollbar width already accounted for the scrolling draw code
can be updated to not need to account for it itself.

Finally, when using the `data` property to add data to the table we need
to recalculate the column widths after the first draw, just like with
Ajax loaded data, otherwise the data added won't be taken into account
and we can get an error in the scrolling.
2015-07-24 15:38:59 +01:00
Allan Jardine
fa9fa2e296 Dev: Syntax highlighter - link urls with a comma in them
Dev: Syntax highlighter - show the type label above the code so it doesn't over lap the code
Dev: Syntax highlighter - don't show the `:after` option in highlighted code
2015-07-24 11:45:26 +01:00
Allan Jardine
11dbd3ca52 Fix: Mixed tabs and spaces 2015-07-24 11:45:08 +01:00
Allan Jardine
534e281b39 New: dt-api draw() now accepts a string parameter which can be used to perform a simple redraw without the need to reorder / research the table. This is useful for paging where, otherwise, it would be a performance hit. 2015-07-24 11:44:34 +01:00
Allan Jardine
d1352ac898 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2015-07-24 11:43:09 +01:00
Allan Jardine
fcd96cc5e3 Fix - docs: dt-api rows().every() example was missing a parameter
- This fixes DataTables/DataTables #608
2015-07-24 11:42:49 +01:00
Allan Jardine
b61ac2a9db Resolve issue with focusing when there are multiple graphs updating on the same page 2015-07-24 11:42:12 +01:00
Allan Jardine
7b57d5f10b Fix - docs: Add examples for dt-init columns.defaultContent showing how it can be used with null or undefined content
Thanks to `jonahjonah` for pointing this out
2015-07-24 11:41:02 +01:00
Allan Jardine
8ed28b6f00 Dev: Remove SQL error message on error
This fixes DataTables/DataTables #604
2015-07-15 17:29:13 +01:00
Allan Jardine
3d3f72aec6 Fix - PHP: Validate the JSONP callback as a valid Javascript function 2015-07-15 17:11:15 +01:00
Allan Jardine
994121d024 Dev: Updating Markdown extension for linking to documentation and also the styles to make more visible
- Have used :after for the information about what type of link it is -
  this stops it from being included in a copy / paste which was annoying
- The postfix is a bit more informative than a letter about what
  software it relates to
- With the move to the 1.10 API for all of the extensions, showing the
  extension letter was redundent anyway
- Adding -button link type
- Improved the colours
2015-07-15 17:10:59 +01:00
Allan Jardine
4222dec97d Merge branch 'master' of github.com:DataTables/DataTablesSrc 2015-07-15 17:10:41 +01:00
Allan Jardine
4b378ff787 Dev: Updating the XML for the external styling examples to use the new example build framework 2015-07-15 17:10:24 +01:00
Allan Jardine
821e866ac0 fix for incorrect calculation in _fnBrowserDetect
when body's position is changed (left: 375px) _fnBrowserDetect incorrecly calculates offsets. thus header is a bit misaligned. commit changes test object's position to fixed. in this case it's position will
be relative to the viewport not to the body.
2015-07-15 17:09:48 +01:00
Allan Jardine
99fa7cccff Merge branch 'master' of github.com:DataTables/DataTables 2015-07-09 10:23:23 +01:00
Allan Jardine
1447c26a78 Fix: Potential memory leak when using static events on table elements and destroying tables
When the table was being destroyed and the remove parameter was passed
in as `true` to remove the table from the DOM there was potential for
bound events to not be unbound from the table elements. This was caused
by the use of the `detach` jQuery method which will not remove events.
Furthermore, rows would not be added to the table before this method (or
`remove()`) was called. As such we need to reorder the code slightly -
attach the rows back into the DOM and then remove them (or detach if the
table is left in the DOM) - otherwise rows which were hidden by paging
would not have their events unbound.

Many thanks for KnowledgeNet ( http://kn-it.com/ ) for their support in
finding and allowing this bug to be addressed!
2015-07-09 10:21:10 +01:00
Allan Jardine
549bd19854 New: Optimised ID selectors - Also works when rows have not yet been rendered.
Being able to get and keep a reference to each row is quite important.
You can't use the DataTables row index for this as it can potentially
change, but we can use IDs, based on a unique value for each row in the
data - `dt-init rowId`.

I've made the decision to not require escaping of data in the ID. This
means that selectors can be ID selectors with a cobontation of other
things (#div.class for example) as that really doesn't make much sense
in this contact - you only have rows that you can select from. Not
requiring escaping makes both the client and library code much easier.
This is documented.

The implemention is to store a reference to each row's data object based
on its id allowing for a trivial lookup. The object has its own index
in the `aoData` array, so there is no `indexOf` required. The only
downside is that the index must be updated when a row is deleted. This
is done with a trivial for loop.
2015-07-06 21:05:27 +01:00
Allan Jardine
abc683d393 Dev: dt-api rows().ids() and dt-api row().id() methods should return undefined if a row's id is undefined 2015-07-06 21:05:08 +01:00
Allan Jardine
5ab2e30e66 Dev: Latest extension built commands. This is not yet complete! 2015-07-06 21:04:51 +01:00
Allan Jardine
ca703a9d6b Dev: Update Bootstrap example to use the styling framework build code 2015-07-06 21:04:14 +01:00
Allan Jardine
7e2c6b4d0f New: dt-api page.info() includes a new parameter to indicate if server-side processing is being used or not for the table 2015-07-06 21:03:56 +01:00
Allan Jardine
dda351a54e Fix: Row details could potentially throw an error if used on an row that doesn't exist (might have been removed) 2015-07-06 21:03:39 +01:00
Allan Jardine
1379e9725b Fix - example: Comment about dt-init columns.orderData incorrectly stated that the sort direction could be specified. 2015-07-06 21:02:06 +01:00
Allan Jardine
29fd57569a New - dt-api $.fn.dataTable.tables() can now return an API instance which makes for easy chaining to call methods on the selected tables. This is done by now being able to provide an object (providing two booleans is confusing unless you have the manual right next to you!) 2015-07-06 21:01:47 +01:00
Allan Jardine
cd9a9ab458 Merge pull request #583 from masteradhoc/patch-1
Fix: Update license.txt to reflect the current year
2015-06-22 16:50:37 +01:00
Brian
638f7386b5 Update license.txt 2015-06-22 17:24:11 +02:00
Allan Jardine
36929eade3 Fix: Initialisation on an element other than table would result in a Javascript error
* Issue was that an `error` event was being triggered before the
  settings object had been configured. There is no option to trigger an
  error event in this case.
* Fixes DataTables/DataTables #572
2015-06-10 09:48:45 +01:00
Allan Jardine
5a47fe5a9b Merge branch 'master' of github.com:DataTables/DataTablesSrc 2015-06-10 09:48:26 +01:00
Allan Jardine
dd6612f24a New: dt-event preInit event - emitted while a table is being initialised, allowing developers to modify the data being requested by DataTables for the first draw of the table. Used by Scroller 1.3.0 and likely will be by other extensions soon. 2015-06-10 09:48:06 +01:00
Allan Jardine
4cd2132607 Dev: Remove comments from SCSS file that are redundant 2015-06-10 09:47:44 +01:00
Allan Jardine
a5613441dc Dev: Add Scroller as a framework library 2015-06-10 09:47:23 +01:00
Allan Jardine
1effb64cfa Fixed event handlers in table headers in IE8
On line 605, column.sTitle is set to the TH's innerHTML.
On line 1816, column.sTitle is compared with cell.html().

If you have child elements with event handlers on them inside the TH, these are not the same in IE8 (see https://gist.github.com/simonbrent/933e552739477f4be3ab#file-test-html)

As a result, the check on 1816 fails, the contents of the cell is replaced, and the event handlers are removed.

Comparing instead with cell[0].innerHTML fixes this issue.
2015-06-10 09:45:55 +01:00
Allan Jardine
cf1e9d1fab Fix: dt-api ajax.reload() should cancel an exisiting request if that request has not yet completed
- Thread 28197. Thank you _womplify_!
2015-06-08 11:13:56 +01:00
Allan Jardine
f9cdaead17 Dev: Fix trailing comma 2015-06-04 15:35:06 +01:00
Allan Jardine
801e4bedf1 New: dt-init rowId option to specify what property should be used from the row's data source object to read the row's id and then set it as the DOM id (previously this was static as the DT_RowId option)
New: `dt-api row().id()` and `dt-api rows().ids()` to get the id from one or multiple rows, based on the new `dt-init rowId` option
2015-06-04 15:26:45 +01:00
Allan Jardine
759ea3d733 Update: The dt-api rows().every(), dt-api columns().every() and dt-api cells().every() methods are now passed index and loop counter parameters 2015-06-03 17:07:55 +01:00
Allan Jardine
d95820dd2a New: dt-api count() method. This provides a short cut method to determine how many items have been selected by the API. This can be useful to count the number of selected rows, etc. 2015-06-03 17:07:17 +01:00
Allan Jardine
4f3525786d Update: Add postfix option to the number renderer option 2015-06-03 17:06:58 +01:00
Allan Jardine
f817194a09 Fix: If the paging language options were set to be an empty string, the button wouldn't render. This is not correct as it doesn't allow CSS icons to be used rather than the strings. 2015-05-30 14:10:31 +01:00
Allan Jardine
3de8e7c3fe Merge branch 'master' of github.com:DataTables/DataTablesSrc 2015-05-30 14:10:12 +01:00
Allan Jardine
04598f91ff Fix - docs: dt-api row.add() and dt-api rows.add() will accept tr elements 2015-05-30 14:09:54 +01:00
Allan Jardine
63c215b044 Merge pull request #43 from cdaringe/bugfix/jq-2.1.4-sppt
Fix: Compatibility with jQuery 2.1.4 when using `$.map` and passing in only arrays
2015-05-30 14:09:37 +01:00
Allan Jardine
feccbc5968 jq 2.1.4 sppt 2015-05-30 14:09:19 +01:00
Allan Jardine
59457b63e6 Fix example: Server-side processing data source example column titles were incorrect 2015-05-30 14:09:03 +01:00
Allan Jardine
09ff48a486 New: Add numbers paging option for dt-init pagingType to round off the full set of basic options
Thank you `rubenduiveman` for suggesting this enhancement
2015-05-13 13:51:23 +01:00
Allan Jardine
be7a63761b Dev: Updating Editor build for new framework structure 2015-05-12 09:52:16 +01:00
Allan Jardine
05d796d0a2 Fix - example: Typo in description of dom example
Thanks _repjackson_ for noting the error
2015-05-12 09:52:00 +01:00
Allan Jardine
c61947f5f3 Fix: dt-init scrollX could not be given as false - it still enabled x-scrolling 2015-05-06 16:18:28 +01:00
Allan Jardine
7081a1a7c6 1.10.8-dev version flag 2015-05-06 11:31:46 +01:00
Allan Jardine
768f7cdc46 Fix: Disabling smart column width for IE67 as it can cause the browser to crash 2015-05-06 11:30:27 +01:00
Allan Jardine
17130d2fd5 Fix: When scrolling is enabled and column visiblity is toggled a Javascript error would occur due to the column width calculation method cloning the wrong header element.
This fixes thread 27612 and DataTables/DataTables issue #553
2015-05-06 11:30:10 +01:00
Allan Jardine
8236be574d Update - example: Scrolling example updated to use the nowrap class to prevent wrapping of content and thus force scrolling 2015-05-06 11:29:51 +01:00
Allan Jardine
9a7cf935ea Fix examples: Example pages styling updated to work better when operating with Bootstrap and Foundation styled table examples 2015-05-06 11:28:52 +01:00
Allan Jardine
ded5ee322c Dev: Bringing the integration files for the various frameworks that DataTables supports into the repo
This is so each repo defines its own integration files, ensuring that
they are both easy to update and that they are up-to-date. I will be
blogging about this change next week.
2015-05-06 11:27:47 +01:00
Allan Jardine
fc64e71e1c DataTables 1.10.7 release 2015-04-30 15:08:43 +01:00
Allan Jardine
2f85ace4a1 Fix: IE6/7 could crash completely when using auto width due to a clone of a clone occuring. This was bad for performance anyway and has been rewritten to resolve both the IE crash and performance issue
See thread 27428 for further information
2015-04-30 14:01:55 +01:00
Allan Jardine
bf0b4d0a42 Dev: Don't syntax highlight in IE6/7 as it slows them down hugely 2015-04-30 14:01:36 +01:00
Allan Jardine
5484fdaec3 Fix: For convenience $.fn.dataTable.Api() will now automatically construct a new DataTables API instance (i.e. it is functionality identical to calling new $.fn.dataTable.Api(). This addresses an outstanding todo item and an error in instanceof logic for the exisiting constructor 2015-04-30 14:01:16 +01:00
Allan Jardine
362ec532f2 Dev: Update to jQuery 1.11.3 2015-04-30 14:00:53 +01:00
Allan Jardine
432a0dc18a New: dt-event xhr can now return true to have DataTables not trigger the dt-event error event for cases where you've handled the error yourself now that dt-event xhr is triggered on error as well 2015-04-30 10:02:16 +01:00
Allan Jardine
e4a12ed19d New: Always trigger the dt-event xhr event on completion of an Ajax request, regardless of whether it was successful or in error
New: The jQuery XHR object is passed into the `dt-event xhr` event as the fourth parameter

* This fixes DataTables/DataTables #542
2015-04-29 21:52:34 +01:00
Allan Jardine
8376ac8412 Fix: IE6/7 could crash when loading a DataTable on page load due to the binding of a resize event listener on the window object
* Reported in thread 27428
* This SO thread was helpful: http://stackoverflow.com/questions/1264443
2015-04-29 21:19:40 +01:00
Allan Jardine
8423b06fae Dev: On Bootstrap CSS demo pages don't change the Bootstrap default font 2015-04-29 17:10:34 +01:00
Allan Jardine
2176acf2fb Fix: $.map() expects an array, but a string could be passed in during smart search, which could cause an error with the latest jQuery libraries
This fixes DataTables/DataTables #546
2015-04-29 11:13:38 +01:00
Allan Jardine
b2adfad09c New - API: dt-api i18n() method to provide easy i18n support for developers working on extensions for DataTables and to allow dt-init language to be used as a central point of configuration for the language strings used by the table. 2015-04-29 11:13:16 +01:00
Allan Jardine
0234e9e502 Fix: Singular selectors (dt-api row() for example) did not reduce their result sets to a single item 2015-04-16 12:43:43 +01:00
Allan Jardine
c8b924772d New: External interface to allow the selector options -type selector-modifier object be extended by plug-ins, providing additional selector options. In the first instance this will be used by the new Selector extension that will add the ability to select rows, columns and cells by their selected status.
The main change here is to modify `_selector_run` to loop over the
extension functions (if there are any). This involves passing extra
information to the function (selector type so the correct extension can
be used, settings object and selector modifier to pass on to the
extension method).

The _selector_opts function has also been updated to give the ability to
use unknown properteries through a $.extend, rather than writing a three
property object.
2015-04-16 12:43:24 +01:00
Allan Jardine
b7c5f8c07f New - API: dt-api any() method which can be used to check if the API result set contains any results or not
This is useful for the multi-table aware API as it may contain inner
arrays, which themselves may or may not be empty
2015-04-15 17:05:13 +01:00
Allan Jardine
caa9f2f84b DataTables 1.10.7 development underway 2015-04-15 17:04:55 +01:00
Allan Jardine
de3a4bb72e Fix - CSS: Remove redundant CSS expressions
The specificity of pesudo selectors ranks higher than class selectors,
so `tr:hover` will always rank higher than `tr.odd`. Thus giving
`tr:hover, tr.odd:hover` is redundant and this commit removes that
redundancy.

For more about CSS selector specificity see the MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
2015-04-15 17:04:37 +01:00
Allan Jardine
fc8cc9bbd2 Fix - docs: dt-api iterator() was missing parameters (incorrect xml tag)
Dev: Remove comment about using iteratorNew - that was wrong. The
`iterator` method uses a returns parameter now
2015-04-15 17:03:08 +01:00
Allan Jardine
2d6108d00c Fix - docs: dt-api row().child() should have the class name as optional 2015-04-15 17:02:08 +01:00
Allan Jardine
9b539ba8b0 Update: Contributing documentation to direct support requests to the
DataTables forums
2015-04-06 22:08:10 +01:00
Allan Jardine
34abc58d70 Release 1.10.6 2015-04-03 14:47:53 +01:00
Allan Jardine
ba42edc3f1 Fix: If a loaded state does not contain a parameter it could throw an error. This could occur when the stateSave event removed parameters from the state object
This fixes DataTables/DataTables #24
2015-04-03 14:16:57 +01:00
Allan Jardine
acf989695e Fix: $.fn.dataTable.ext.pager.numbers_length was not taken into account when showing ellipsis on both sides of the current number in the paging controller
Fix: Ellipsis elements didn't have padding which could be jarring when shifting between paging that does and doesn't show ellipsis

This fixes DataTables/DataTables #26
2015-04-03 14:16:33 +01:00
Allan Jardine
07bed19ed7 Fix examples: Demo script needs to check for the dt namespace on events triggered by DataTables 2015-04-03 12:22:10 +01:00
Allan Jardine
cbb5a5d6e9 Fix: dt-init row().child() couldn't accept an array of jQuery objects
See https://www.datatables.net/forums/discussion/26441 for details
2015-04-03 12:21:50 +01:00
Allan Jardine
5c919423c1 Fix - docs: dt-api row().child() notes that className is not added to pre-existing node 2015-04-03 12:21:27 +01:00
Allan Jardine
565b639c34 Fix: Scrollbar width wasn't correctly detected in IE9
Fix: Scrollbar width was being calculated everytime requested on machines with zero width scrollbars

The scrollbar width calculation method has been rewritten to use a
single element with use of `offsetWidth` and `clientWidth` to calculate
the scrollbar width. This works all the way back to IE6.
2015-04-03 12:12:15 +01:00
Allan Jardine
e7760542e0 Fix - example: Server-side processing child rows example would throw a JS error if you click on the child row 2015-04-03 10:52:24 +01:00
Allan Jardine
220ae99e08 Updated: Extend currency support to include all top 20 internationally traded currencies. This includes the Russian ruble, South Korean Won, Turkish Lira, India Rupee, Brazilian real, South African rand, Swiss franc, Swedish korona, Norwegian krone and Danish krone.
Any additional currancies should be added as a plug-in, not to the core!

Fixes DataTables/DataTablesSrc #38
2015-04-03 10:45:41 +01:00
Allan Jardine
7c4bf3e3b8 Fix - CSS: compact style could have the column title overlapping the sorting indicator
Fixes DataTables/DataTables #527
2015-04-03 09:51:11 +01:00
Allan Jardine
294a32f8d0 Fix docs: Add reference to dt-init columns.orderSequence from dt-init order 2015-04-03 09:50:06 +01:00
Allan Jardine
e0f2cfd81e Fix: When holding shift and clicking on a single sorted column it was possible to attempt to remove the sort (the internal sorting array was []). This shouldn't be possible, and now isn't.
* This fixes DataTables/DataTables #526
2015-03-31 20:05:23 +01:00
Allan Jardine
1e10603810 Fix: Update numebr render to return the original data point if the data passed in is not a number or a string. This allows dt-init columns.defaultContent to be used. 2015-03-20 10:49:34 +00:00
Allan Jardine
7851a6a204 Fix: If async:false is used in the Ajax configuration, callbacks assigned with dt-api ajax.reload() would not trigger until another draw has been executed.
This was due simply to the code ordering for how the callback is
triggered. See https://www.datatables.net/forums/discussion/26474 for
more information.
2015-03-19 16:20:34 +00:00
Allan Jardine
57596e2ebe Dev: Remove old images that are no longer used (haven't been since 1.9) 2015-03-19 12:00:33 +00:00
Allan Jardine
4ec31cea77 Fix: Update bower.json to not use a glob as it is unclear from the bower spec if this is supported or not and other extensions such as BowerWebpackPlugin do not support it.
Fixes DataTables/DataTables #513
2015-03-19 11:59:50 +00:00
Allan Jardine
79f969ef58 Fix: dt-api $.fn.dataTable.isDataTable() could give incorrect results if a table did not have scrolling enabled 2015-03-18 16:53:25 +00:00
Allan Jardine
2ee5b3e7f6 New: dt-api init() method for plug-in developers to get the initialisation options configured for the DataTable 2015-03-18 16:53:07 +00:00
Allan Jardine
9896d0295d Fix: If the thead contained a table the selector that was looking to find the first row in the table was selected the row from the header table rather than the tbody. This could cause errors such as HTML5 data-* attributes not being detected.
This fixes DataTables/DataTables #508
2015-03-12 10:29:16 +00:00
Allan Jardine
59f2748a7f Dev: Update contributing document to add note about contributions being under the MIT license (explicit concent required) and to acknowledge that DataTables is a large and complex project, so not all PRs can always be accepted. 2015-03-03 21:57:51 +00:00
Allan Jardine
825877f157 New: dt-api rows().every(), dt-api columns().every() and dt-api cells().every() iterator methods to make it easier to perform operations on the table elements. This is done by setting the context of the callback provided to be the singular expression for the table elemtn in question. This basically means you can access the singular methods from this - e.g. this.data() will get the data for the element, this.node() will get the cell when using dt-api cells().every() etc. The exisiting interator methods of dt-api each() and dt-api iterator() remain, and each has its own place for optimial usage of the API, but it is likely that the majority of use will switch to focus on these new methods. The examples in the rest of hte documentation has been updated to reflect this fact. 2015-03-03 15:42:36 +00:00
Allan Jardine
0942fa38a6 Fix: dt-api cells() when given a selector options object in the first parameter was incorrectly applying the selector for the cells. 2015-03-03 15:42:22 +00:00
Allan Jardine
7ef92e4f56 Fix: The initalisation object was being cloned on init which could cause a major performance hit if you pass in a large data set into dt-init data. The table node and internal API reference also should not be cloned.
* Thank you to B Lyon for spotting this issue and writing it up:
  http://www.nowherenearithaca.com/2015/03/avoiding-performance-gotcha-with-jquery.html
2015-03-02 13:25:51 +00:00
Allan Jardine
ba62dcba43 Fix - CSS: Improved interoperability for setting background colour on header cells
Previously the CSS shorthand `background` was used for the background of
the header cells, but this makes it a good deal more difficult to set
the background colour if you want to since `transparent` is implicit in
the shorthand used. This method, although a bit longer in CSS is still
fairly simple and a lot more flexible
2015-02-27 16:29:44 +00:00
Allan Jardine
16c48ad4bf Fix: dt-event xhr was not being emitted when dt-init ajax was being given as a function 2015-02-27 15:12:46 +00:00
Allan Jardine
ee9ca0336e Fix: Scrollbar left detection wasn't allowing for sub-pixel rendering which occurs when browsers are zoomed
* This refers to DataTables/DataTables #479 and DataTables/Scroller #44
2015-02-27 12:00:43 +00:00
Allan Jardine
b1ff92a274 Fix: Error in the detection of style="width:..." attributes. DataTables was reading the pixel value that it had written if the columns were recalculated. Now only percentage values are used from the style width.
* This fixes DataTables/DataTables #501
2015-02-25 10:48:22 +00:00
Allan Jardine
c6be28ef8f Call _fnAjaxDataSrc before setting recordsTotal
_fnAjaxDataSrc will in turn call _fnGetObjectDataFn, which
can be specified by the dataSrc method.

This way the dataSrc can set the recordsTotal parameter on
the json data and the changes will be read into the
recordsTotal/recordsFiltered variables.
2015-02-19 13:38:14 +00:00
Allan Jardine
62da8efbca New: The dt-init ajax.data option, when used as a function, now has the DataTables' settings object passed in as the second parameter, which can be useful to access the API if needed 2015-02-19 13:37:57 +00:00
Allan Jardine
a1458bf80c Fix: Legacy API fnDraw was incorrectly handling the case when false was passed in.
* See DataTables/DataTables #499
2015-02-17 15:00:24 +00:00
Allan Jardine
b433f105a3 Fix: Due to use of an HTML entity, DataTables could fail on XHTML pages 2015-02-17 10:29:09 +00:00
Allan Jardine
5ec5862938 Dev: Fix CSS as a dependency 2015-02-16 16:01:14 +00:00
Allan Jardine
6217b1aaae Merge branch 'master' of github.com:DataTables/DataTablesSrc 2015-02-16 16:00:55 +00:00
Allan Jardine
455121839a Fix docs: dt-init stateSaveCallback syntax error 2015-02-16 16:00:20 +00:00
Allan Jardine
a9b35a4927 Dev: Add ability to set a body class for an example for extra styling information. This will help to combat conflicts with the datatables.net site css when deployed on the site. 2015-02-16 12:01:07 +00:00
Allan Jardine
1ee4427ab0 Dev: JSPM support in package.json 2015-02-16 12:00:46 +00:00
Allan Jardine
3824202e0e Dev: Update CDN libraries for the examples 2015-02-12 14:11:54 +00:00
Allan Jardine
f1b561ec53 Fix: dt-init columns.orderData wasn't working if given as an integer 2015-02-12 14:11:37 +00:00
Allan Jardine
15991a26eb Dev: 1.10.5 version 2015-02-12 14:11:18 +00:00
Allan Jardine
6fbd6a9c46 Dev: Firebase database in example documentation rather than AIR (outdated) 2015-02-12 14:10:38 +00:00
Allan Jardine
a5d77d99bc Sync repos: Add html data options example 2015-02-10 14:27:53 +00:00
Allan Jardine
2c67caad44 Fix: Exit out of the extend API method if possible, for performance 2015-02-10 14:26:37 +00:00
Allan Jardine
34fb1cb18a Dev: Add buttons object to .ext for future buttons extension 2015-02-10 14:25:57 +00:00
Allan Jardine
c98854def4 Fix - example: Dro the http protocol from the i18n CDN file loder example so it works over https 2015-02-10 14:25:16 +00:00
Allan Jardine
d6f46dffbb New: DataTables intialisation options can now be specified using HTML data-* attributes on the HTML <table> tag and on the cells of the column headers in the table.
* A new example of this is included
* Fixes DataTables/DataTablesSrc #9
2015-02-06 16:35:34 +00:00
Allan Jardine
71535def21 Fix examples: Server-side processing examples didn't correctly show the Ajax data after the first draw 2015-02-06 16:35:12 +00:00
Allan Jardine
4039e77a6f Fix: In IE9 where the table is in an iframe paging elements were not added until after the first draw
* See thread 23915 for details and kudos to helenm for the research into the issue
2015-02-04 16:11:59 +00:00
Allan Jardine
8f3ad35944 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2015-02-04 10:56:07 +00:00
Allan Jardine
7a26c5d4c8 Fix: When detecting is the table has a width attribute we can also use style.width to check if a width as been assigned using the style attribute. This doesn't work for reading CSS assigned information, that would require parsing the stylesheet` but it does mean there is a way of doing this with using deprecated attributes. 2015-02-04 10:55:43 +00:00
Allan Jardine
1b8319e9e3 Added images to bower 'main'section 2015-02-04 10:54:57 +00:00
Allan Jardine
71195d29c3 Fix: jQuery UI stylingsheet didn't have all the same options as the main DataTables stylesheet 2015-02-04 10:54:37 +00:00
Allan Jardine
71863bc49f Site: Syntax highlight could line break incorrectly 2015-01-22 10:22:28 +00:00
Allan Jardine
f4f8ca5632 Fix example: Index column API example had a typo
* This fixes DataTables/DataTables #482
2015-01-22 10:22:13 +00:00
Allan Jardine
c7e18c4236 move eq jQuery selector outside of selector 2015-01-22 10:21:30 +00:00
Allan Jardine
d1ea76a958 Fix example: dt-init rowCallback example was highlighting all rows, rather than just a select few due to the logic condition being a bit loose! 2015-01-11 16:27:29 +00:00
Allan Jardine
744155653e New: dt-init ajax.data can return a string to be used as the request body. This is useful for submitting a JSON string to the server.
* This is actually compatible with 1.10.0+ but was never documented (it
  wasn't an intended feature, but rather an implementation detail. It
  is rather useful though, so is now documented.
2015-01-11 16:27:15 +00:00
Allan Jardine
d65dd47fe6 New: where condition controls for the example PHP server-side processing class (SSP). This takes the form of a new complex method (to compliment the exisiting simple method) which accepts where parameters that can be used for either user based filtering, or server based filtering. 2015-01-11 16:26:59 +00:00
Allan Jardine
be061edb7b Dev: Remove accidentally committed debug 2014-12-22 17:14:02 +00:00
Allan Jardine
7c07b80222 New: Improved error handling - $.fn.dataTable.ext.errMode can now be:
* `alert` - Alert the error
 * `throw` - Throw an error
 * `none` - Do nothing
 * A function that is called

New: `dt-event error` event that is triggered when an error occurs (regardless of the value of `$.fn.dataTable.ext.errMode`
2014-12-22 16:15:10 +00:00
Allan Jardine
ff13ccc3ca Update example: Update Ajax language example to read file form the CDN 2014-12-16 15:24:39 +00:00
Allan Jardine
a5e8ca8a2e Dev: Remove unused files from the example resources. Examples use the CDN files now 2014-12-16 15:24:21 +00:00
Allan Jardine
6c7ada53eb Fix: Image file size optimisation.
See DataTables/DataTables #470 for details
2014-12-16 15:24:05 +00:00
Allan Jardine
1c95f9fe06 Dev: Remove debug 2014-12-15 15:46:24 +00:00
Allan Jardine
25ceef46ab Fix: When initialising a table and checking it it already exists, we should check against header and footer elements as well, so they can be used as the selectors
This fixes DataTables/DataTables #467
2014-12-15 15:13:08 +00:00
Allan Jardine
1ac1ea6752 Dev: Support for a "private" examples directory where the examples are
compiled but not included in the ToC

Dev: longer line wrapping!
2014-12-11 15:27:11 +00:00
Allan Jardine
24b2d11460 Dev: Show language name in code highlighting 2014-12-04 12:23:12 +00:00
Allan Jardine
4112da87a2 Dev: Add C# syntax highlighting 2014-12-02 10:38:13 +00:00
Allan Jardine
a5ff36fdb9 Fix example: Row details discription refered to an incorrect function name 2014-12-02 10:37:56 +00:00
Allan Jardine
90ce3773f5 Fix: When detecting HTML5 attributes need to check for null from getAttribute, since otherwise empty strings would fail.
See thread 24802
2014-12-02 10:37:40 +00:00
Allan Jardine
a0d6150c76 Dev: use Google hosts Raleway font for standalone Editor 2014-12-02 10:37:23 +00:00
Allan Jardine
bc256721ce Fix docs: Invalid line to function that doesn't exist 2014-11-28 10:02:22 +00:00
Allan Jardine
31670cc1c5 Fix: dt-api $.fn.dataTable.isDataTable() wasn't working correctly on scrolling tables when the header or footer table was passed in 2014-11-24 10:51:01 +00:00
Allan Jardine
cb957c019e Merge pull request #22 from bjmiller/master
Fix for CommonJS/Browserify
2014-11-18 17:10:50 +00:00
Allan Jardine
cd2423d21a Fix #23: Attach the scroll event for the header alignment using the DT namespace to ensure that it is removed on destroy 2014-11-18 17:10:34 +00:00
Allan Jardine
dd7fbeb0a7 Fix for CommonJS/Browserify
I'm not sure whether this breaks any other CJS implementation, but the only one you're likely to have to worry about is Browserify.

This relates to https://github.com/DataTables/DataTables/issues/434
2014-11-18 17:10:18 +00:00
Allan Jardine
e820e57fec Dev: Daft JSON error in package.json file 2014-11-13 14:14:48 +00:00
Allan Jardine
42f6be43d2 Dev: Update package.json file 2014-11-13 14:11:00 +00:00
Allan Jardine
3a22a082c3 New: DT_RowAttr special parameter for row data to be able to set abstract parameters for the row. This compliments the exisiting DT_RowId, DT_RowClass and DT_RowData parameters.
Thanks to Jifer in thread 24534 for this suggestion
2014-11-12 10:09:17 +00:00
Allan Jardine
d83f47cfb5 Fix: dt-api $.fn.dataTable.util.throttle() was missing the first call.
Dev: Moving on to 1.10.5-dev
2014-11-11 14:14:11 +00:00
Allan Jardine
06c1cbebde DataTables 1.10.4 release 2014-11-07 15:17:44 +00:00
Allan Jardine
9841c3f038 Dev: Fix return case for column visiblity: 2014-11-07 15:17:29 +00:00
Allan Jardine
f4d1495a2c Dev: Tests for the cell invalidation update 2014-11-07 15:17:14 +00:00
Allan Jardine
24761003f3 Fix: dt-api cell().invalidate() and dt-api cells().invalidate() now invalidate only the cell(s) in question and not the whole row.
Previously the whole row was invalidated as a quick workaround for what
I would would be a complex task, but the solution is actually relatively
simple and small in code size, reusing much of the current invalidation
code. The cache data for the whole row is still removed, but the
important part of minimising the DOM interaction is in place.
2014-11-07 12:28:44 +00:00
Allan Jardine
0e0acbd521 Dev: Code type
* Fixes DataTables/DataTables #448
2014-11-05 11:44:05 +00:00
Allan Jardine
fb6a7be880 Fix: Selector errors when using jQuery selectors with dt-init deferRender enabled
Fix: Incorrect returns from sub-methods if a selector does not contain any results (DataTables/DataTables #431)
Update: `dt-api iterator()` has a fourth parameter to indicate that a return value is expected

The basic issue here was the `iterator()`'s automatic check to see if a
new API instance should be returned or not. If there are no results from
a selector the iterator will just use the original API instance to
return, but this isn't correct as we expect an empty result set in this
case. This is partly due to the fact that the top level methods (`row()`
for example) will return 2D arrays, while the child methods will flatten
the results, this is parhaps an error in the API, but too late to fix
now.

To address this, `iterator()` now has a parameter to tell it if a new
instance should be used or not. I debated about a new method
`iteratorNew()`, but I think this is just as clear (which isn't very
clear unfortunatly, but just needs to be made clear in the
documentation, which I've updated for this change).

I've added tests for the selectors with `deferRender` enabled. The test
suite is still in desperate need of update...
2014-11-03 15:18:18 +00:00
Allan Jardine
f8770a6b2a Update example: Use an initial value for the dt-api reduce() call to simplify the logic 2014-11-03 15:17:30 +00:00
Allan Jardine
e92582b45a Fix: Page length change will now attempt to keep the start point on the current page, but will shift that row's position away from the start point, so that the paging is always consistent in its display. Without this changing the page length could result in landing on page "1.4" (or some other partial page) that you could never get to with just paging alone. That is no longer possible in DataTables.
This is something that has been in DataTables since the version first
vresion and was contentious at that point so while this is a minor code
change, for me it is quite a big change! I feel that this is the correct
operation now, although it does result in rows being moved around where
they might not be needed to if partial pages could be used.
2014-10-30 15:15:20 +00:00
Allan Jardine
e62a747c2e New: dt-api $.fn.dataTable.util.escapeRegex() utility method for escaping regular expressions
Update example: Use the new `dt-api $.fn.dataTable.util.escapeRegex()` method to escape regex characters in the search input filter example
2014-10-30 11:26:34 +00:00
Allan Jardine
5c77a02f29 Fix: -tag caption was being inserted into the wrong elements when scrolling is enabled 2014-10-21 16:35:48 +01:00
Allan Jardine
eed543f566 Fix: jQuery references should be made to the aliased $.
Originally from DataTables/DataTables/pull/437
2014-10-21 09:31:24 +01:00
Allan Jardine
50d1466cfe Fix: If the language file fails to load, continue on as best we can. See thread 24046
Dev: Update the language init code to be a little more compact
2014-10-16 10:50:33 +01:00
Allan Jardine
744b6a901b Fix: When filtering HTML tags should be striped and were for a simple html type, but the html numeric types were not also receiving this treatment and thus the tags were included in the filter. This resolves that issue by adding search formatters along with sort formatters when the decimal place is known 2014-10-10 11:20:05 +01:00
Allan Jardine
1c3f7edfc2 Fix: Columns with mixed string and HTML types were not being detected as HTML type due to an early break 2014-10-10 10:54:25 +01:00
Allan Jardine
e06931ee0b Fix example: Improve code for multi-column select example 2014-10-10 10:54:11 +01:00
Allan Jardine
cfe6b6dce3 New object read from DOM example 2014-10-09 16:22:54 +01:00
Allan Jardine
fa89685d8b DataTables 1.10.3 2014-10-09 16:21:39 +01:00
Allan Jardine
0d92daf10f Dev: Remove debug line 2014-10-09 16:21:24 +01:00
Allan Jardine
9fa68d564f New: The row, column and cell selectors now all accept a function as a selector. The function will return true or false based on the defined logic to indiciate if the item should be included in the result set. This is particularly useful for searching the table for items of data. 2014-10-09 14:55:19 +01:00
Allan Jardine
d7a9aefb6f New: dt-api cells().render() and dt-api cell().render() methods to trigger the rendering methods for the orthogonal data types. Similar to the cache() methods but this will specifically trigger a render and also provides access to the type and display options which cache() does not. Generally it is expected that this will replace the cache() methods 2014-10-08 16:04:44 +01:00
Allan Jardine
b2ac7fa0f2 Dev: Fix previous commit for HTML5 attributes. The object constructed wasn't being correctly written 2014-10-08 16:04:27 +01:00
Allan Jardine
00c69698e3 Fix: Javascript error when using smart filtering with quotes for exact matching 2014-10-08 14:19:29 +01:00
Allan Jardine
a6b871d660 New: Ability to use dt-init columns.data with a DOM sourced data to read the row information into an object rather than an array (the default) 2014-10-08 14:19:14 +01:00
Allan Jardine
4f189464e4 New: dt-init searchDelay parameter that controls the throttle frequency for search requests using the global input text box 2014-10-08 11:28:51 +01:00
Allan Jardine
9a49208617 New: dt-api $.fn.dataTable.util.throttle() static utility method. This provides extension authors with an easy way to throttle function calls 2014-10-08 11:28:33 +01:00
Allan Jardine
5c8b72b8e8 Fix: Native Date instances weren't being detected as a date type
* This fixes DataTables/DataTables #385
2014-10-07 16:47:20 +01:00
Allan Jardine
997f3fa87c Update: bower.json updated with ignore, keywords and license 2014-10-07 16:08:19 +01:00
Allan Jardine
0e94078ad9 New: dt-api column().dataSrc() and dt-api columns().dataSrc() methods which provide the ability to obtain the data source parameter for one or more columns 2014-10-07 15:39:51 +01:00
Allan Jardine
6adf853864 Fix: jQuery UI integration when used with ColReorder could cause the wrong header to be shown as sorting
* This fixes DataTables/ColReorder #22
2014-10-07 15:39:36 +01:00
Allan Jardine
4e30d0ccf7 Fix example: Hidden columns description text had inversed logic for the column state 2014-10-07 15:39:22 +01:00
Allan Jardine
27901e11a4 Fix: If dt-init language.decimal was given as a decimal point, rather than the default decimal sort being performed, decimals were just being stripped 2014-10-07 15:39:06 +01:00
Allan Jardine
6f2092783b Dev: npm now requires the repository parameter
* This fixes DataTables/DataTables #427
2014-10-07 15:38:36 +01:00
Allan Jardine
c46168a91d Fix docs: Reference to dt-init paging was wrong 2014-10-07 15:36:30 +01:00
Allan Jardine
2b5fd456c3 Merge pull request #427 from mdmalinowski/patch-2
Add repository to package.json to stop npm error
2014-10-02 15:32:44 +01:00
Matthew Malinowski
d74849248c Add repository to package.json to stop npm error
Hi!

When installing DataTables from the repo with npm >v1.2.20, it'll WARN "No repository field." This small patch resolves that. (See https://www.npmjs.org/doc/files/package.json.html#repository or https://stackoverflow.com/questions/16827858/npm-warn-package-json-no-repository-field.)

I hope it's ok to propose this change against DataTables/DataTables -- I couldn't find a `package.json` in DataTablesSrc.

Thank you for your work!!
M
2014-10-02 10:10:42 -04:00
Allan Jardine
bc06f16e43 Update: dt-api iterator() updated to execute the callback in the scope of an API instance refering to the table in question 2014-09-22 16:41:41 +01:00
Allan Jardine
e0f02604cf Fix: dt-api destroy() when a child row was shown resulted in a JS error
See thread 23516 for more information
2014-09-22 10:50:40 +01:00
Allan Jardine
e0a08d511b Fix examples: SQLServer demo SQL gave a warning about inserting ids on an identify column 2014-09-22 10:50:24 +01:00
Allan Jardine
a8ce572cb3 Fix examples: Deferred rendering SSP example's initial HTML was out of date 2014-09-22 10:50:08 +01:00
Allan Jardine
491945bace Fix - examples: Incorrect column title for some server-side processing examples 2014-09-22 10:49:52 +01:00
Allan Jardine
3f219a38e2 Fix: Numeric sorting for 0 was incorrect
* This fixes DataTables/DataTables #414
2014-09-08 15:14:49 +01:00
Allan Jardine
cda203dbdc Fix: Example SQL database had extension field as an integer. However, that meant that numbers such as 0001 were not correctly saved 2014-09-08 15:14:33 +01:00
Allan Jardine
b1f1b2d961 Dev: Update bootstrap libraries to 3.2 2014-09-08 15:14:16 +01:00
Allan Jardine
4453229416 Fix exampple: Remove rowIndex from select_rows example - not used
Dev: Add comment to rowCallback trigger about undocumented parameters
2014-09-08 15:13:59 +01:00
Allan Jardine
14f5f630c9 Fix: Could not remove a multi-column sort using shift click like you could in 1.9-
This fixes DataTables/DataTables #391
2014-08-28 14:24:16 +01:00
Allan Jardine
3019ab9ec7 Fix: ARIA label for the sorting that will occur next wasn't working correctly 2014-08-28 14:23:59 +01:00
Allan Jardine
32a5bc6aee Fix docs: Typo in processing event example 2014-08-28 14:23:15 +01:00
Allan Jardine
267ab376b8 Update example: Update the select column filtering example to use dt-init initComplete
* There are often questions about why it isn't working with Ajax. it
  will now
2014-08-15 16:29:16 +01:00
Allan Jardine
e3a1d7b9a5 Workaround for dom text sorting 2014-08-06 11:21:27 +01:00
Allan Jardine
3978684f44 Update to 1.10.3-dev 2014-08-06 11:21:07 +01:00
Allan Jardine
f8a66288db Fix: Postgres generated SQL wouldn't allow a row to be inserted by Editor due to an incorrect sequence count 2014-08-06 11:18:44 +01:00
Allan Jardine
7df451fe4c Improved last page calculation.
Improved last page calculation when page size is changed on last page.
e.g. Suppose there are total 12 records and page size is set to 5 records/page. Go to last page, which should be 3, change page size to 10. Page#2 should be selected and it should show 2 records on it.
2014-08-06 11:17:57 +01:00
Allan Jardine
64f979a72b Release 1.10.2 2014-07-31 14:59:26 +01:00
Allan Jardine
3743d6bc28 Dev: Add common shell method to get version string from a JSDoc
commented file
2014-07-31 14:58:33 +01:00
Allan Jardine
a8575c5a7a Fix: #384. Direct to the manual page for latest install instructions 2014-07-30 10:16:47 +01:00
Allan Jardine
a644aa7e21 Fix: Add redrawCalculations option to dt-api columns().visible() and dt-api column().visible() to improve performance in a loop. 2014-07-25 16:26:30 +01:00
Allan Jardine
43118eed49 Fix: dt-api column().search() wasn't returning the search term when not given any parameter (well, it was, but in an API instance which was wrong) 2014-07-25 10:09:44 +01:00
Allan Jardine
fc9d6fac64 Fix - examples: Update the tag CSS to be more readable 2014-07-25 10:09:09 +01:00
Allan Jardine
a19e700582 Fix: When using :visible for the column selector to get visible columns, no columns were returned due to an incorrect regex. Now :visible can be used to get only the visible columns 2014-07-25 10:08:26 +01:00
Allan Jardine
7668646e1e Fix: Regression from 1.10 whereby empty data for a column could cause an offset in the filtering column 2014-07-18 12:11:05 +01:00
Allan Jardine
9f5eb39a2f Dev: Moving on to 1.10.2 development 2014-07-18 12:10:43 +01:00
Allan Jardine
89c4e24698 Fix examples: Search API examples should use consistent terminology 2014-07-18 12:09:54 +01:00
Allan Jardine
c4cdba49e4 Fix example: Use search terminology
* See thread 22268
2014-07-18 12:09:03 +01:00
Allan Jardine
e89c187b16 Remove old demo files that are no longer required 2014-07-15 11:40:48 +01:00
Allan Jardine
3cd15f1c16 DataTables 1.10.1 release 2014-07-15 11:33:57 +01:00
Allan Jardine
641924cbee Fix: If filtering data is null, undefined or NaN it is not included in the filter 2014-07-15 11:33:39 +01:00
Allan Jardine
39df74eb2c Fix: dt-init createdCell cellData prarameter now passes in the original data for the cell
* This reverts the last commit which documented the old behaviour.
  Thinking again about it, if you want to modify the rendered data use
  `$(cell).html()`.
2014-07-15 11:33:25 +01:00
Allan Jardine
13e33e2177 Fix docs: Add clarification for cellData in dt-init columns.createdCell
* Based on discussion in thre 22009
2014-07-15 11:33:10 +01:00
Allan Jardine
786d79d1a9 Fix: dt-api cell() was not selecting cells for row index 0
* Problem was the check for the index was falsy rather than checking for
  undefined
* See thread 22219 for more information
2014-07-11 10:11:17 +01:00
Allan Jardine
cd920b0605 New: Instance methods for a data source are now executed in the scope of that instance
* When `dt-init columns.data` / `dt-init columns.render` resolve to a
  function, that function is executed. Previously this execution was in
  the global scope, but in order to be able to use an instance as a data
  source for the row (something I wanted as part of 1.10) we need to
  execute the function with the instance's scope. A simple `call()` does
  this.
* I could add a check to see if the `rowData` is a plain object or not,
  but that would add significant overhead to the processing, and this
  particular part of the code needs to be very fast. Additionally, I
  think it is unlikely that any one was dependant on this being executed
  in global scope, so the change is made.
* This fixes DataTables/DataTables #368.
2014-07-10 16:11:29 +01:00
Allan Jardine
264e1f0a60 New: Cell styling classes for alignment of text
* This fixes DataTables/DataTables #371
2014-07-10 14:24:04 +01:00
Allan Jardine
78724dd11d Fix: With deferred rendering enabled a DOM sourced table would create new nodes rather than using the exisiting one. It should be noted that deffered rendering with a DOM sourced table is completely redundant, but it should still use the same nodes.
* This fixes DataTables/DataTables #365
2014-07-10 12:28:49 +01:00
Allan Jardine
c50629a4b5 Fix: Boolean type searching
* 1.10.0 had issues when searching for boolean data as the search
  extension methods were checking for empty data, but if found they were
  using `''` as the term to filter. It should more accurately just use
  the given data.
* Relates, the `_empty()` method was considering `false` to be empty,
  but not `true`. Both are now considered to be empty.
2014-07-10 11:57:26 +01:00
Allan Jardine
ad7963b3dd New: state API methods
* `dt-api state()` - get the last saved state
* `dt-api state.loaded()` - get the state that was loaded when the table
  was created
* `dt-api state.save()` - trigger a state save
* `dt-api state.clear()` - clear the saved state
2014-07-09 16:42:29 +01:00
Allan Jardine
9b8153f1d6 Dev: Fix recent childNode removal when checking for nodes 2014-07-09 09:12:29 +01:00
Allan Jardine
02b6a5c39c Fix: camelCase notation for column search options (dt-init searchCols) wasn't working
* Fix is to convert from hungarian notation to camelCase in a loop for
  the array

New: State staving object structure is now full documentated

* The structure has been altered to be camelCase notation like the rest
  of the 1.10 API. State loaded from older versions of DataTables will
  be silently ignored
2014-07-02 17:01:20 +01:00
Allan Jardine
f907627fe4 Update - performance: API each() itterator uses for loop now
* The native `forEach` is suprisingly slow. I had assumed that it would
  be faster that a for loop, but it appears that due to the function
  execution it is actually much slower. A simple for loop is much better
  for performance and we loose nothing since hte API instance is array
  like.
* This fixes DataTables/DataTables #364
2014-06-27 15:34:54 +01:00
Allan Jardine
4706058c95 Dev: CDN option for when building the examples 2014-06-27 15:24:58 +01:00
Allan Jardine
278147a7ce Fix: IE destroying nodes which have a Javascritp reference on using innerHTML
* It appears that if you have a reference to a DOM node, but that DOM
  node is overwritten by use of innerHTML, the reference is destroyed
  and you cannot use the referenced DOM node any more.
* This became apparent from using Editor's inline editing mode, where in
  IE the inline edit would work only once. No other browser has this
  issue but it is in IE7-DC1.
* The workaround is to remove the child nodes first. not ideal at all,
  but it does work.
* Searching the internet I didn't find much about this so I've opened an
  issue on the IE connect site:
  https://connect.microsoft.com/IE/content/content.aspx?ContentID=29582
2014-06-27 15:24:41 +01:00
Allan Jardine
6f6d113134 Fix example: Range filter didn't correctly handle 0 2014-06-27 15:24:24 +01:00
Allan Jardine
485b44965e Fix example: multi filter needs a way to be cleared 2014-06-27 15:24:07 +01:00
Allan Jardine
777907d7f3 Fix: Nested DataTables could have their events interfear with the parent tables
* DataTables uses custom jQuery events which propagate up through the
  DOM, with the custom event being triggered on the table node. Ideally
  I'd like to change the event handling to use $().triggerHandler() to
  avoid this issue, but as discussed in issue #245 that would mean that
  delegated events wouldn't work. Perhaps there should be two forms of
  events triggered by DataTables, those which do bubble and those which
  do not. `init` is the only one which would _have_ to bubble.
* The workaround for the moment is to check that the settings object in
  context of the executed settings handler is the same as the one that
  was used in the addition of the event handler.
* This fixes DataTables/DataTables #361
2014-06-24 16:31:19 +01:00
Allan Jardine
f0094e9aa1 Fix: When storing a column's width, DataTables was truncating the CSS unit identifer to a single character (e.g. 12px was held as 12p). This caused issues with column size adjustment
* In particular this fixes the FixedColumns + ColReorder example which
  was showing the problem by expanding the columns to the full container
  width for each column. See thread 20848 for information.
2014-06-24 15:03:57 +01:00
Allan Jardine
20c764df90 Add minified files to built repo 2014-06-23 15:40:22 +01:00
Allan Jardine
7295b8b9b7 Dev: Add compact styling example 2014-06-23 15:37:10 +01:00
Allan Jardine
eaef26a11f Fix: Use self:: for static method references in SSP class
* This fixes DataTables/DataTables #359
2014-06-23 15:35:54 +01:00
Allan Jardine
c06dd8eaba Dev: Fix build errors found while working with the Responsive extension 2014-06-23 15:35:12 +01:00
Allan Jardine
5d4d4f39d7 New: compact and no-wrap styling classes for the DataTables stylesheet
* `compact` reduces the padding on the cells in the table to increase
  the information density.
* `no-wrap` disabled white space text wrapping
2014-06-23 15:34:52 +01:00
Allan Jardine
b2509005ab Fix: Percentage columns detected as date columns in Chrome
* V8 strips unknown characters not only at the start of a string given
  to Date.parse() but also at the end. So `10%` (for example) was being
  detected as a date type.
* This fixes DataTables/DataTables #354
2014-06-20 08:49:58 +01:00
Allan Jardine
84686a5b30 New: row().class() when given with a class, the class is added to the -tag tr element as well as the -tag td element 2014-06-19 13:38:38 +01:00
Allan Jardine
5c08c74d24 Fix: Event methods automatic addition of .dt namespace was greedy
* Need to ensure that the `.dt` namespace is still added to external
  namespaces such as `.dtr`.
2014-06-19 10:18:47 +01:00
Allan Jardine
8e71c39929 Fix example: DOM sorting plug-in wasn't sorting correctly for numeric values
* This fixes DataTables/DataTables #352
2014-06-19 10:18:27 +01:00
Allan Jardine
73ed6c4725 New: Add dt-api table().container() and dt-api tables().containers() methods to get the container -tag div elements for table(s)
* This is likely to be of more interest to plug-in authors rather than
  for general DataTables usage, but I've found myself wanting it a
  couple of times recently for plug-ins.
2014-06-18 14:50:56 +01:00
Allan Jardine
c38e140a52 Fix: number renderer displayed numbers incorrectly for negative numbers 2014-06-18 14:24:30 +01:00
Allan Jardine
4447b84c34 Dev: Restore row details example to use 1.10.0 api 2014-06-18 13:45:27 +01:00
Allan Jardine
2a97165e37 Dev: Remove code that isn't required from _fnAjaxUpdate 2014-06-18 13:45:10 +01:00
Allan Jardine
7bca91d1b5 Fix: Memory leak with child rows in a table that is destroyed
New: `dt-api row().child.remove()` and `dt-api row().child().remove()` methods to provide the ability to remove and destroy child rows
Fix docs: Note that the row().child() method's return value can have an effect on the chaining

* This fixed DataTables/DataTables issue #326.
* Special thanks to `Scottmitch1` (on github) for help with this one!
2014-06-18 12:23:50 +01:00
Allan Jardine
097f45855f Dev: Modify the API extender to remove a potential closure issue
Dev: Modify the initialisation of _Api - the old method of using `=`
twice on a row caused Chrome's debugger to show it as both names
concatinated which was confusing.

Fix: Remove API "build" code. That was part of the API prototype and the
design moved away from that approach. The code was redundant and unused.
2014-06-18 12:23:31 +01:00
Allan Jardine
6b12300c69 Fix: Row selector for page:all, order:index, search:applied was returning the data in index 1 only
* A simple logic error was causing this
* This fixes DataTables/DataTables #348
2014-06-18 12:22:34 +01:00
Allan Jardine
c5414152ed Fix example: When there is no data, can't use reduce in footer callback 2014-06-18 12:22:16 +01:00
Allan Jardine
1d159700bd Fix: number rendering helper couldn't use anything thing other than a dot (.) as the decimal place
* See thread 21315 for details
2014-06-09 14:38:34 +01:00
Allan Jardine
2300aa8ff5 New: dt-init language.searchPlaceholder option. Adds a placeholder attribute to the search -tag input element when set.
* This fixes DataTables/DataTables #316.
2014-06-06 16:30:52 +01:00
Allan Jardine
e8bd8b21bc Docs: Update description of the data() setters for how they effect the
table
2014-06-06 16:30:37 +01:00
Allan Jardine
6423ab7d67 Fix: IE9 throws an error when using document.activeElement in a frame
* See thread 21536 for more information
2014-06-05 15:29:44 +01:00
Allan Jardine
429feaad86 Docs: Improve the documentation of smart filtering in DataTables
* Explain what smart filtering is
* How it can effect passed in regular expressions
* Improve column().search() examples to show one with smart filtering
  and one with exact matching.
* API examples updated to match the examples given in the documentation
* This fixes DataTables/DataTables #344
2014-06-05 09:37:07 +01:00
Allan Jardine
c6619c64f9 Fix: Remove redundant code from the column visiblity method
* This fixes DataTables/DataTables #340
2014-06-05 09:36:52 +01:00
Allan Jardine
23b3c847ee Dev: Restore jQuery 1.11.1 - was removed by mistake in a previous commit 2014-06-05 09:36:36 +01:00
Allan Jardine
9243418e5f Fix examples: Pipelining - incorrect display if Ajax data retrieved and page not at the start of the retrieved block
* See thread 21402 for more information
2014-05-30 11:10:52 +01:00
Allan Jardine
3fd28eba98 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-05-30 11:10:36 +01:00
Allan Jardine
c1e40d7e10 Fix link to serverSide in selector-modifier.xml 2014-05-30 11:10:06 +01:00
Allan Jardine
56f59a3a33 Fix examples: Uuse a more selective operator for the class control in row details examples
* This fixes  DataTables/DataTables #336
2014-05-30 10:31:17 +01:00
Allan Jardine
3ea905201b Fix: Custom filter was running through the rows in reverse
* Originally this was done because it makes removing items a little bit
  easier with Array.splice(), however, it doesn't make any sense to go
  through the rows in reverse if there might be an interdependency
  between the rows.
* It has never been documented what order the rows are filtered in, so I
  think this is a safe change to make.
* I've also added the row display index to the parameters passed in
2014-05-27 15:42:20 +01:00
Allan Jardine
96b7ef9176 Fix: Hold the scrolling position if holding the draw position
* This fix was partly committed earlier by mistake [b7feaa2]
* The fix is simply to store the draw hold state and make use of it in
  the draw scroll callback.
2014-05-23 16:31:25 +01:00
Allan Jardine
501ed72cee Dev: Remove debug from last commit... 2014-05-23 16:31:09 +01:00
Allan Jardine
00a99a0037 Fix: IE8 events error
* In IE8 if the DataTables width calculation functions were being
  triggered DataTables would clone the table node and then do a jQuery
  $().remove() on the cloned node. This was bad in IE8 as it meant that
  on the remove the events that were attached tot he original table were
  removed as well as the ones on the clone table. IE8 must retain some
  kind of link between the original and clone nodes. Using jQuery's
  clone() method resolves this.
* See thread 21040 for more information
2014-05-23 16:30:53 +01:00
Allan Jardine
de1d6541ef Fix: Remove escaping of quotes for search input
* Previously the filter builder was created as a string, so we had to
  escape quotes, otherwise it could create invalid HTML. That is no
  longer the case as we are using jQuery DOM manipulation, so the escape
  is redundant and potentially harmful
* See thread 21197
2014-05-23 16:30:37 +01:00
Allan Jardine
d6b54b4cde Fix: Length menu language with wrapper element wasn't correctly populated
* Due to the manipulation of DOM elements rather than strings for the
  length list, the browser was cropping elements which were being cut
  short. Fix is to switch back to string manipulation, which can be done
  easily using the outerHTML property of the DOM element. This is
  supported in all browsers since Firefox 11, so happy to use it here.
* See thread 21170 for more information
2014-05-20 08:36:53 +01:00
Allan Jardine
36e1e86297 Fix examples: Typo in complex header example 2014-05-20 08:36:37 +01:00
Allan Jardine
7100d34d9f New: Give cell position information to dt-init columns.data and dt-init columns.render
* The two data handling functions for each column are now given a forth
  parameter if you are using them as a function. This new parameter
  gives index position information about the cell in question, as well
  as access to the settings object.
* This additional information allows abstraction functions to be created
  external to DataTables that can be reused for different columns, with
  those abstraction functions now having access to the information about
  the cell they are operating on. For example, you might have a number
  formatting function which can be reused, and it will determine what
  data to read based on the column index given.
* This additional information is required in order to be able to fully
  replace fnRender which was removed in DataTables 1.10.
* This fixes DataTables/DataTables #321
* Documentation updated, including an error fix for columns.data
2014-05-16 11:50:36 +01:00
Allan Jardine
4d1a25e176 Dev fix: Passing in order as a single array resulted in not being able
to order any other columns

* See thread 21073
2014-05-16 10:44:48 +01:00
Allan Jardine
d1b7c15426 Fix: Invalidation of DOM sourced rows caused a memory leak
* The error was that the registered cells array was growing on every
  call, so the processing took longer and the memory usage went up
* See thread 21063 for details
2014-05-16 10:12:41 +01:00
Allan Jardine
d8860b215e Fix: Support escaping objects with more than one dot 2014-05-15 15:49:07 +01:00
Allan Jardine
391e39266f Dev: Slight change for the styling of the tabs in the demos 2014-05-15 10:11:01 +01:00
Allan Jardine
48ae36e24c Dev: Syntaxlighting without a specific brush should still be enhanced from MD 2014-05-15 10:10:45 +01:00
Allan Jardine
46e2b0a0db Update: jQuery 1.11.1 2014-05-15 10:10:04 +01:00
Allan Jardine
f7a58ca938 Fix: Search via the API wasn't populating the search input
* This fixes DataTables/DataTables #323
2014-05-15 10:09:17 +01:00
Allan Jardine
a68379f7de Fix: Compatiblity with jQuery 1.7.0+
* jQuery before 1.8 didn't like append being given an array of mixed
  nodes and elements
* This fixes DataTables/DataTables #320
2014-05-15 10:08:56 +01:00
Allan Jardine
53090ad85a Update: jQuery to 1.11.1 2014-05-15 10:08:11 +01:00
Allan Jardine
6d10993421 Fix example: JS array data source had invalid HTML 2014-05-15 10:06:43 +01:00
Allan Jardine
d907cc6ceb Fix: dt-init sorting as 1D array didn't get indexing correct
* The sort handler was expecting to deal with a 2D array, so we always
  dropped into the single column first sort condition.
* See thread 20811 for more information.
2014-05-15 10:06:06 +01:00
Allan Jardine
77343b72cb Fix: Column ordering state saving was being flatten
* $.map will flatten the return array, which we do not want
2014-05-06 15:25:26 +01:00
Allan Jardine
3dc23c436d Moving on to 1.10.1 development 2014-05-06 15:25:13 +01:00
Allan Jardine
4feb8959d5 Test file 2014-05-01 11:50:51 +01:00
Allan Jardine
3cb0e3aa3f DataTables 1.10.0! 2014-05-01 11:45:37 +01:00
Allan Jardine
4550cc88bf Fix: Sorting disabled class wasn't being added to the header cells when
sorting is completely disabled
2014-05-01 11:44:47 +01:00
Allan Jardine
06b1195376 Fix: Backwards compatiblity for the old bEscapeRegex option - which has
now been replaced with the more sensible bRegex option
2014-05-01 11:44:13 +01:00
Allan Jardine
0406a47e6a Fix: Use synchronous processing for sorting when processing label is not
shown
2014-05-01 11:43:57 +01:00
Allan Jardine
7f7861b2e2 Fix: Scroller needs to know what the container node is during init 2014-05-01 11:43:39 +01:00
Allan Jardine
9669c962cc Fix: Error in the built SQL 2014-04-30 17:15:24 +01:00
Allan Jardine
f98586dd30 Dev fix: Change preventDefault location to be general
- See thread 16841
2014-04-29 15:58:17 +01:00
Allan Jardine
e82334589d New: sessionStorage and infinite state save option
- The stateDuration option has been updated to provide the ability to
  indicate if sessionStorage should be used rather than localStorage
  (set value to -1).

- Settings stateDuration to 0 also indicates that the duration is
  infinity.

- Parts of the state saving have been optimised for code size, so this
  commit actually reduces the min size by 32 bytes despite the new
  abilities.

- See thread 19572 for discussion on this
2014-04-29 10:32:55 +01:00
Allan Jardine
a23f09ae2d Fix: IE submits a form on keypress for sort
- See thread 16841
2014-04-28 16:56:39 +01:00
Allan Jardine
f63d04583c Fix thread 20096 - Visible column index selector
- The column index selector was broken by a previous commit (d9f416232).
- Fix also an error in the column selector whereby a result was being
  tested against itself
2014-04-28 09:36:11 +01:00
Allan Jardine
597b0c0b74 Moving on to rc.2 dev.
Not yet clear if there will be an RC2 or just move on to the release.
2014-04-28 09:11:08 +01:00
Allan Jardine
014a9c11dd Fix DataTables/DataTables #306 - jQuery UI class applied to all spans
- The class for sorting should only be applied to the sorting indicator
2014-04-28 09:10:47 +01:00
Allan Jardine
f5af4e28e0 Update: SQL exported compatible for MySQL, Postgres, SQLite and
SQLServer
2014-04-25 16:47:55 +01:00
Allan Jardine
82264d6325 DataTables 1.10.0-rc.1! 2014-04-25 16:43:53 +01:00
Allan Jardine
56481941b1 New: Add preAjax event so plug-in authors can add Ajax params 2014-04-25 16:43:31 +01:00
Allan Jardine
78b043d234 Fix: Custom length menu was broken
- If you provided your own <select> list for the lenght language option,
  DataTables would still append its own and ignore your custom one

- See thread 20548
2014-04-25 16:43:02 +01:00
Allan Jardine
505a2b37a3 Dev: Minor changes to reduce code size.
- This commit trims about 400 bytes off the min library size
2014-04-25 16:42:36 +01:00
Allan Jardine
54e93323b4 Fix: Responsive CSS - two collapsing stages for the control elements
- The filter and page length controls take up a lot less room, so they
  can collapse later
2014-04-25 13:27:47 +01:00
Allan Jardine
eb74bc591a Dev: Markdown update - add a class to lists and tables so we know when
they have been generated by markdown. Must easier for styling
2014-04-25 13:27:28 +01:00
Allan Jardine
80e748cc11 Fix: Accessiblity - Add role=row attribute to table rows
- Feedback from James Craig on improving the accessiblity of DataTables.
  Since the `role=grid` option is added to the DataTables table, we
  should also add `role=row` to the rows in the table so the browsers
  can see them correctly. As James notes, it is debatable if this is
  needed or not but it is required in current Chrome and Webkit.

- Webkit do now allow roles to be optional in the nighties - see:
  https://bugs.webkit.org/show_bug.cgi?id=131819 . Once Apple deploy
  this in a Safari update, and Chrome also deploy support, I think this
  should be removed from DataTables core, since it will no longer be
  needed in the latest browsers, and manipulating the DOM can hit
  performance a bit.
2014-04-22 09:58:32 +01:00
Allan Jardine
7ab49af0b6 Fix: Selector couldn't be given as an API instance with indexes
- It is useful to be able to filter row indexes by a condition and then
  operate on the resulting array of indexes, but before the selector
  would only itterate over real arrays. So if you passed is an API
  instance with the result set being the indexes to delete, it wouldn't
  work!

- Fix is to loop over anything which has a `length` property

- Thread 20572
2014-04-22 09:58:13 +01:00
Allan Jardine
d6a5b7c729 Fix: Accessibility improvements
- Remove the aria-relevant from the info text to use the default,
  otherwise it was reading information that isn't very useful
- Change info text role to `status`
- Remove `role=row` from header - this is experimental and might change.
  Might need it on this row and all rows in the table
- Based on feedback from James Craig (thanks!)
2014-04-18 09:39:18 +01:00
Allan Jardine
22161b3224 Fix: Legacy API fnGetData with no parameters was flattening the return
array
2014-04-18 08:45:29 +01:00
Allan Jardine
950110e1fd Fix: Don't redraw the table for page change when no change needed
- If you were to click the 'previous' button when on the first page, the
  table would redraw - that's the easiest manifestation of this bug to
  see. There is no need to redraw the table when the paging hasn't
  changed, so don't.

- This fixes DataTables/DataTables #304
2014-04-18 08:27:51 +01:00
Allan Jardine
22023595e8 Fix: Keyboard navigation of the paging control
- Because DataTables is destroying and creating elements for the paging
  control, focus is lost when navigating via keyboard. This is a real
  pain when trying to operate DataTables that way! Fix is to refocus on
  the new element.
2014-04-17 09:26:28 +01:00
Allan Jardine
3fb997f0b8 Fix: grid ARIA role should be on the table, not the container
- Feedback from James Craig - author of WAI-ARIA specification.
2014-04-17 09:26:11 +01:00
Allan Jardine
b53ac91310 Fix: Ajax data wasn't being sent for non-server-side processing
- If you used client-side processing ajax, the parameter passed into
  _fnBuildAjax is an array, needed for the old 1.9 compatiblity, but the
  ajax wasn't transforming this into a data object and then sending it
  to the server. The fix is to check if the data passed in is an array
  or not - if so, transform it to an object
2014-04-16 16:27:56 +01:00
Allan Jardine
311cc96572 Dev: Renaming demo database table for naming consistency 2014-04-16 16:27:38 +01:00
Allan Jardine
f6a05f5a46 Updated: SQL exported compatible for MySQL, Postgres, SQLite and
SQLServer
2014-04-16 16:27:22 +01:00
Allan Jardine
f51f88429d Fix: Column sorting classes might not be applied correctly
- If you use multiple column definations such that a columns' sorting
  options are initially disabled and then enabled, the sorting classes
  for the header were not being applied correctly.

- The fix is to always assign classes based on the most up-to-date
  information for the column.

- This fixes DataTables/DataTables #303
2014-04-15 09:02:55 +01:00
Allan Jardine
efa8ff5b71 Fix: jQUery object will fail as a column selector
- This fixes #2
2014-04-14 09:42:34 +01:00
Allan Jardine
f7e9a20324 Dev fix: JSHint error from last commit 2014-04-14 09:42:14 +01:00
Allan Jardine
3ce42db432 Fix: Plug-in ordering didn't work on initial order
- The resolution of unknown sorting types was being done after the
  sorting structure array of objects was being calculated. As such, a
  string sort was always being done in the first instance!

- This fixes thread 20433
2014-04-14 09:28:36 +01:00
Allan Jardine
261f2c9eb0 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-04-11 09:15:20 +01:00
Allan Jardine
464ce6a32a Dev: Markdown updates
- In a fenced code block, need to encode the HTML elements. However, the
  HTML was being detected and saved first. Run the fencer first.

- Type links updated
2014-04-11 09:15:02 +01:00
Allan Jardine
0ea30f9ba7 New: CommonJS support
- This fixes DataTables/DataTables #299
2014-04-11 09:11:13 +01:00
Allan Jardine
56e6f38911 Fix: Destroy error if the table has been destored completely by the user
before calling destory() (i.e. overwriting with HTML)
2014-04-11 09:10:21 +01:00
Allan Jardine
757dbc5524 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-04-11 09:09:47 +01:00
Allan Jardine
bff1276ab6 Dev: PHP output support for markdown, as it is used on the site in a few
places
2014-04-11 09:09:24 +01:00
Allan Jardine
63beec6486 Fix: DataTables/DataTables #281 - Invalidated DOM rows and hidden columns
- When invalidating a DOM row, DataTables wasn't taking into account the
  fact that the columns in the row might be hidden. This means that the
  array of data read is shortened by the number of hidden columns, and
  thus the data is corrupted.

- Fix is to read from the known cells if the row already exists
2014-04-02 14:21:46 +01:00
Allan Jardine
3516626d9a Dev: PHP output support for markdown, as it is used on the site in a few
places
2014-04-02 14:21:28 +01:00
Allan Jardine
683414daba Dev: Add SQL syntax highlighting 2014-04-02 14:21:06 +01:00
Allan Jardine
85111b709c Dev: Plain syntax highlighting 2014-04-02 14:20:46 +01:00
Allan Jardine
6cac556b6a Dev fix: Converting camelCase to hungarian was broken 2014-04-01 13:43:00 +01:00
Allan Jardine
1a0551fd2c Dev: Markdown update for Editor and typo 2014-04-01 11:08:10 +01:00
Allan Jardine
1a5e32295a Fix: When extending the defaults using camelCase, objects didn't work
- Issue here was that when doing the camelCase to hungarian conversion
  on objects, the user object was copying over the hungarian default.
  This meant that parameters were lost and things broke! The fix is to
  decend into the object

- See thread 20233 for the original report
2014-04-01 11:07:47 +01:00
Allan Jardine
09bf9b200c Fix DataTables/DataTables #291 - non-string data support for non-'.' dec
numbers
2014-03-28 08:21:54 +00:00
Allan Jardine
6a033ad09b Fix: HTML sorting formatter should cope with null data 2014-03-26 16:30:51 +00:00
Allan Jardine
af7f2780f4 New: Smart filtering upgraded to support quoted exact match
- DataTables' smart filtering now has the ability to search for an exact
  string, in the given order, over multiple words. This is done by
  providing the exact match search string in quotes - for example:

    Angela "Cheif Exec" London

  Will match three terms - `Angela`, `Cheif Exec` and `London`. Those
  three terms will be matched in any order.

- This matches the search behaviour that we all know and love in Google!

- It can be disabled along with the rest of DataTables' smart filtering
  using the `smart` option.

- This enhancement comes courtesy of Barry Keepence. Original forum
  thread: http://datatables.net/forums/discussion/16250/. Thanks!
2014-03-25 09:49:40 +00:00
Allan Jardine
c5058c36e6 Fix: Extending objects in the API could cause scope errors over multiple tables
- See thread 20075 for the original report

- Basically the issue here was that the object being used for the API
  extension on objects (e.g. `table.ajax` is an object) the object was
  not unique to each API instance, so it was being shared between
  instances and as a result, whatever instance was created last, would
  win!

- Fix is to use a new object each time.
2014-03-24 15:16:32 +00:00
Allan Jardine
fedec2b479 Fix: Inverted logic for column.index() - 20021 2014-03-24 15:16:16 +00:00
Allan Jardine
9fda4f3a3d Fix: Multiple column options for a single column could cause custom type
to be lost

- Without a check on the `sType` option, if there was multiple column
  defintations for a single column, the custom sType could be lost
2014-03-24 15:16:00 +00:00
Allan Jardine
6924ccb237 Update: Update sorting plug-in examples to use enumerated data
- Th old comma as a decimal place plug-in isn't needed anymore since
  DataTables now has that ability built in using the `thousands` and
  `decimal` options
2014-03-24 15:15:44 +00:00
Allan Jardine
e89310fbcf Dev fix: fnOpen should return the child node, not the host row 2014-03-24 15:15:26 +00:00
Allan Jardine
f5103cd6c4 Fix DataTables/DataTables #289 - Filtering can break with \n
- The removal on the \n\r characters should not be dependent upon there
  being HTML enties detected in the string
2014-03-21 08:13:38 +00:00
Allan Jardine
b2a3546402 Fix: Row details show and hide methods should return this 2014-03-20 15:28:58 +00:00
Allan Jardine
75d28cad1c Fix: fnOpen should return a node, not undefined 2014-03-20 15:28:44 +00:00
Allan Jardine
67a2b18ca3 Fix: Memory leaks from not removing listeners on destroy
- DataTables uses the `DT` namespace for events internally and will
  remove them automatically on destroy, but `dt` is used for public
  events. As such, the public events used internally should use `.dt.DT`
  to ensure that the listener works as expected, but also so that the
  destroy call will remove these listeners
2014-03-20 15:19:42 +00:00
Allan Jardine
c625f2f525 Fix: Destroy should use detatch() not remove()
- This is to preserve user added listeners on destroy. If they want to
  remove their listeners to prevent memory leaks, then they should do
  so. But DataTables won't do it for them, as actually, you might want
  to keep your event listeners!
2014-03-20 15:19:26 +00:00
Allan Jardine
90870af5ac Fix: fnServerData compatiblity for 1.9-
- fnServerData's second parameter should be an array of objects with
  name/value pairs. It was being passed through as the more modern
  object, but fnServerData is only present for compatiblity with 1.9 and
  should the original format should be retained. This is done with a
  simple map function
2014-03-19 19:33:49 +00:00
Allan Jardine
b5228162a7 Fix DataTables/TableTools #46 - fnGetData should return null if row not
found

- The old fnGetData method would return null, rather than undefined for
  some reason if a given row was not found in the DataTable. The new
  wrapper api for the legacy interface should do the same.
2014-03-19 10:53:56 +00:00
Allan Jardine
d271fac5b6 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-03-19 10:53:44 +00:00
Allan Jardine
ecceb7a2ca Fix DataTables/DataTables #288 - Column search wasn't being used 2014-03-19 10:53:33 +00:00
Allan Jardine
0dab1e20de Fix: Only report a general Ajax error when request is complete
- Previously if you cancelled an Ajax request, or the browser did (for
  example following a link) the error handler would be entered and show
  an alert. This just ensures that the request is complete before
  showing an error
2014-03-19 10:53:21 +00:00
Allan Jardine
c0c1db422f Fix: Legacy API error when using fnGetNodes on an empty table 2014-03-14 14:06:30 +00:00
Allan Jardine
c1841e6eff Dev: Updates for Editor development
Update: Show software tag in the markdown links for the documentation
2014-03-14 12:33:02 +00:00
Allan Jardine
e948a3682a Update: Improved responsivness for examples CSS 2014-03-14 12:32:46 +00:00
Allan Jardine
3e33795877 New: Responsive CSS for core styles
- On smaller screens the table controls (length, search, info and
  paging) will show as stacked now.
2014-03-14 12:32:27 +00:00
Allan Jardine
fd857d4864 Fix: On Ajax error hide the processing display 2014-03-14 12:32:06 +00:00
Allan Jardine
ce54ab1ea5 Fix: ajax.reload() wasn't showing the processing display 2014-03-14 12:31:43 +00:00
Allan Jardine
1d0a155226 Fix: Selector was too selective for filtering in old browsers 2014-03-14 12:31:19 +00:00
Allan Jardine
302f0be0ac Fix: Ordering informationw as being sent in SSP Ajax when ordering disabled
- See thread 19860 for details.
2014-03-07 11:48:23 +00:00
Allan Jardine
9dc81c8dd3 Dev fix: Sort classes for cells were broken in beta.3-dev
- Commit 515761905c had removed the `_fnSortingClasses` call for a
  client-side processing table without defered rendering.
2014-03-07 11:48:08 +00:00
Allan Jardine
13c766d1de Fix: Example JS should use min-height for info content 2014-03-07 11:47:17 +00:00
Allan Jardine
4b83b28ace Fix: Fix display issues with HTML5 attributes example 2014-03-07 11:46:26 +00:00
Allan Jardine
34c18509d8 Update: The _ option for columns.render as an object is optional now
- Previously when using columns.render as an object, you had to supply
  an `_` option which was the fallback. However, I've now made it so
  that if there is no `_` option it will just use the raw data from
  `columns.data`
2014-03-07 11:46:08 +00:00
Allan Jardine
e45f19eb60 New: Number formating helper
- I've come accross a lot of cases recently where numbers need to be
  formatted for display, so I wanted to introduce rendering helpers for
  DataTables to make this easier. Only one helper introduced here -
  `$.fn.dataTable.render.number()` which will return an object that can
  be used by `columns.render` to format "raw" numbers.
2014-03-07 11:45:53 +00:00
Allan Jardine
92e380c778 New: ajax.params() method to get the data for the last Ajax submit 2014-03-06 10:05:46 +00:00
Allan Jardine
c32f4c032a Fix: Child rows which were given as TR elements were not being added
- The child row feature of DataTables should be able to take a `tr`
  element and add that directly as a child. That wasn't working due to a
  logic error before.
2014-03-06 08:47:42 +00:00
Allan Jardine
6a568a7542 Fix: When invalidating data source, check the cells exist first
- Fixes the issue highlighted in thread 19822
2014-03-05 16:54:56 +00:00
Allan Jardine
ccc4f99c54 Dev: Remove debug 2014-03-05 16:54:21 +00:00
Allan Jardine
9a3bdacce6 Fix: IE8 - Settings as an API selector needs to return as an array 2014-03-04 08:53:08 +00:00
Allan Jardine
39828e8bab Fix: Incorrect use of offsetHeight for scroll collapse 2014-03-04 08:52:53 +00:00
Allan Jardine
876eb29b9b Update - examples: Pipeline example now registers a clearPipeline()
method
2014-03-04 08:52:37 +00:00
Allan Jardine
10634dd733 Update - example: Add method option to SSP pipeline 2014-03-04 08:52:21 +00:00
Allan Jardine
8186f9378c Update - example: Add data option to SSP pipeling
- The piplining example didn't have any method to submit additional data
  with the Ajax request, other than to modify the library function.

- This commit adds a `data` option which provides the same functionality
  as the `ajax.data` option in DataTables - i.e. it can be an object or
  function
2014-03-04 08:52:05 +00:00
Allan Jardine
c5d86ea157 Dev: Change the viewport meta tag to not fix the width 2014-03-04 08:51:50 +00:00
Allan Jardine
3330ed6783 Update - examples: Better support for iPad in potrait 2014-03-04 08:51:34 +00:00
Allan Jardine
55e965de0a Update - examples: Better responsive CSS handling
- Drop the multi-column layout when using devices with smaller screen
  space
2014-03-04 08:51:19 +00:00
Allan Jardine
a9687655ea Fix: Cell selector, when operating as a jQuery selector needs to return
an array, not a jQuery object - otherwise IE8- throws an error

- This fixes DataTables/DataTables #262
2014-03-03 10:19:21 +00:00
Allan Jardine
7c8e10d0dd Fix - examples: The API row details example wasn't showing the close
icon due to an incorrect class name
2014-03-03 10:18:02 +00:00
Allan Jardine
dcbea43baf New: column().visible() and columns().visible() now act as getters or
setters.

- See discussion thread 19653
2014-02-25 09:23:08 +00:00
Allan Jardine
4834aa26be Fix: If you had a column which has columns.visible:false set on it, it
would be removed from the array of data passed through to the custom
filtering functions. This would cause indexes to misalign.

- The fix is to simply pass in the data filter array that has already
  been computed, as that is 1:1 for the display. Also added the raw data
  source object for the row for completeness and a bit of a code tidy
  up.

- This will cause a bit of an indexing issue, if you have bVisible:false
  set, but this is certainly a bug that had to be fixed - it just didn't
  make sense as it was, and went against the documentation!

- See thread 19593 for more information
2014-02-21 17:20:32 +00:00
Allan Jardine
a14bfa29fb New: cell-selector type can now 'self-select' by supporting the index
objects that it uses internally for cells.
2014-02-21 17:20:20 +00:00
Allan Jardine
23c9580d01 Updating version to 1.10.0-beta.3.dev 2014-02-19 10:08:06 +00:00
Allan Jardine
7227353a8f Fix DataTables/DataTables #275 - Sort classes weren't being applied to
newly created elements

- The fix i've put in is basically the same as what DataTables 1.9-
  used. I had tried to opitmise it a little, but it wasn't working for
  newly created cells. I still think this can be optimised, but for the
  moment, this is at least allows it to work.
2014-02-19 10:07:21 +00:00
177 changed files with 12079 additions and 12228 deletions

View File

@@ -1 +1 @@
0a10f0a40ff1c6fa3b8d5c8e2e5abab318de88d2
07dbb4d0dfaff7a518bb30d671446ea246ca76a3

2
.gitignore vendored
View File

@@ -2,8 +2,6 @@ extras
extensions
docs
cdn
media/js/jquery.dataTables.min.js
media/css/jquery.dataTables.min.css
media/css/jquery.dataTables_themeroller.min.css
.DS_Store
Plugins

View File

@@ -1,9 +1,18 @@
# Contributing
# Support requests
Please direct support requests to the [DataTables forums](https://datatables.net/forums), ensuring that you provide a link to a test page that shows the problem and a full description of the issue. If you require urgent help, [priority support](https://datatables.net/support) is available.
# Contributing code
If you are thinking of contributing code to DataTables, first of all, thank you! All fixes, patches and enhancements to DataTables are very warmly welcomed. In order to keep thing manageable, there are a number of guidelines that should be followed in order to ensure that your modification is included in DataTables as quickly as possible:
1. Make contributions in the DataTables/DataTablesSrc repo. Changes to the built files in the built repo (DataTables/DataTables) will not be accepted since they would be overwritten by the next build!
2. Follow the style of the code in the existing files. DataTables doesn't have a coding standards document, but simple common sense of following the same style as in the existing files is ideal. For example use tabs not spaces (as you will see all source files use tabs).
2. Follow the style of the code in the existing files. They might not be to everyone's tastes, but consistency is key for a mature project like DataTables. DataTables doesn't have a coding standards document, but simple common sense of following the same style as in the existing files is ideal. For example use tabs not spaces (as you will see all source files use tabs).
3. Link to a test page showing the bug you are fixing or the feature you are adding. This allows to me to quickly identify what is being changed and why. Don't worry about being verbose in pull requests - its much better to know exactly what is changing and why!
4. DataTables is a large and complex project and it isn't always possible or suitable to pull in every suggested change. Please don't be offended if a pull request is not merged in, it will explained why not if this is the case. Also it isn't always possible to fully check and test pull requests as quickly as I would like due to other commitments. Again this is no reflection on your pull request, just the busy life that we all lead! If you have any questions about your potential contribution and its place in the DataTables project structure, please ask ahead of time in the [DataTables forums](//datatables.net/forums).
5. Pull requests will only be accepted if you acknowledge that your contribution is offered under and will be made available under the project's existing license (MIT). If your initial pull request doesn't explicitly acknowledge this I'll ask before it is pulled in.

View File

@@ -13,14 +13,7 @@ To meet this goal, DataTables is developed with two distinct groups of users in
## Installation
In most cases, to use DataTables all you need to do is include jQuery, the DataTables Javascript and DataTables CSS files in your HTML page:
```html
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10-beta.1/js/jquery.dataTables.js"></script>
```
In most cases, to use DataTables all you need to do is include jQuery, the DataTables Javascript and DataTables CSS files in your HTML page. See the [DataTables manual](http://datatables.net/manual/installation#Including-Javascript-/-CSS) for details on how to do this using the latest version of DataTables.
## Usage

View File

@@ -1,11 +1,32 @@
{
"name": "datatables",
"version": "1.10.0-beta.2",
"version": "1.10.9",
"main": [
"media/js/jquery.dataTables.js",
"media/css/jquery.dataTables.css"
"media/css/jquery.dataTables.css",
"media/images/sort_asc.png",
"media/images/sort_asc_disabled.png",
"media/images/sort_both.png",
"media/images/sort_desc.png",
"media/images/sort_desc_disabled.png"
],
"dependencies": {
"jquery": ">=1.7.0"
}
},
"license": "MIT",
"keywords": [
"jquery",
"datatables",
"table",
"javascript",
"library"
],
"ignore": [
"/.*",
"examples",
"media/unit_testing",
"composer.json",
"dataTables.jquery.json",
"package.json"
]
}

View File

@@ -1,6 +1,6 @@
{
"name": "datatables/datatables",
"version": "1.10.0-beta.2",
"version": "1.10.9",
"description": "DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.",
"homepage": "http://www.datatables.net/",
"author": "SpryMedia",

View File

@@ -1,6 +1,6 @@
{
"name": "DataTables",
"version": "1.10.0-beta.2",
"version": "1.10.9",
"description": "DataTables enhances HTML tables with the ability to sort, filter and page the data in the table very easily. It provides a comprehensive API and set of configuration options, allowing you to consume data from virtually any data source.",
"homepage": "http://datatables.net/",
"docs": "http://datatables.net/",

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Column rendering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
@@ -42,20 +43,17 @@ $(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=
"//datatables.net/reference/option/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> which can be used to process the content of each cell
before the data is used. <a href="//datatables.net/reference/option/columns.render"><code class=
"option" title="Initialisation option">columns.render</code></a> has a wide array of options available
to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can
be used very simply to manipulate the content of a cell, as shown here.</p>
<p>Each column has an optional rendering control called <a href="//datatables.net/reference/option/columns.render"><code class="option" title=
"DataTables initialisation option">columns.render</code></a> which can be used to process the content of each cell before the data is used. <a href=
"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> has a wide array of
options available to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very simply to manipulate the
content of a cell, as shown here.</p>
<p>This example shows the person's age combined with their name in the first column, hiding the age
column. This technique can be useful for adding links, assigning colours based on content rules and any
other form of text manipulation you require.</p>
<p>This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links,
assigning colours based on content rules and any other form of text manipulation you require.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -551,9 +549,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;columnDefs&quot;: [
{
// The `data` parameter refers to the data for the cell (defined by the
@@ -569,46 +566,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -631,17 +622,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -655,8 +644,10 @@ $(document).ready(function() {
<li class="active"><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -672,14 +663,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -697,21 +689,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -742,8 +731,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -751,10 +739,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -762,14 +748,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,15 +3,16 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Complex headers (rowspan / colspan)</title>
<title>DataTables example - Complex headers with column visibility</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columnDefs": [ {
"visible": false,
"targets": -1
@@ -34,26 +35,22 @@ $(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 with column visibility</span></h1>
<div class="info">
<p>Complex headers (using colspan / rowspan) can be used to group columns of similar information in
DataTables, creating a very powerful visual effect.</p>
<p>Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used to group columns of similar information in DataTables, creating a very powerful
visual effect.</p>
<p>In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when
working with hidden columns. The colspan and rowspan attributes for each cell are automatically
calculated and rendered on the page for you. This allows the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title=
"Initialisation option">columns.visible</code></a> option and <a href=
"//datatables.net/reference/api/column().visible()"><code class="api" title=
"API method">column().visible()</code></a> method to take into account rowspan / colspan cells, drawing
the header correctly.</p>
<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code>s into account when working with hidden columns. The
<code>colspan</code> and <code>rowspan</code> attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href=
"//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account
<code>rowspan</code> / <code>colspan</code> cells, drawing the header correctly.</p>
<p>Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables
can use that cell to detect the column and use it to apply ordering.</p>
<p>Note that each column must have at least one unique cell (i.e. a cell without <code>colspan</code>) so DataTables can use that cell to detect the column and use
it to apply ordering.</p>
<p>The example below shows a header spanning multiple cells over the contact information, with one of
the columns that the span covers being hidden.</p>
<p>The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -553,9 +550,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;columnDefs&quot;: [ {
&quot;visible&quot;: false,
&quot;targets&quot;: -1
@@ -563,46 +559,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -625,17 +615,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -649,9 +637,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li class="active"><a href="./complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li class="active"><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -667,14 +656,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -692,21 +682,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -737,8 +724,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -746,10 +732,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -757,14 +741,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Setting defaults</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,21 +12,21 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$.extend( $.fn.dataTable.defaults, {
$.extend( true, $.fn.dataTable.defaults, {
"searching": false,
"ordering": false
} );
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
@@ -35,19 +36,15 @@ $(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
defaults to common values (for example you might want to set <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> to a common value so all tables get the same layout). This can
be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same
parameters as the DataTables initialisation object, but in this case you are setting the default for
all future initialisations of DataTables.</p>
<p>When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set
<a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> to a common value so all tables get
the same layout). This can be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same parameters as the DataTables
initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
<p>This example shows the searching and ordering features of DataTables being disabled by default,
which is reflected in the table when it is initialised.</p>
<p>This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -543,57 +540,50 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.extend( $.fn.dataTable.defaults, {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.extend( true, $.fn.dataTable.defaults, {
&quot;searching&quot;: false,
&quot;ordering&quot;: false
} );
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -616,17 +606,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -640,8 +628,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li class="active"><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -657,14 +647,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -682,21 +673,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -727,8 +715,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -736,10 +723,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -747,14 +732,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multiple table control elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -19,7 +20,7 @@
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -27,7 +28,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
} );
} );
@@ -39,20 +40,18 @@ $(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=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> initialisation parameter to move DataTables features around the
table to where you want them. In addition to this, you can also use <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> to create multiple instances of these table controls. Simply
include the feature's identification letter where you want it to appear, as many times as you wish, and
the controls will all sync up (note that obviously the table ('t') should be included only once).</p>
<p>As is described by the basic DOM positioning example you can use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> initialisation parameter to move DataTables features around the table to where you want them.</p>
<p>This is shown in the demo below where for four key build-in features are duplicated above and below
the table.</p>
<p>In addition to this, you can also use <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> to create multiple instances of these table controls. Simply include the feature's identification letter where
you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (<code class="string" title="String">t</code>)
should be included only once).</p>
<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -548,32 +547,28 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;dom&quot;: '&lt;&quot;top&quot;iflp&lt;&quot;clear&quot;&gt;&gt;rt&lt;&quot;bottom&quot;iflp&lt;&quot;clear&quot;&gt;&gt;'
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">div.dataTables_length {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_length {
padding-left: 2em;
}
div.dataTables_length,
@@ -582,25 +577,22 @@ $(document).ready(function() {
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -623,17 +615,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -646,10 +636,11 @@ $(document).ready(function() {
<li><a href="./dt_events.html">DataTables events</a></li>
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li class="active"><a href="./dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li class="active"><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -665,14 +656,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -690,21 +682,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -735,8 +724,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -744,10 +732,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -755,14 +741,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom toolbar elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -17,7 +18,7 @@
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -25,7 +26,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"dom": '<"toolbar">frtip'
} );
@@ -39,26 +40,21 @@ $(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
use of this mechanism as well to insert your own custom elements. In this example a <code class="tag"
title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a>, with which HTML is inserted to create the toolbar. You could
put whatever HTML you want into the toolbar and add event handlers etc.</p>
<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom
elements. In this example a <code class="tag" title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>, with which HTML is inserted to create the
toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.</p>
<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in
API available, which can be used to create plug-ins which are used in a table by a single character
reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> option (like the built in option of <code class="string" title=
"String">f</code> refers to 'filtering input', you could have an <code class="string" title=
"String">F</code> option which creates your own filtering input control, custom to your app).</p>
<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which
are used in a table by a single character reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"DataTables initialisation option">dom</code></a> option (like the built in option of <code class="string" title="String">f</code> refers to 'filtering input', you
could have an <code class="string" title="String">F</code> option which creates your own filtering input control, custom to your app).</p>
<p><a href="https://datatables.net/extras/tabletools">TableTools</a> is a feature plug-in for
DataTables which adds buttons into a toolbar for a table, which controls such as copy to clipboard,
export and custom buttons.</p>
<p><a href="https://datatables.net/extras/tabletools">TableTools</a> is a feature plug-in for DataTables which adds buttons into a toolbar for a table, which
controls such as copy to clipboard, export and custom buttons.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -554,57 +550,50 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;dom&quot;: '&lt;&quot;toolbar&quot;&gt;frtip'
} );
$(&quot;div.toolbar&quot;).html('&lt;b&gt;Custom tool bar! Text/images etc.&lt;/b&gt;');
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">.toolbar {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">.toolbar {
float: left;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -627,17 +616,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -651,8 +638,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -668,14 +657,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -693,21 +683,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -738,8 +725,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -747,10 +733,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -758,14 +742,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DataTables events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -29,7 +30,7 @@ $(document).ready(function() {
.on( 'order.dt', function () { eventFired( 'Order' ); } )
.on( 'search.dt', function () { eventFired( 'Search' ); } )
.on( 'page.dt', function () { eventFired( 'Page' ); } )
.dataTable();
.DataTable();
} );
@@ -39,25 +40,20 @@ $(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
(although note that the namespace <code>dt</code> <em>must</em> be used), allowing your code to perform
custom actions when these events occur.</p>
<p>DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace <code>dt</code> <em>must</em>
be used), allowing your code to perform custom actions when these events occur.</p>
<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to
prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables <a href=
"//datatables.net/reference/api/on()"><code class="api" title="API method">on()</code></a> method can
be used like the jQuery <code>on()</code> method, but will automatically append the <code>dt</code>
namespace if required.</p>
<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to prevent conflicts arising with other jQuery plug-ins which also
fire events. The DataTables <a href="//datatables.net/reference/api/on()"><code class="api" title="DataTables API method">on()</code></a> method can be used like
the jQuery <code>on()</code> method, but will automatically append the <code>dt</code> namespace if required.</p>
<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class=
"event" title="Event">order</code></a>, <a href="//datatables.net/reference/event/search"><code class=
"event" title="Event">search</code></a> and <a href=
"//datatables.net/reference/event/page"><code class="event" title="Event">page</code></a> events by
adding a notification that the event fired to an element on the page to show that they have indeed
fired.</p>
<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a>, <a href=
"//datatables.net/reference/event/search"><code class="event" title="DataTables event">search</code></a> and <a href=
"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page</code></a> events by adding a notification that the event fired to an
element on the page to show that they have indeed fired.</p>
</div>
<div id="demo_info" class="box"></div>
@@ -555,8 +551,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var eventFired = function ( type ) {
var n = $('#demo_info')[0];
n.innerHTML += '&lt;div&gt;'+type+' event - '+new Date().getTime()+'&lt;/div&gt;';
@@ -567,49 +562,43 @@ $(document).ready(function() {
.on( 'order.dt', function () { eventFired( 'Order' ); } )
.on( 'search.dt', function () { eventFired( 'Search' ); } )
.on( 'page.dt', function () { eventFired( 'Page' ); } )
.dataTable();
.DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -632,17 +621,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -656,8 +643,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -673,14 +662,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -698,21 +688,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -743,8 +730,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -752,10 +738,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -763,14 +747,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DOM / jQuery events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,11 +20,11 @@
$(document).ready(function() {
$('#example').dataTable();
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
alert( 'You clicked on '+name+'\'s row' );
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );
@@ -34,16 +35,16 @@ $(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
aware that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only
the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when
working with events.</p>
<p>Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM
as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with
events.</p>
<p>One of the best ways of dealing with this is through the use of delegated events with jQuery's
<code>on</code> method, as shown in this example.</p>
<p>One of the best ways of dealing with this is through the use of delegated events with jQuery's <code>on</code> method, as shown in this example. This example
also uses the DataTables <a href="//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to
retrieve information about the selected row - the row's data so we can show it in the <code>alert</code> message in this case.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -539,56 +540,49 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
alert( 'You clicked on '+name+'\'s row' );
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -611,17 +605,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -635,8 +627,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -652,14 +646,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,21 +672,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -722,8 +714,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -731,10 +722,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -742,14 +731,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Footer callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -13,7 +14,7 @@
th { white-space: nowrap; }
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -21,9 +22,10 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api();
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
@@ -33,7 +35,7 @@ $(document).ready(function() {
};
// Total over all pages
var total = api
total = api
.column( 4 )
.data()
.reduce( function (a, b) {
@@ -41,12 +43,12 @@ $(document).ready(function() {
} );
// Total over this page
var pageTotal = api
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
@@ -63,22 +65,18 @@ $(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
(<a href="//datatables.net/reference/option/headerCallback"><code class="option" title=
"Initialisation option">headerCallback</code></a> and <a href=
"//datatables.net/reference/option/footerCallback"><code class="option" title=
"Initialisation option">footerCallback</code></a>), it is possible to perform some powerful and useful
data manipulation functions, such as summarising data in the table.</p>
<p>Through the use of the header and footer callback manipulation functions provided by DataTables (<a href=
"//datatables.net/reference/option/headerCallback"><code class="option" title="DataTables initialisation option">headerCallback</code></a> and <a href=
"//datatables.net/reference/option/footerCallback"><code class="option" title="DataTables initialisation option">footerCallback</code></a>), it is possible to
perform some powerful and useful data manipulation functions, such as summarising data in the table.</p>
<p>The example below shows a footer callback being used to total the data for a column (both the
visible and the hidden data) using the <a href=
"//datatables.net/reference/api/column().data()"><code class="api" title=
"API method">column().data()</code></a> API method and <a href=
"//datatables.net/reference/api/column().footer()"><code class="api" title=
"API method">column().footer()</code></a> for writing the value into the footer.</p>
<p>The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the <a href=
"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> API method and <a href=
"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()</code></a> for writing the value into the
footer.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -512,11 +510,11 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;footerCallback&quot;: function ( row, data, start, end, display ) {
var api = this.api();
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
@@ -526,7 +524,7 @@ $(document).ready(function() {
};
// Total over all pages
var total = api
total = api
.column( 4 )
.data()
.reduce( function (a, b) {
@@ -534,12 +532,12 @@ $(document).ready(function() {
} );
// Total over this page
var pageTotal = api
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
@@ -549,46 +547,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">th { white-space: nowrap; }</code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">th { white-space: nowrap; }</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -611,17 +603,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -635,8 +625,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -652,14 +644,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,21 +670,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -722,8 +712,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -731,10 +720,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -742,14 +729,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,15 +3,16 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML5 data-* attributes</title>
<title>DataTables example - HTML5 data-* attributes - cell data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
@@ -29,33 +30,26 @@ $(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 - cell data</span></h1>
<div class="info">
<p>DataTables can use different data for different actions (display, ordering and searcgubg) which can
be immensely powerful for transforming data in the display to be intuitive for the end user, while
using different, or more complex data, for other actions. For example, if a table contains a formatted
telephone number in the format <code>xxx-xxxx</code>, intuitively a user might search for the number
but without a dash. Using orthogonal data for searching allows both forms of the telephone number to be
used, while only the nicely formatted number is displayed in the table.</p>
<p>DataTables can use different data for different actions (display, ordering and searching) which can be immensely powerful for transforming data in the display
to be intuitive for the end user, while using different, or more complex data, for other actions. For example, if a table contains a formatted telephone number in
the format <code>xxx-xxxx</code>, intuitively a user might search for the number but without a dash. Using orthogonal data for searching allows both forms of the
telephone number to be used, while only the nicely formatted number is displayed in the table.</p>
<p>One method in which DataTables can obtain this orthogonal data for its different actions is through
<a href=
"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">
custom HTML5 data attributes</a>. DataTables will automatically detect four different attributes on the
HTML elements:</p>
<p>One method in which DataTables can obtain this orthogonal data for its different actions is through <a href=
"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom HTML5 data attributes</a>. DataTables
will automatically detect four different attributes on the HTML elements:</p>
<ul>
<ul class="markdown">
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
</ul>
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In
this case the first column has been formatted so the first name has abbreviated, but the full name is
still searchable (search for "Bruno" for example). Additionally, although the last column contains
non-numeric data in it (<code>/m</code>) the column will correctly order numerically as the
<code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric
data.</p>
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In this case the first column has been formatted so the first name
has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it,
the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -87,456 +81,456 @@ $(document).ready(function() {
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td data-order="1303682400">Mon 25th Apr 11</td>
<td data-order="320800">$320,800/m</td>
<td data-order="1303686000">Mon 25th Apr 11</td>
<td data-order="320800">$320,800/y</td>
</tr>
<tr>
<td data-search="Garrett Winters">G. Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td data-order="1311544800">Mon 25th Jul 11</td>
<td data-order="170750">$170,750/m</td>
<td data-order="1311548400">Mon 25th Jul 11</td>
<td data-order="170750">$170,750/y</td>
</tr>
<tr>
<td data-search="Ashton Cox">A. Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td data-order="1231714800">Mon 12th Jan 09</td>
<td data-order="86000">$86,000/m</td>
<td data-order="1231718400">Mon 12th Jan 09</td>
<td data-order="86000">$86,000/y</td>
</tr>
<tr>
<td data-search="Cedric Kelly">C. Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td data-order="1332972000">Thu 29th Mar 12</td>
<td data-order="433060">$433,060/m</td>
<td data-order="1332975600">Thu 29th Mar 12</td>
<td data-order="433060">$433,060/y</td>
</tr>
<tr>
<td data-search="Airi Satou">A. Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td data-order="1227826800">Fri 28th Nov 08</td>
<td data-order="162700">$162,700/m</td>
<td data-order="1227830400">Fri 28th Nov 08</td>
<td data-order="162700">$162,700/y</td>
</tr>
<tr>
<td data-search="Brielle Williamson">B. Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td data-order="1354402800">Sun 2nd Dec 12</td>
<td data-order="372000">$372,000/m</td>
<td data-order="1354406400">Sun 2nd Dec 12</td>
<td data-order="372000">$372,000/y</td>
</tr>
<tr>
<td data-search="Herrod Chandler">H. Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td data-order="1344204000">Mon 6th Aug 12</td>
<td data-order="137500">$137,500/m</td>
<td data-order="1344207600">Mon 6th Aug 12</td>
<td data-order="137500">$137,500/y</td>
</tr>
<tr>
<td data-search="Rhona Davidson">R. Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td data-order="1287007200">Thu 14th Oct 10</td>
<td data-order="327900">$327,900/m</td>
<td data-order="1287010800">Thu 14th Oct 10</td>
<td data-order="327900">$327,900/y</td>
</tr>
<tr>
<td data-search="Colleen Hurst">C. Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td data-order="1252965600">Tue 15th Sep 09</td>
<td data-order="205500">$205,500/m</td>
<td data-order="1252969200">Tue 15th Sep 09</td>
<td data-order="205500">$205,500/y</td>
</tr>
<tr>
<td data-search="Sonya Frost">S. Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td data-order="1229122800">Sat 13th Dec 08</td>
<td data-order="103600">$103,600/m</td>
<td data-order="1229126400">Sat 13th Dec 08</td>
<td data-order="103600">$103,600/y</td>
</tr>
<tr>
<td data-search="Jena Gaines">J. Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td data-order="1229641200">Fri 19th Dec 08</td>
<td data-order="90560">$90,560/m</td>
<td data-order="1229644800">Fri 19th Dec 08</td>
<td data-order="90560">$90,560/y</td>
</tr>
<tr>
<td data-search="Quinn Flynn">Q. Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td data-order="1362265200">Sun 3rd Mar 13</td>
<td data-order="342000">$342,000/m</td>
<td data-order="1362268800">Sun 3rd Mar 13</td>
<td data-order="342000">$342,000/y</td>
</tr>
<tr>
<td data-search="Charde Marshall">C. Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td data-order="1224108000">Thu 16th Oct 08</td>
<td data-order="470600">$470,600/m</td>
<td data-order="1224111600">Thu 16th Oct 08</td>
<td data-order="470600">$470,600/y</td>
</tr>
<tr>
<td data-search="Haley Kennedy">H. Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td data-order="1355785200">Tue 18th Dec 12</td>
<td data-order="313500">$313,500/m</td>
<td data-order="1355788800">Tue 18th Dec 12</td>
<td data-order="313500">$313,500/y</td>
</tr>
<tr>
<td data-search="Tatyana Fitzpatrick">T. Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td data-order="1268780400">Wed 17th Mar 10</td>
<td data-order="385750">$385,750/m</td>
<td data-order="1268784000">Wed 17th Mar 10</td>
<td data-order="385750">$385,750/y</td>
</tr>
<tr>
<td data-search="Michael Silva">M. Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td data-order="1353970800">Tue 27th Nov 12</td>
<td data-order="198500">$198,500/m</td>
<td data-order="1353974400">Tue 27th Nov 12</td>
<td data-order="198500">$198,500/y</td>
</tr>
<tr>
<td data-search="Paul Byrd">P. Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td data-order="1276034400">Wed 9th Jun 10</td>
<td data-order="725000">$725,000/m</td>
<td data-order="1276038000">Wed 9th Jun 10</td>
<td data-order="725000">$725,000/y</td>
</tr>
<tr>
<td data-search="Gloria Little">G. Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td data-order="1239314400">Fri 10th Apr 09</td>
<td data-order="237500">$237,500/m</td>
<td data-order="1239318000">Fri 10th Apr 09</td>
<td data-order="237500">$237,500/y</td>
</tr>
<tr>
<td data-search="Bradley Greer">B. Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td data-order="1350079200">Sat 13th Oct 12</td>
<td data-order="132000">$132,000/m</td>
<td data-order="1350082800">Sat 13th Oct 12</td>
<td data-order="132000">$132,000/y</td>
</tr>
<tr>
<td data-search="Dai Rios">D. Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td data-order="1348610400">Wed 26th Sep 12</td>
<td data-order="217500">$217,500/m</td>
<td data-order="1348614000">Wed 26th Sep 12</td>
<td data-order="217500">$217,500/y</td>
</tr>
<tr>
<td data-search="Jenette Caldwell">J. Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td data-order="1315000800">Sat 3rd Sep 11</td>
<td data-order="345000">$345,000/m</td>
<td data-order="1315004400">Sat 3rd Sep 11</td>
<td data-order="345000">$345,000/y</td>
</tr>
<tr>
<td data-search="Yuri Berry">Y. Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td data-order="1245880800">Thu 25th Jun 09</td>
<td data-order="675000">$675,000/m</td>
<td data-order="1245884400">Thu 25th Jun 09</td>
<td data-order="675000">$675,000/y</td>
</tr>
<tr>
<td data-search="Caesar Vance">C. Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td data-order="1323644400">Mon 12th Dec 11</td>
<td data-order="106450">$106,450/m</td>
<td data-order="1323648000">Mon 12th Dec 11</td>
<td data-order="106450">$106,450/y</td>
</tr>
<tr>
<td data-search="Doris Wilder">D. Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td data-order="1284933600">Mon 20th Sep 10</td>
<td data-order="85600">$85,600/m</td>
<td data-order="1284937200">Mon 20th Sep 10</td>
<td data-order="85600">$85,600/y</td>
</tr>
<tr>
<td data-search="Angelica Ramos">A. Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td data-order="1255039200">Fri 9th Oct 09</td>
<td data-order="1200000">$1,200,000/m</td>
<td data-order="1255042800">Fri 9th Oct 09</td>
<td data-order="1200000">$1,200,000/y</td>
</tr>
<tr>
<td data-search="Gavin Joyce">G. Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td data-order="1292972400">Wed 22nd Dec 10</td>
<td data-order="92575">$92,575/m</td>
<td data-order="1292976000">Wed 22nd Dec 10</td>
<td data-order="92575">$92,575/y</td>
</tr>
<tr>
<td data-search="Jennifer Chang">J. Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td data-order="1289689200">Sun 14th Nov 10</td>
<td data-order="357650">$357,650/m</td>
<td data-order="1289692800">Sun 14th Nov 10</td>
<td data-order="357650">$357,650/y</td>
</tr>
<tr>
<td data-search="Brenden Wagner">B. Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td data-order="1307397600">Tue 7th Jun 11</td>
<td data-order="206850">$206,850/m</td>
<td data-order="1307401200">Tue 7th Jun 11</td>
<td data-order="206850">$206,850/y</td>
</tr>
<tr>
<td data-search="Fiona Green">F. Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td data-order="1268262000">Thu 11th Mar 10</td>
<td data-order="850000">$850,000/m</td>
<td data-order="1268265600">Thu 11th Mar 10</td>
<td data-order="850000">$850,000/y</td>
</tr>
<tr>
<td data-search="Shou Itou">S. Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td data-order="1313272800">Sun 14th Aug 11</td>
<td data-order="163000">$163,000/m</td>
<td data-order="1313276400">Sun 14th Aug 11</td>
<td data-order="163000">$163,000/y</td>
</tr>
<tr>
<td data-search="Michelle House">M. House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td data-order="1306965600">Thu 2nd Jun 11</td>
<td data-order="95400">$95,400/m</td>
<td data-order="1306969200">Thu 2nd Jun 11</td>
<td data-order="95400">$95,400/y</td>
</tr>
<tr>
<td data-search="Suki Burks">S. Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td data-order="1256162400">Thu 22nd Oct 09</td>
<td data-order="114500">$114,500/m</td>
<td data-order="1256166000">Thu 22nd Oct 09</td>
<td data-order="114500">$114,500/y</td>
</tr>
<tr>
<td data-search="Prescott Bartlett">P. Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td data-order="1304719200">Sat 7th May 11</td>
<td data-order="145000">$145,000/m</td>
<td data-order="1304722800">Sat 7th May 11</td>
<td data-order="145000">$145,000/y</td>
</tr>
<tr>
<td data-search="Gavin Cortez">G. Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td data-order="1224972000">Sun 26th Oct 08</td>
<td data-order="235500">$235,500/m</td>
<td data-order="1224975600">Sun 26th Oct 08</td>
<td data-order="235500">$235,500/y</td>
</tr>
<tr>
<td data-search="Martena Mccray">M. Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td data-order="1299625200">Wed 9th Mar 11</td>
<td data-order="324050">$324,050/m</td>
<td data-order="1299628800">Wed 9th Mar 11</td>
<td data-order="324050">$324,050/y</td>
</tr>
<tr>
<td data-search="Unity Butler">U. Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td data-order="1260313200">Wed 9th Dec 09</td>
<td data-order="85675">$85,675/m</td>
<td data-order="1260316800">Wed 9th Dec 09</td>
<td data-order="85675">$85,675/y</td>
</tr>
<tr>
<td data-search="Howard Hatfield">H. Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td data-order="1229382000">Tue 16th Dec 08</td>
<td data-order="164500">$164,500/m</td>
<td data-order="1229385600">Tue 16th Dec 08</td>
<td data-order="164500">$164,500/y</td>
</tr>
<tr>
<td data-search="Hope Fuentes">H. Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td data-order="1265929200">Fri 12th Feb 10</td>
<td data-order="109850">$109,850/m</td>
<td data-order="1265932800">Fri 12th Feb 10</td>
<td data-order="109850">$109,850/y</td>
</tr>
<tr>
<td data-search="Vivian Harrell">V. Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td data-order="1234566000">Sat 14th Feb 09</td>
<td data-order="452500">$452,500/m</td>
<td data-order="1234569600">Sat 14th Feb 09</td>
<td data-order="452500">$452,500/y</td>
</tr>
<tr>
<td data-search="Timothy Mooney">T. Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td data-order="1228950000">Thu 11th Dec 08</td>
<td data-order="136200">$136,200/m</td>
<td data-order="1228953600">Thu 11th Dec 08</td>
<td data-order="136200">$136,200/y</td>
</tr>
<tr>
<td data-search="Jackson Bradshaw">J. Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td data-order="1222380000">Fri 26th Sep 08</td>
<td data-order="645750">$645,750/m</td>
<td data-order="1222383600">Fri 26th Sep 08</td>
<td data-order="645750">$645,750/y</td>
</tr>
<tr>
<td data-search="Olivia Liang">O. Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td data-order="1296687600">Thu 3rd Feb 11</td>
<td data-order="234500">$234,500/m</td>
<td data-order="1296691200">Thu 3rd Feb 11</td>
<td data-order="234500">$234,500/y</td>
</tr>
<tr>
<td data-search="Bruno Nash">B. Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td data-order="1304373600">Tue 3rd May 11</td>
<td data-order="163500">$163,500/m</td>
<td data-order="1304377200">Tue 3rd May 11</td>
<td data-order="163500">$163,500/y</td>
</tr>
<tr>
<td data-search="Sakura Yamamoto">S. Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td data-order="1250632800">Wed 19th Aug 09</td>
<td data-order="139575">$139,575/m</td>
<td data-order="1250636400">Wed 19th Aug 09</td>
<td data-order="139575">$139,575/y</td>
</tr>
<tr>
<td data-search="Thor Walton">T. Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td data-order="1376172000">Sun 11th Aug 13</td>
<td data-order="98540">$98,540/m</td>
<td data-order="1376175600">Sun 11th Aug 13</td>
<td data-order="98540">$98,540/y</td>
</tr>
<tr>
<td data-search="Finn Camacho">F. Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td data-order="1246917600">Tue 7th Jul 09</td>
<td data-order="87500">$87,500/m</td>
<td data-order="1246921200">Tue 7th Jul 09</td>
<td data-order="87500">$87,500/y</td>
</tr>
<tr>
<td data-search="Serge Baldwin">S. Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td data-order="1333922400">Mon 9th Apr 12</td>
<td data-order="138575">$138,575/m</td>
<td data-order="1333926000">Mon 9th Apr 12</td>
<td data-order="138575">$138,575/y</td>
</tr>
<tr>
<td data-search="Zenaida Frank">Z. Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td data-order="1262559600">Mon 4th Jan 10</td>
<td data-order="125250">$125,250/m</td>
<td data-order="1262563200">Mon 4th Jan 10</td>
<td data-order="125250">$125,250/y</td>
</tr>
<tr>
<td data-search="Zorita Serrano">Z. Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td data-order="1338501600">Fri 1st Jun 12</td>
<td data-order="115000">$115,000/m</td>
<td data-order="1338505200">Fri 1st Jun 12</td>
<td data-order="115000">$115,000/y</td>
</tr>
<tr>
<td data-search="Jennifer Acosta">J. Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td data-order="1359673200">Fri 1st Feb 13</td>
<td data-order="75650">$75,650/m</td>
<td data-order="1359676800">Fri 1st Feb 13</td>
<td data-order="75650">$75,650/y</td>
</tr>
<tr>
<td data-search="Cara Stevens">C. Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td data-order="1323126000">Tue 6th Dec 11</td>
<td data-order="145600">$145,600/m</td>
<td data-order="1323129600">Tue 6th Dec 11</td>
<td data-order="145600">$145,600/y</td>
</tr>
<tr>
<td data-search="Hermione Butler">H. Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td data-order="1300662000">Mon 21st Mar 11</td>
<td data-order="356250">$356,250/m</td>
<td data-order="1300665600">Mon 21st Mar 11</td>
<td data-order="356250">$356,250/y</td>
</tr>
<tr>
<td data-search="Lael Greer">L. Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td data-order="1235689200">Fri 27th Feb 09</td>
<td data-order="103500">$103,500/m</td>
<td data-order="1235692800">Fri 27th Feb 09</td>
<td data-order="103500">$103,500/y</td>
</tr>
<tr>
<td data-search="Jonas Alexander">J. Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td data-order="1279058400">Wed 14th Jul 10</td>
<td data-order="86500">$86,500/m</td>
<td data-order="1279062000">Wed 14th Jul 10</td>
<td data-order="86500">$86,500/y</td>
</tr>
<tr>
<td data-search="Shad Decker">S. Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td data-order="1226530800">Thu 13th Nov 08</td>
<td data-order="183000">$183,000/m</td>
<td data-order="1226534400">Thu 13th Nov 08</td>
<td data-order="183000">$183,000/y</td>
</tr>
<tr>
<td data-search="Michael Bruce">M. Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td data-order="1309125600">Mon 27th Jun 11</td>
<td data-order="183000">$183,000/m</td>
<td data-order="1309129200">Mon 27th Jun 11</td>
<td data-order="183000">$183,000/y</td>
</tr>
<tr>
<td data-search="Donna Snider">D. Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td data-order="1295910000">Tue 25th Jan 11</td>
<td data-order="112000">$112,000/m</td>
<td data-order="1295913600">Tue 25th Jan 11</td>
<td data-order="112000">$112,000/y</td>
</tr>
</tbody>
</table>
@@ -551,51 +545,44 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -618,17 +605,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -642,8 +627,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li class="active"><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li class="active"><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -659,14 +646,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -684,21 +672,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -729,8 +714,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -738,10 +722,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -749,14 +731,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -0,0 +1,744 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML5 data-* attributes - table options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>HTML5 data-* attributes - table options</span></h1>
<div class="info">
<p>As of DataTables 1.10.5 it is now possible to define <a href="//datatables.net/reference/option">initialisation options</a> using HTML5 <code>data-*</code>
attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the
<code>data-*</code> attributes taking priority).</p>
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by <a href=
"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a> - this means that double quotes should be used inside the attribute if needed
for a string (see the <code>data-order</code> example below).</p>
<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is
used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
"DataTables initialisation option">pageLength</code></a> and <a href="//datatables.net/reference/option/order"><code class="option" title=
"DataTables initialisation option">order</code></a> on the main table. Column options can also be defined on the table column cells, as shown by the use of the
<a href="//datatables.net/reference/option/columns.orderable"><code class="option" title="DataTables initialisation option">columns.orderable</code></a> option on
the fifth column below.</p>
</div>
<table id="example" class="display" width="100%" data-page-length="25" data-order="[[ 1, &quot;asc&quot; ]]">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th data-orderable="false">Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Advanced initialisation</a></h3>
<ul class="toc active">
<li><a href="./events_live.html">DOM / jQuery events</a></li>
<li><a href="./dt_events.html">DataTables events</a></li>
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li class="active"><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -15,16 +16,15 @@
<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
basic initialisation of this documentation. Through combinations of the options available and the use
of callbacks, DataTables is completely customisable and will fit into exactly what you need for your
table display.</p>
<p>The configuration options offered by DataTables extend much further than the options shown in the basic initialisation of this documentation. Through
combinations of the options available and the use of callbacks, DataTables is completely customisable and will fit into exactly what you need for your table
display.</p>
<p>This section shows some more advanced initialisation options. Keep in mind also that each example
can be combined with the other examples to get what you want!</p>
<p>This section shows some more advanced initialisation options. Keep in mind also that each example can be combined with the other examples to get what you
want!</p>
</div>
</section>
</div>
@@ -43,8 +43,10 @@
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -57,14 +59,11 @@
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language file</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,9 +20,9 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"language": {
"url": "../resources/de_DE.txt"
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
} );
} );
@@ -33,17 +34,15 @@ $(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=
"//datatables.net/reference/option/language"><code class="option" title=
"Initialisation option">language</code></a> initialisation option, you can also store the language
information in a file, which DataTables can load by Ajax using the <a href=
"//datatables.net/reference/option/language.url"><code class="option" title=
"Initialisation option">language.url</code></a> option.</p>
<p>As well as being able to pass language information to DataTables through the <a href="//datatables.net/reference/option/language"><code class="option" title=
"DataTables initialisation option">language</code></a> initialisation option, you can also store the language information in a file, which DataTables can load by
Ajax using the <a href="//datatables.net/reference/option/language.url"><code class="option" title="DataTables initialisation option">language.url</code></a>
option.</p>
<p>The following example shows DataTables reading a German language file.</p>
<p>The following example shows DataTables reading a German language file which is hosted on the <a href="http://cdn.datatables.net">DataTables CDN</a></p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -539,55 +538,48 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;language&quot;: {
&quot;url&quot;: &quot;../resources/de_DE.txt&quot;
&quot;url&quot;: &quot;//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json&quot;
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -610,17 +602,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -634,8 +624,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li class="active"><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -651,14 +643,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -676,21 +669,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -721,8 +711,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -730,10 +719,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -741,14 +728,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Page length options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
@@ -31,19 +32,18 @@ $(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
of the table) using the <a href="//datatables.net/reference/option/lengthMenu"><code class="option"
title="Initialisation option">lengthMenu</code></a> initialisation option.</p>
<p>It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the <a href=
"//datatables.net/reference/option/lengthMenu"><code class="option" title="DataTables initialisation option">lengthMenu</code></a> initialisation option.</p>
<p>This parameter can take one of two forms:</p>
<ul>
<ul class="markdown">
<li>A 1D array of options which will be used for both the displayed option and the value, or</li>
<li>A 2D array in which the first array is used to define the value options and the second array
the displayed options (useful for language strings such as 'All').</li>
<li>A 2D array in which the first array is used to define the value options and the second array the displayed options (useful for language strings such as
'All').</li>
</ul>
<p>The example below shows a 2D array being used to include a "Show all" records option.</p>
@@ -542,53 +542,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;lengthMenu&quot;: [[10, 25, 50, -1], [10, 25, 50, &quot;All&quot;]]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -611,17 +604,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -635,8 +626,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li class="active"><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -652,14 +645,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,21 +671,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -722,8 +713,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -731,10 +721,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -742,14 +730,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -0,0 +1,771 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Read HTML to data objects</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable({
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
]
});
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Read HTML to data objects</span></h1>
<div class="info">
<p>When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data source), by default it will read the information in the table
into an array that DataTables stores internally. Each array element represents a column.</p>
<p>It can be very useful to have DataTables read the information into an object rather than an array, an option that can be triggered using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> initialisation option to
define how you want the data to be stored. Typically <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> is used with <a href="../ajax/objects.html">Ajax sourced data</a> to tell DataTables where to read data
from, but as can be seen here it also tells DataTables where to write the data to.</p>
<p>This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.</p>
<p>In the example shown here, the data read from each row in the table is read into a Javascript object with the structure:</p>
<pre>
<code class="multiline language-js">{
"name": "...",
"position": "...",
"office": "...",
"age": "...",
"start_date": "...",
"salary": "..."
}
</code>
</pre>
<p>Please note that this feature requires DataTables 1.10.3 or newer.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable({
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;age&quot; },
{ &quot;data&quot;: &quot;start_date&quot; },
{ &quot;data&quot;: &quot;salary&quot; }
]
});
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Advanced initialisation</a></h3>
<ul class="toc active">
<li><a href="./events_live.html">DOM / jQuery events</a></li>
<li><a href="./dt_events.html">DataTables events</a></li>
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li class="active"><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row created callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -16,7 +17,7 @@
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -24,9 +25,9 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"createdRow": function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
$('td', row).eq(5).addClass('highlight');
}
}
@@ -40,20 +41,16 @@ $(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
time. For each row that is generated for display, the <a href=
"//datatables.net/reference/option/createdRow"><code class="option" title=
"Initialisation option">createdRow</code></a> function is called once and once only. It is passed the
create row node which can then be modified.</p>
<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the
<a href="//datatables.net/reference/option/createdRow"><code class="option" title="DataTables initialisation option">createdRow</code></a> function is called once
and once only. It is passed the create row node which can then be modified.</p>
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to
the container cell if the salary is greater than $4,000. Note that <a href=
"//datatables.net/reference/option/columns.createdCell"><code class="option" title=
"Initialisation option">columns.createdCell</code></a> could also be used to create exactly the same
effect.</p>
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $4,000.
Note that <a href="//datatables.net/reference/option/columns.createdCell"><code class="option" title=
"DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -549,60 +546,53 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;createdRow&quot;: function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 &gt; 4000 ) {
if ( data[5].replace(/[\$,]/g, '') * 1 &gt; 150000 ) {
$('td', row).eq(5).addClass('highlight');
}
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">td.highlight {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">td.highlight {
font-weight: bold;
color: blue;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -625,17 +615,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -649,8 +637,10 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li class="active"><a href="./row_callback.html">Row created callback</a></li>
@@ -666,14 +656,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -691,21 +682,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -736,8 +724,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -745,10 +732,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -756,14 +741,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row grouping</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -16,7 +17,7 @@ tr.group:hover {
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -66,20 +67,16 @@ $(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
would overly limit the DataTables core), it is most certainly possible to give the look and feel of row
grouping.</p>
<p>Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly
possible to give the look and feel of row grouping.</p>
<p>In the example below the 'group' is the office location, which is based on the information in the
third column (which is set to hidden). The grouping indicator is added by the <a href=
"//datatables.net/reference/option/drawCallback"><code class="option" title=
"Initialisation option">drawCallback</code></a> function, which will parse through the rows which are
displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event
handler is added for the grouping rows to allow the grouping order to be restored as well as ordering
by any other column.</p>
<p>In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator
is added by the <a href="//datatables.net/reference/option/drawCallback"><code class="option" title="DataTables initialisation option">drawCallback</code></a>
function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event handler is
added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -575,8 +572,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable({
&quot;columnDefs&quot;: [
{ &quot;visible&quot;: false, &quot;targets&quot;: 2 }
@@ -612,49 +608,43 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">tr.group,
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">tr.group,
tr.group:hover {
background-color: #ddd !important;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -677,17 +667,15 @@ tr.group:hover {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -701,8 +689,10 @@ tr.group:hover {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
@@ -718,14 +708,15 @@ tr.group:hover {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -743,21 +734,18 @@ tr.group:hover {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -788,8 +776,7 @@ tr.group:hover {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -797,10 +784,8 @@ tr.group:hover {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -808,14 +793,11 @@ tr.group:hover {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Order direction sequence control</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"aoColumns": [
null,
null,
@@ -38,19 +39,17 @@ $(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
them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of
the <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
"Initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also
allows you to limit the ordering to a single direction, or you could add complex behaviour to the
ordering interaction.</p>
<p>At times you may wish to change the default ordering direction sequence for columns (some or all of them) to be 'descending' rather than DataTables' default
ascending. This can be done through the use of the <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
"DataTables initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also allows you to limit the ordering to a single
direction, or you could add complex behaviour to the ordering interaction.</p>
<p>The example below shows:</p>
<ul>
<ul class="markdown">
<li>Column 1 - default ordering</li>
<li>Column 2 - default ordering</li>
<li>Column 3 - ascending ordering only</li>
@@ -59,9 +58,8 @@ $(document).ready(function() {
<li>Column 6 - default ordering</li>
</ul>
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex
ordering behaviour into a single table, but the example shows how these options can be use and
therefore applied across all columns.</p>
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows
how these options can be use and therefore applied across all columns.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -557,9 +555,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;aoColumns&quot;: [
null,
null,
@@ -571,46 +568,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -633,17 +624,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -657,16 +646,17 @@ $(document).ready(function() {
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li class="active"><a href="./sort_direction_control.html">Order direction sequence
control</a></li>
<li class="active"><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -675,14 +665,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -700,21 +691,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -745,8 +733,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -754,10 +741,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -765,14 +750,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Flat array data source</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": {
"url": "data/objects_root_array.txt",
"dataSrc": ""
@@ -40,32 +41,26 @@ $(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
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
be change by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> initiation option.</p>
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
of ways in which it can be used:</p>
<ul>
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
array.</li>
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to
transform the data from one source format to another (for example you could convert from XML to a
Javascript object). The value returned from the function is used as the data for the table.</li>
<ul class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="Initialisation option">ajax.dataSrc</code></a> being used as an empty string. This
tells DataTables that the JSON loaded is a plain array, not an object with an array inside it as is the
default.</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an
object with an array inside it as is the default.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -102,9 +97,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/objects_root_array.txt&quot;,
&quot;dataSrc&quot;: &quot;&quot;
@@ -120,46 +114,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -182,17 +170,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -205,19 +191,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -226,14 +211,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -251,21 +237,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -296,8 +279,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -305,10 +287,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -316,14 +296,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom data source property</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": {
"url": "data/arrays_custom_prop.txt",
"dataSrc": "demo"
@@ -32,32 +33,28 @@ $(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
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
be change by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> initiation option.</p>
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
of ways in which it can be used:</p>
<ul>
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
array.</li>
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to
transform the data from one source format to another (for example you could convert from XML to a
Javascript object). The value returned from the function is used as the data for the table.</li>
<ul class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="Initialisation option">ajax.dataSrc</code></a> being used as a string to get the data
from a different source property, in this case <code class="string" title="String">demo</code> but it
could be any value, included a nested property by using standard dotted Javascript object notation.</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -94,9 +91,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/arrays_custom_prop.txt&quot;,
&quot;dataSrc&quot;: &quot;demo&quot;
@@ -104,46 +100,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -166,17 +156,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -189,19 +177,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -210,14 +197,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -235,21 +223,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -262,8 +247,7 @@ $(document).ready(function() {
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li class="active"><a href="./custom_data_property.html">Custom data source
property</a></li>
<li class="active"><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
@@ -281,8 +265,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -290,10 +273,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -301,14 +282,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -6,7 +6,7 @@
"salary": "$320,800",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
"timestamp": "1303686000"
},
"office": "Edinburgh",
"extn": "5421"
@@ -17,7 +17,7 @@
"salary": "$170,750",
"start_date": {
"display": "Mon 25th Jul 11",
"timestamp": "1311544800"
"timestamp": "1311548400"
},
"office": "Tokyo",
"extn": "8422"
@@ -28,7 +28,7 @@
"salary": "$86,000",
"start_date": {
"display": "Mon 12th Jan 09",
"timestamp": "1231714800"
"timestamp": "1231718400"
},
"office": "San Francisco",
"extn": "1562"
@@ -39,7 +39,7 @@
"salary": "$433,060",
"start_date": {
"display": "Thu 29th Mar 12",
"timestamp": "1332972000"
"timestamp": "1332975600"
},
"office": "Edinburgh",
"extn": "6224"
@@ -50,7 +50,7 @@
"salary": "$162,700",
"start_date": {
"display": "Fri 28th Nov 08",
"timestamp": "1227826800"
"timestamp": "1227830400"
},
"office": "Tokyo",
"extn": "5407"
@@ -61,7 +61,7 @@
"salary": "$372,000",
"start_date": {
"display": "Sun 2nd Dec 12",
"timestamp": "1354402800"
"timestamp": "1354406400"
},
"office": "New York",
"extn": "4804"
@@ -72,7 +72,7 @@
"salary": "$137,500",
"start_date": {
"display": "Mon 6th Aug 12",
"timestamp": "1344204000"
"timestamp": "1344207600"
},
"office": "San Francisco",
"extn": "9608"
@@ -83,7 +83,7 @@
"salary": "$327,900",
"start_date": {
"display": "Thu 14th Oct 10",
"timestamp": "1287007200"
"timestamp": "1287010800"
},
"office": "Tokyo",
"extn": "6200"
@@ -94,7 +94,7 @@
"salary": "$205,500",
"start_date": {
"display": "Tue 15th Sep 09",
"timestamp": "1252965600"
"timestamp": "1252969200"
},
"office": "San Francisco",
"extn": "2360"
@@ -105,7 +105,7 @@
"salary": "$103,600",
"start_date": {
"display": "Sat 13th Dec 08",
"timestamp": "1229122800"
"timestamp": "1229126400"
},
"office": "Edinburgh",
"extn": "1667"
@@ -116,7 +116,7 @@
"salary": "$90,560",
"start_date": {
"display": "Fri 19th Dec 08",
"timestamp": "1229641200"
"timestamp": "1229644800"
},
"office": "London",
"extn": "3814"
@@ -127,7 +127,7 @@
"salary": "$342,000",
"start_date": {
"display": "Sun 3rd Mar 13",
"timestamp": "1362265200"
"timestamp": "1362268800"
},
"office": "Edinburgh",
"extn": "9497"
@@ -138,7 +138,7 @@
"salary": "$470,600",
"start_date": {
"display": "Thu 16th Oct 08",
"timestamp": "1224108000"
"timestamp": "1224111600"
},
"office": "San Francisco",
"extn": "6741"
@@ -149,7 +149,7 @@
"salary": "$313,500",
"start_date": {
"display": "Tue 18th Dec 12",
"timestamp": "1355785200"
"timestamp": "1355788800"
},
"office": "London",
"extn": "3597"
@@ -160,7 +160,7 @@
"salary": "$385,750",
"start_date": {
"display": "Wed 17th Mar 10",
"timestamp": "1268780400"
"timestamp": "1268784000"
},
"office": "London",
"extn": "1965"
@@ -171,7 +171,7 @@
"salary": "$198,500",
"start_date": {
"display": "Tue 27th Nov 12",
"timestamp": "1353970800"
"timestamp": "1353974400"
},
"office": "London",
"extn": "1581"
@@ -182,7 +182,7 @@
"salary": "$725,000",
"start_date": {
"display": "Wed 9th Jun 10",
"timestamp": "1276034400"
"timestamp": "1276038000"
},
"office": "New York",
"extn": "3059"
@@ -193,7 +193,7 @@
"salary": "$237,500",
"start_date": {
"display": "Fri 10th Apr 09",
"timestamp": "1239314400"
"timestamp": "1239318000"
},
"office": "New York",
"extn": "1721"
@@ -204,7 +204,7 @@
"salary": "$132,000",
"start_date": {
"display": "Sat 13th Oct 12",
"timestamp": "1350079200"
"timestamp": "1350082800"
},
"office": "London",
"extn": "2558"
@@ -215,7 +215,7 @@
"salary": "$217,500",
"start_date": {
"display": "Wed 26th Sep 12",
"timestamp": "1348610400"
"timestamp": "1348614000"
},
"office": "Edinburgh",
"extn": "2290"
@@ -226,7 +226,7 @@
"salary": "$345,000",
"start_date": {
"display": "Sat 3rd Sep 11",
"timestamp": "1315000800"
"timestamp": "1315004400"
},
"office": "New York",
"extn": "1937"
@@ -237,7 +237,7 @@
"salary": "$675,000",
"start_date": {
"display": "Thu 25th Jun 09",
"timestamp": "1245880800"
"timestamp": "1245884400"
},
"office": "New York",
"extn": "6154"
@@ -248,7 +248,7 @@
"salary": "$106,450",
"start_date": {
"display": "Mon 12th Dec 11",
"timestamp": "1323644400"
"timestamp": "1323648000"
},
"office": "New York",
"extn": "8330"
@@ -259,7 +259,7 @@
"salary": "$85,600",
"start_date": {
"display": "Mon 20th Sep 10",
"timestamp": "1284933600"
"timestamp": "1284937200"
},
"office": "Sidney",
"extn": "3023"
@@ -270,7 +270,7 @@
"salary": "$1,200,000",
"start_date": {
"display": "Fri 9th Oct 09",
"timestamp": "1255039200"
"timestamp": "1255042800"
},
"office": "London",
"extn": "5797"
@@ -281,7 +281,7 @@
"salary": "$92,575",
"start_date": {
"display": "Wed 22nd Dec 10",
"timestamp": "1292972400"
"timestamp": "1292976000"
},
"office": "Edinburgh",
"extn": "8822"
@@ -292,7 +292,7 @@
"salary": "$357,650",
"start_date": {
"display": "Sun 14th Nov 10",
"timestamp": "1289689200"
"timestamp": "1289692800"
},
"office": "Singapore",
"extn": "9239"
@@ -303,7 +303,7 @@
"salary": "$206,850",
"start_date": {
"display": "Tue 7th Jun 11",
"timestamp": "1307397600"
"timestamp": "1307401200"
},
"office": "San Francisco",
"extn": "1314"
@@ -314,7 +314,7 @@
"salary": "$850,000",
"start_date": {
"display": "Thu 11th Mar 10",
"timestamp": "1268262000"
"timestamp": "1268265600"
},
"office": "San Francisco",
"extn": "2947"
@@ -325,7 +325,7 @@
"salary": "$163,000",
"start_date": {
"display": "Sun 14th Aug 11",
"timestamp": "1313272800"
"timestamp": "1313276400"
},
"office": "Tokyo",
"extn": "8899"
@@ -336,7 +336,7 @@
"salary": "$95,400",
"start_date": {
"display": "Thu 2nd Jun 11",
"timestamp": "1306965600"
"timestamp": "1306969200"
},
"office": "Sidney",
"extn": "2769"
@@ -347,7 +347,7 @@
"salary": "$114,500",
"start_date": {
"display": "Thu 22nd Oct 09",
"timestamp": "1256162400"
"timestamp": "1256166000"
},
"office": "London",
"extn": "6832"
@@ -358,7 +358,7 @@
"salary": "$145,000",
"start_date": {
"display": "Sat 7th May 11",
"timestamp": "1304719200"
"timestamp": "1304722800"
},
"office": "London",
"extn": "3606"
@@ -369,7 +369,7 @@
"salary": "$235,500",
"start_date": {
"display": "Sun 26th Oct 08",
"timestamp": "1224972000"
"timestamp": "1224975600"
},
"office": "San Francisco",
"extn": "2860"
@@ -380,7 +380,7 @@
"salary": "$324,050",
"start_date": {
"display": "Wed 9th Mar 11",
"timestamp": "1299625200"
"timestamp": "1299628800"
},
"office": "Edinburgh",
"extn": "8240"
@@ -391,7 +391,7 @@
"salary": "$85,675",
"start_date": {
"display": "Wed 9th Dec 09",
"timestamp": "1260313200"
"timestamp": "1260316800"
},
"office": "San Francisco",
"extn": "5384"
@@ -402,7 +402,7 @@
"salary": "$164,500",
"start_date": {
"display": "Tue 16th Dec 08",
"timestamp": "1229382000"
"timestamp": "1229385600"
},
"office": "San Francisco",
"extn": "7031"
@@ -413,7 +413,7 @@
"salary": "$109,850",
"start_date": {
"display": "Fri 12th Feb 10",
"timestamp": "1265929200"
"timestamp": "1265932800"
},
"office": "San Francisco",
"extn": "6318"
@@ -424,7 +424,7 @@
"salary": "$452,500",
"start_date": {
"display": "Sat 14th Feb 09",
"timestamp": "1234566000"
"timestamp": "1234569600"
},
"office": "San Francisco",
"extn": "9422"
@@ -435,7 +435,7 @@
"salary": "$136,200",
"start_date": {
"display": "Thu 11th Dec 08",
"timestamp": "1228950000"
"timestamp": "1228953600"
},
"office": "London",
"extn": "7580"
@@ -446,7 +446,7 @@
"salary": "$645,750",
"start_date": {
"display": "Fri 26th Sep 08",
"timestamp": "1222380000"
"timestamp": "1222383600"
},
"office": "New York",
"extn": "1042"
@@ -457,7 +457,7 @@
"salary": "$234,500",
"start_date": {
"display": "Thu 3rd Feb 11",
"timestamp": "1296687600"
"timestamp": "1296691200"
},
"office": "Singapore",
"extn": "2120"
@@ -468,7 +468,7 @@
"salary": "$163,500",
"start_date": {
"display": "Tue 3rd May 11",
"timestamp": "1304373600"
"timestamp": "1304377200"
},
"office": "London",
"extn": "6222"
@@ -479,7 +479,7 @@
"salary": "$139,575",
"start_date": {
"display": "Wed 19th Aug 09",
"timestamp": "1250632800"
"timestamp": "1250636400"
},
"office": "Tokyo",
"extn": "9383"
@@ -490,7 +490,7 @@
"salary": "$98,540",
"start_date": {
"display": "Sun 11th Aug 13",
"timestamp": "1376172000"
"timestamp": "1376175600"
},
"office": "New York",
"extn": "8327"
@@ -501,7 +501,7 @@
"salary": "$87,500",
"start_date": {
"display": "Tue 7th Jul 09",
"timestamp": "1246917600"
"timestamp": "1246921200"
},
"office": "San Francisco",
"extn": "2927"
@@ -512,7 +512,7 @@
"salary": "$138,575",
"start_date": {
"display": "Mon 9th Apr 12",
"timestamp": "1333922400"
"timestamp": "1333926000"
},
"office": "Singapore",
"extn": "8352"
@@ -523,7 +523,7 @@
"salary": "$125,250",
"start_date": {
"display": "Mon 4th Jan 10",
"timestamp": "1262559600"
"timestamp": "1262563200"
},
"office": "New York",
"extn": "7439"
@@ -534,7 +534,7 @@
"salary": "$115,000",
"start_date": {
"display": "Fri 1st Jun 12",
"timestamp": "1338501600"
"timestamp": "1338505200"
},
"office": "San Francisco",
"extn": "4389"
@@ -545,7 +545,7 @@
"salary": "$75,650",
"start_date": {
"display": "Fri 1st Feb 13",
"timestamp": "1359673200"
"timestamp": "1359676800"
},
"office": "Edinburgh",
"extn": "3431"
@@ -556,7 +556,7 @@
"salary": "$145,600",
"start_date": {
"display": "Tue 6th Dec 11",
"timestamp": "1323126000"
"timestamp": "1323129600"
},
"office": "New York",
"extn": "3990"
@@ -567,7 +567,7 @@
"salary": "$356,250",
"start_date": {
"display": "Mon 21st Mar 11",
"timestamp": "1300662000"
"timestamp": "1300665600"
},
"office": "London",
"extn": "1016"
@@ -578,7 +578,7 @@
"salary": "$103,500",
"start_date": {
"display": "Fri 27th Feb 09",
"timestamp": "1235689200"
"timestamp": "1235692800"
},
"office": "London",
"extn": "6733"
@@ -589,7 +589,7 @@
"salary": "$86,500",
"start_date": {
"display": "Wed 14th Jul 10",
"timestamp": "1279058400"
"timestamp": "1279062000"
},
"office": "San Francisco",
"extn": "8196"
@@ -600,7 +600,7 @@
"salary": "$183,000",
"start_date": {
"display": "Thu 13th Nov 08",
"timestamp": "1226530800"
"timestamp": "1226534400"
},
"office": "Edinburgh",
"extn": "6373"
@@ -611,7 +611,7 @@
"salary": "$183,000",
"start_date": {
"display": "Mon 27th Jun 11",
"timestamp": "1309125600"
"timestamp": "1309129200"
},
"office": "Singapore",
"extn": "5384"
@@ -622,7 +622,7 @@
"salary": "$112,000",
"start_date": {
"display": "Tue 25th Jan 11",
"timestamp": "1295910000"
"timestamp": "1295913600"
},
"office": "New York",
"extn": "4226"

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Nested object data (objects)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"processing": true,
"ajax": "data/objects_deep.txt",
"columns": [
@@ -38,24 +39,20 @@ $(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
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option. In its simplest case, it can be used to read
arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays
through the use of standard Javascript dotted object notation. Each dot (<code>.</code>) in the
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option represents another object level.</p>
<p>DataTables has the ability to use data from almost data JSON data source through the use of the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option. In its simplest
case, it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays through the use of standard
Javascript dotted object notation. Each dot (<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> option represents another object level.</p>
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the
<code>hr</code> object in the row's data source object, while <code>contact.0</code> refers to the
first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested
data.</p>
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the <code>hr</code> object in the row's data source object, while
<code>contact.0</code> refers to the first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested data.</p>
<p>The example below shows DataTables reading information for the columns from nested objects and
arrays, where the structure of the row's data source in this example is:</p>
<p>The example below shows DataTables reading information for the columns from nested objects and arrays, where the structure of the row's data source in this
example is:</p>
<pre>
<code class="multiline">{
"name": "Tiger Nixon",
@@ -107,9 +104,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;ajax&quot;: &quot;data/objects_deep.txt&quot;,
&quot;columns&quot;: [
@@ -123,46 +119,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -185,17 +175,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -208,19 +196,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -229,14 +216,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -254,21 +242,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -299,8 +284,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -308,10 +292,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -319,14 +301,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Deferred rendering for speed</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": "data/arrays.txt",
"deferRender": true
} );
@@ -30,24 +31,20 @@ $(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.
One method to do this is to make use of the built-in deferred rendering option in DataTables with the
<a href="//datatables.net/reference/option/deferRender"><code class="option" title=
"Initialisation option">deferRender</code></a> option.</p>
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in
deferred rendering option in DataTables with the <a href="//datatables.net/reference/option/deferRender"><code class="option" title=
"DataTables initialisation option">deferRender</code></a> option.</p>
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag"
title="HTML tag">TR</code> and <code class="tag" title="HTML tag">TD</code> nodes required for the
table when the data is loaded, DataTables will only create the nodes required for each individual row
at the time of that row being drawn on the page (these nodes are then retained in case they are needed
again so they aren't created multiple times). This can give a significant performance increase, since a
lot less work is done at initialisation time.</p>
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag" title="HTML tag">TR</code> and <code class="tag" title=
"HTML tag">TD</code> nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of
that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant
performance increase, since a lot less work is done at initialisation time.</p>
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll
likely notice no difference, but larger tables can benefit significantly from simply enabling this
parameter.</p>
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit
significantly from simply enabling this parameter.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -84,54 +81,47 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;deferRender&quot;: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -154,17 +144,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -177,19 +165,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -198,14 +185,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -223,21 +211,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -268,8 +253,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -277,10 +261,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -288,14 +270,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -15,17 +16,14 @@
<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
etc on the client-side. This is done through use of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option, which has a number of options to customise how the data
is retrieved from the server.</p>
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging etc on the client-side. This is done through use of the
<a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option, which has a number of
options to customise how the data is retrieved from the server.</p>
<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with
client-side processing.</p>
<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.</p>
</div>
</section>
</div>
@@ -53,14 +51,11 @@
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Generated content for a column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -39,35 +40,27 @@ $(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
number of ways:</p>
<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
<ul>
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> for content that is dynamic (i.e. based upon the
row's data)</li>
<ul class="markdown">
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> for
content that is dynamic (i.e. based upon the row's data)</li>
<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"Initialisation option">columns.defaultContent</code></a> for static content (i.e. simple
strings)</li>
"DataTables initialisation option">columns.defaultContent</code></a> for static content (i.e. simple strings)</li>
</ul>
<p>This examples shows the use of <a href=
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"Initialisation option">columns.defaultContent</code></a> to create a <em>button</em> element in the
last column of the table. A simple jQuery <code>click</code> event listener is used to watch for clicks
on the row, and when activated uses the <a href=
"//datatables.net/reference/api/row().data()"><code class="api" title=
"API method">row().data()</code></a> method to get the data for the row and show a bit of information
about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be
arbitrarily complex.</p>
<p>This examples shows the use of <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"DataTables initialisation option">columns.defaultContent</code></a> to create a <em>button</em> element in the last column of the table. A simple jQuery
<code>click</code> event listener is used to watch for clicks on the row, and when activated uses the <a href=
"//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to get the data for the row and show a
bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option"
title="Initialisation option">columns.data</code></a> option for the column has been set to
<code>null</code> to indicate that the column has no information that should be obtained data source
object.</p>
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information
that should be obtained data source object.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -104,8 +97,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;columnDefs&quot;: [ {
@@ -121,46 +113,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -183,17 +169,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -206,19 +190,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -227,14 +210,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -252,21 +236,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -278,8 +259,7 @@ $(document).ready(function() {
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li class="active"><a href="./null_data_source.html">Generated content for a
column</a></li>
<li class="active"><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
@@ -298,8 +278,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -307,10 +286,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -318,14 +295,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax data source (objects)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": "data/objects.txt",
"columns": [
{ "data": "name" },
@@ -37,22 +38,19 @@ $(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
rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects
as the data source for each row (i.e. each row has its data described by an object) as this can make
working with the data much more understandable, particularly if you are using the API and you don't
need to keep track of array indexes.</p>
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you
may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data
much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
<p>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option which you use to tell DataTables which property
to use from the data source object for each column.</p>
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
column.</p>
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the
table. The structure of the row's data source in this example is:</p>
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example
is:</p>
<pre>
<code class="multiline">{
"name": "Tiger Nixon",
@@ -64,6 +62,8 @@ $(document).ready(function() {
}
</code>
</pre>
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -100,9 +100,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/objects.txt&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name&quot; },
@@ -115,46 +114,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -177,17 +170,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -200,19 +191,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -221,14 +211,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -246,21 +237,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -291,8 +279,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -300,10 +287,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -311,14 +296,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Nested object data (arrays)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": "data/objects_subarrays.txt",
"columns": [
{ "data": "name[, ]" },
@@ -37,37 +38,29 @@ $(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
DataTables through the <a href="//datatables.net/reference/option/columns.data"><code class="option"
title="Initialisation option">columns.data</code></a> option, which is particularly useful for working
with JSON feeds in an already defined format.</p>
<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, which is
particularly useful for working with JSON feeds in an already defined format.</p>
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option has the ability to read information not only
from objects, but also from arrays using the same dotted object syntax as for objects. In addition to
this, when working with an array data source <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> can process the data to combine and display the data in
simple forms (more complex forms can be defined by using <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> as a function).</p>
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option has
the ability to read information not only from objects, but also from arrays using the same dotted object syntax as for objects. In addition to this, when working
with an array data source <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> can process the data to combine and display the data in simple forms (more complex forms can be defined
by using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> as a
function).</p>
<p>This example shows two different aspects of using <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> to read arrays:</p>
<p>This example shows two different aspects of using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> to read arrays:</p>
<ul>
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which
are automatically concatenated together. This is done by using array bracket syntax, with the
characters between the brackets being used as the glue between elements (e.g. <code>name[,
]</code>).</li>
<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from
array elements using dotted object notation (e.g. <code>hr.0</code>). Note that the order in which
the data can be used in the columns does not have to match the order in which it is defined in the
data source. The structure of the row's data source in this example is:</li>
<ul class="markdown">
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which are automatically concatenated together. This is done by
using array bracket syntax, with the characters between the brackets being used as the glue between elements (e.g. <code>name[, ]</code>).</li>
<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from array elements using dotted object notation (e.g.
<code>hr.0</code>). Note that the order in which the data can be used in the columns does not have to match the order in which it is defined in the data
source. The structure of the row's data source in this example is:</li>
</ul>
<pre>
<code class="multiline">{
@@ -121,9 +114,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/objects_subarrays.txt&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name[, ]&quot; },
@@ -136,46 +128,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -198,17 +184,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -221,19 +205,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -242,14 +225,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -267,21 +251,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -312,8 +293,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -321,10 +301,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -332,14 +310,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Orthogonal data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
@@ -40,22 +41,19 @@ $(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
rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects
as the data source for each row (i.e. each row has its data described by an object) as this can make
working with the data much more understandable, particularly if you are using the API and you don't
need to keep track of array indexes.</p>
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you
may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data
much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
<p>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option which you use to tell DataTables which property
to use from the data source object for each column.</p>
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
column.</p>
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the
table. The structure of the row's data source in this example is:</p>
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example
is:</p>
<pre>
<code class="multiline">{
"name": "Tiger Nixon",
@@ -106,9 +104,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
ajax: &quot;data/orthogonal.txt&quot;,
columns: [
{ data: &quot;name&quot; },
@@ -124,46 +121,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -186,17 +177,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -209,19 +198,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -230,14 +218,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -255,21 +244,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -300,8 +286,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -309,10 +294,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -320,14 +303,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax data source (arrays)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": "data/arrays.txt"
} );
} );
@@ -29,29 +30,23 @@ $(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
Ajax. This can be done, in its most simple form, by setting the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
JSON data source.</p>
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option also allows for more advanced configuration such as
altering how the Ajax request is made. See the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for
further information.</p>
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
<p>By default DataTables will assume that an array data source is to be used and will read the
information to be displayed in each column from the row's array using the column index, making working
with arrays very simple (note that this can be changed, or objects used may using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option, shown in other examples).</p>
<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array
using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other
examples).</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source, where
the structure of the row's data source in this example is:</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:</p>
<pre>
<code class="multiline">[
"Tiger Nixon",
@@ -63,6 +58,8 @@ $(document).ready(function() {
]
</code>
</pre>
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -99,53 +96,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -168,17 +158,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -191,19 +179,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -212,14 +199,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -237,21 +225,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -282,8 +267,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -291,10 +275,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -302,14 +284,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Add rows</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -45,21 +46,23 @@ $(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=
"//datatables.net/reference/api/row.add()"><code class="api" title="API method">row.add()</code></a>
API method. Simply call the API function with the data that is to be used for the new row (be it an
array or object). Multiple rows can be added using the <a href=
"//datatables.net/reference/api/rows.add()"><code class="api" title="API method">rows.add()</code></a>
method (note the plural).</p>
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object).
Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
"DataTables API method">row().remove()</code></a> methods.</p>
<p>Note that in order to see the new row in the table you must call the <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a> method,
which is easily done through the chaining that the DataTables API makes use of.</p>
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
<p>This example shows a single row being added each time the button below is clicked upon.</p>
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
DataTable.</p>
</div><button id="addRow">Add new row</button>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -94,8 +97,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
@@ -115,46 +117,40 @@ $(document).ready(function() {
$('#addRow').click();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -177,17 +173,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -200,19 +194,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -221,14 +214,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -246,9 +240,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li class="active"><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -257,8 +250,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -289,8 +282,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -298,10 +290,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -309,14 +299,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Using API in callbacks</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"initComplete": function () {
var api = this.api();
api.$('td').click( function () {
@@ -36,28 +37,22 @@ $(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
(for example <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"Initialisation option">initComplete</code></a>, <a href=
"//datatables.net/reference/option/rowCallback"><code class="option" title=
"Initialisation option">rowCallback</code></a> etc). The complicating issue with this is that the
object hasn't fully initialised, so you can't assign the result to a variable and then use that
variable in the callback. However, all of DataTables' callback functions are executed in the scope of
the DataTable instance, so you can use the Javascript special variable <code>this</code> to access the
API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag"
title="HTML tag">table</code> node.</p>
<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a>, <a href=
"//datatables.net/reference/option/rowCallback"><code class="option" title="DataTables initialisation option">rowCallback</code></a> etc). The complicating issue
with this is that the object hasn't fully initialised, so you can't assign the result to a variable and then use that variable in the callback. However, all of
DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable <code>this</code> to access the
API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag" title="HTML tag">table</code> node.</p>
<p>In this example you will be able to see that the <a href=
"//datatables.net/reference/api/%24()"><code class="api" title="API method">$()</code></a> method is
used to get all cell nodes in the table's body and then act on them (in this case adding a click
event). The action here is to apply a filter to the table with the value of what is in each cell.</p>
<p>In this example you will be able to see that the <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()</code></a>
method is used to get all cell nodes in the table's body and then act on them (in this case adding a click event). The action here is to apply a filter to the
table with the value of what is in each cell.</p>
<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event
after the table has been initialised - but the example shows the use of the API inside the
callbacks!</p>
<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example
shows the use of the API inside the callbacks!</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -553,9 +548,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;initComplete&quot;: function () {
var api = this.api();
api.$('td').click( function () {
@@ -565,46 +559,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -627,17 +615,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -650,19 +636,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -671,14 +656,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -696,9 +682,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -707,8 +692,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li class="active"><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -739,8 +724,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -748,10 +732,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -759,14 +741,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Index column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -42,25 +43,19 @@ $(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
a column which with a 'counter' for the row number. This column should not be sortable, and will change
dynamically as the ordering and searching applied to the table is altered by the end user.</p>
<p>Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. This column should not be sortable, and will
change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
<p>This example shows how this can be achieved with DataTables, where the first column is the counter
column, and is updated when ordering or searching occurs. This is done by listening for the <a href=
"//datatables.net/reference/event/order"><code class="event" title="Event">order</code></a> and
<a href="//datatables.net/reference/event/search"><code class="event" title="Event">search</code></a>
events emitted by the table. When these events are detected the <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title=
"API method">column().nodes()</code></a> method is used to get the TD/TH nodes for the target column
and the <code>each()</code> helper function used to iterate over each, which have their contents
updated as needed. Note that the <code>filter</code> and <code>order</code> options are using in the
<a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method to get the nodes in the current order and with the currently
applied filter.</p>
<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs.
This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href=
"//datatables.net/reference/event/search"><code class="event" title="DataTables event">search</code></a> events emitted by the table. When these events are
detected the <a href="//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> method is used
to get the TD/TH nodes for the target column and the <code>each()</code> helper function used to iterate over each, which have their contents updated as needed.
Note that the <code>filter</code> and <code>order</code> options are using in the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -556,8 +551,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var t = $('#example').DataTable( {
&quot;columnDefs&quot;: [ {
&quot;searchable&quot;: false,
@@ -574,46 +568,40 @@ $(document).ready(function() {
} ).draw();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -636,17 +624,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -659,19 +645,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -680,14 +665,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -705,9 +691,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -716,8 +701,8 @@ $(document).ready(function() {
<li class="active"><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -748,8 +733,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -757,10 +741,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -768,14 +750,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Form inputs</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -38,23 +39,19 @@ $(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
document (i.e. those rows / cells which are not needed are not inserted into the document). This
increases performance and compatibility, however, it means that submitting forms which span multiple
pages requires a little bit of additional work to get the information that is not in the document any
longer.</p>
<p>In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are
not inserted into the document). This increases performance and compatibility, however, it means that submitting forms which span multiple pages requires a little
bit of additional work to get the information that is not in the document any longer.</p>
<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title=
"API method">$()</code></a> method can be used to get nodes from the document regardless of paging,
ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api"
title="API method">$()</code></a> being used to get all <code class="tag" title="HTML tag">input</code>
elements from the table.</p>
<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()</code></a> method can be used to get nodes from the
document regardless of paging, ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api" title=
"DataTables API method">$()</code></a> being used to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an
Ajax call to the server with the form data could easily be performed.</p>
<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an Ajax call to the server with the form data could easily be
performed.</p>
</div><button type="submit">Submit form</button>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -132,8 +129,7 @@ $(document).ready(function() {
<tr>
<td>Ashton Cox</td>
<td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
<td><input type="text" id="row-3-position" name="row-3-position" value=
"Junior Technical Author"></td>
<td><input type="text" id="row-3-position" name="row-3-position" value="Junior Technical Author"></td>
<td><select size="1" id="row-3-office" name="row-3-office">
<option value="Edinburgh">
Edinburgh
@@ -159,8 +155,7 @@ $(document).ready(function() {
<tr>
<td>Cedric Kelly</td>
<td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
<td><input type="text" id="row-4-position" name="row-4-position" value=
"Senior Javascript Developer"></td>
<td><input type="text" id="row-4-position" name="row-4-position" value="Senior Javascript Developer"></td>
<td><select size="1" id="row-4-office" name="row-4-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -212,8 +207,7 @@ $(document).ready(function() {
<tr>
<td>Brielle Williamson</td>
<td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
<td><input type="text" id="row-6-position" name="row-6-position" value=
"Integration Specialist"></td>
<td><input type="text" id="row-6-position" name="row-6-position" value="Integration Specialist"></td>
<td><select size="1" id="row-6-office" name="row-6-office">
<option value="Edinburgh">
Edinburgh
@@ -265,8 +259,7 @@ $(document).ready(function() {
<tr>
<td>Rhona Davidson</td>
<td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
<td><input type="text" id="row-8-position" name="row-8-position" value=
"Integration Specialist"></td>
<td><input type="text" id="row-8-position" name="row-8-position" value="Integration Specialist"></td>
<td><select size="1" id="row-8-office" name="row-8-office">
<option value="Edinburgh">
Edinburgh
@@ -292,8 +285,7 @@ $(document).ready(function() {
<tr>
<td>Colleen Hurst</td>
<td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
<td><input type="text" id="row-9-position" name="row-9-position" value=
"Javascript Developer"></td>
<td><input type="text" id="row-9-position" name="row-9-position" value="Javascript Developer"></td>
<td><select size="1" id="row-9-office" name="row-9-office">
<option value="Edinburgh">
Edinburgh
@@ -319,8 +311,7 @@ $(document).ready(function() {
<tr>
<td>Sonya Frost</td>
<td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
<td><input type="text" id="row-10-position" name="row-10-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-10-position" name="row-10-position" value="Software Engineer"></td>
<td><select size="1" id="row-10-office" name="row-10-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -398,8 +389,7 @@ $(document).ready(function() {
<tr>
<td>Charde Marshall</td>
<td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
<td><input type="text" id="row-13-position" name="row-13-position" value=
"Regional Director"></td>
<td><input type="text" id="row-13-position" name="row-13-position" value="Regional Director"></td>
<td><select size="1" id="row-13-office" name="row-13-office">
<option value="Edinburgh">
Edinburgh
@@ -425,8 +415,7 @@ $(document).ready(function() {
<tr>
<td>Haley Kennedy</td>
<td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
<td><input type="text" id="row-14-position" name="row-14-position" value=
"Senior Marketing Designer"></td>
<td><input type="text" id="row-14-position" name="row-14-position" value="Senior Marketing Designer"></td>
<td><select size="1" id="row-14-office" name="row-14-office">
<option value="Edinburgh">
Edinburgh
@@ -452,8 +441,7 @@ $(document).ready(function() {
<tr>
<td>Tatyana Fitzpatrick</td>
<td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
<td><input type="text" id="row-15-position" name="row-15-position" value=
"Regional Director"></td>
<td><input type="text" id="row-15-position" name="row-15-position" value="Regional Director"></td>
<td><select size="1" id="row-15-office" name="row-15-office">
<option value="Edinburgh">
Edinburgh
@@ -479,8 +467,7 @@ $(document).ready(function() {
<tr>
<td>Michael Silva</td>
<td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
<td><input type="text" id="row-16-position" name="row-16-position" value=
"Marketing Designer"></td>
<td><input type="text" id="row-16-position" name="row-16-position" value="Marketing Designer"></td>
<td><select size="1" id="row-16-office" name="row-16-office">
<option value="Edinburgh">
Edinburgh
@@ -506,8 +493,7 @@ $(document).ready(function() {
<tr>
<td>Paul Byrd</td>
<td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
<td><input type="text" id="row-17-position" name="row-17-position" value=
"Chief Financial Officer (CFO)"></td>
<td><input type="text" id="row-17-position" name="row-17-position" value="Chief Financial Officer (CFO)"></td>
<td><select size="1" id="row-17-office" name="row-17-office">
<option value="Edinburgh">
Edinburgh
@@ -533,8 +519,7 @@ $(document).ready(function() {
<tr>
<td>Gloria Little</td>
<td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
<td><input type="text" id="row-18-position" name="row-18-position" value=
"Systems Administrator"></td>
<td><input type="text" id="row-18-position" name="row-18-position" value="Systems Administrator"></td>
<td><select size="1" id="row-18-office" name="row-18-office">
<option value="Edinburgh">
Edinburgh
@@ -560,8 +545,7 @@ $(document).ready(function() {
<tr>
<td>Bradley Greer</td>
<td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
<td><input type="text" id="row-19-position" name="row-19-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-19-position" name="row-19-position" value="Software Engineer"></td>
<td><select size="1" id="row-19-office" name="row-19-office">
<option value="Edinburgh">
Edinburgh
@@ -613,8 +597,7 @@ $(document).ready(function() {
<tr>
<td>Jenette Caldwell</td>
<td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
<td><input type="text" id="row-21-position" name="row-21-position" value=
"Development Lead"></td>
<td><input type="text" id="row-21-position" name="row-21-position" value="Development Lead"></td>
<td><select size="1" id="row-21-office" name="row-21-office">
<option value="Edinburgh">
Edinburgh
@@ -640,8 +623,7 @@ $(document).ready(function() {
<tr>
<td>Yuri Berry</td>
<td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
<td><input type="text" id="row-22-position" name="row-22-position" value=
"Chief Marketing Officer (CMO)"></td>
<td><input type="text" id="row-22-position" name="row-22-position" value="Chief Marketing Officer (CMO)"></td>
<td><select size="1" id="row-22-office" name="row-22-office">
<option value="Edinburgh">
Edinburgh
@@ -667,8 +649,7 @@ $(document).ready(function() {
<tr>
<td>Caesar Vance</td>
<td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
<td><input type="text" id="row-23-position" name="row-23-position" value=
"Pre-Sales Support"></td>
<td><input type="text" id="row-23-position" name="row-23-position" value="Pre-Sales Support"></td>
<td><select size="1" id="row-23-office" name="row-23-office">
<option value="Edinburgh">
Edinburgh
@@ -694,8 +675,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
<td><input type="text" id="row-24-position" name="row-24-position" value=
"Sales Assistant"></td>
<td><input type="text" id="row-24-position" name="row-24-position" value="Sales Assistant"></td>
<td><select size="1" id="row-24-office" name="row-24-office">
<option value="Edinburgh">
Edinburgh
@@ -721,8 +701,7 @@ $(document).ready(function() {
<tr>
<td>Angelica Ramos</td>
<td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
<td><input type="text" id="row-25-position" name="row-25-position" value=
"Chief Executive Officer (CEO)"></td>
<td><input type="text" id="row-25-position" name="row-25-position" value="Chief Executive Officer (CEO)"></td>
<td><select size="1" id="row-25-office" name="row-25-office">
<option value="Edinburgh">
Edinburgh
@@ -774,8 +753,7 @@ $(document).ready(function() {
<tr>
<td>Jennifer Chang</td>
<td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
<td><input type="text" id="row-27-position" name="row-27-position" value=
"Regional Director"></td>
<td><input type="text" id="row-27-position" name="row-27-position" value="Regional Director"></td>
<td><select size="1" id="row-27-office" name="row-27-office">
<option value="Edinburgh">
Edinburgh
@@ -801,8 +779,7 @@ $(document).ready(function() {
<tr>
<td>Brenden Wagner</td>
<td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
<td><input type="text" id="row-28-position" name="row-28-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-28-position" name="row-28-position" value="Software Engineer"></td>
<td><select size="1" id="row-28-office" name="row-28-office">
<option value="Edinburgh">
Edinburgh
@@ -828,8 +805,7 @@ $(document).ready(function() {
<tr>
<td>Fiona Green</td>
<td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
<td><input type="text" id="row-29-position" name="row-29-position" value=
"Chief Operating Officer (COO)"></td>
<td><input type="text" id="row-29-position" name="row-29-position" value="Chief Operating Officer (COO)"></td>
<td><select size="1" id="row-29-office" name="row-29-office">
<option value="Edinburgh">
Edinburgh
@@ -855,8 +831,7 @@ $(document).ready(function() {
<tr>
<td>Shou Itou</td>
<td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
<td><input type="text" id="row-30-position" name="row-30-position" value=
"Regional Marketing"></td>
<td><input type="text" id="row-30-position" name="row-30-position" value="Regional Marketing"></td>
<td><select size="1" id="row-30-office" name="row-30-office">
<option value="Edinburgh">
Edinburgh
@@ -882,8 +857,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
<td><input type="text" id="row-31-position" name="row-31-position" value=
"Integration Specialist"></td>
<td><input type="text" id="row-31-position" name="row-31-position" value="Integration Specialist"></td>
<td><select size="1" id="row-31-office" name="row-31-office">
<option value="Edinburgh">
Edinburgh
@@ -935,8 +909,7 @@ $(document).ready(function() {
<tr>
<td>Prescott Bartlett</td>
<td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
<td><input type="text" id="row-33-position" name="row-33-position" value=
"Technical Author"></td>
<td><input type="text" id="row-33-position" name="row-33-position" value="Technical Author"></td>
<td><select size="1" id="row-33-office" name="row-33-office">
<option value="Edinburgh">
Edinburgh
@@ -988,8 +961,7 @@ $(document).ready(function() {
<tr>
<td>Martena Mccray</td>
<td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
<td><input type="text" id="row-35-position" name="row-35-position" value=
"Post-Sales support"></td>
<td><input type="text" id="row-35-position" name="row-35-position" value="Post-Sales support"></td>
<td><select size="1" id="row-35-office" name="row-35-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -1015,8 +987,7 @@ $(document).ready(function() {
<tr>
<td>Unity Butler</td>
<td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
<td><input type="text" id="row-36-position" name="row-36-position" value=
"Marketing Designer"></td>
<td><input type="text" id="row-36-position" name="row-36-position" value="Marketing Designer"></td>
<td><select size="1" id="row-36-office" name="row-36-office">
<option value="Edinburgh">
Edinburgh
@@ -1094,8 +1065,7 @@ $(document).ready(function() {
<tr>
<td>Vivian Harrell</td>
<td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
<td><input type="text" id="row-39-position" name="row-39-position" value=
"Financial Controller"></td>
<td><input type="text" id="row-39-position" name="row-39-position" value="Financial Controller"></td>
<td><select size="1" id="row-39-office" name="row-39-office">
<option value="Edinburgh">
Edinburgh
@@ -1173,8 +1143,7 @@ $(document).ready(function() {
<tr>
<td>Olivia Liang</td>
<td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
<td><input type="text" id="row-42-position" name="row-42-position" value=
"Support Engineer"></td>
<td><input type="text" id="row-42-position" name="row-42-position" value="Support Engineer"></td>
<td><select size="1" id="row-42-office" name="row-42-office">
<option value="Edinburgh">
Edinburgh
@@ -1200,8 +1169,7 @@ $(document).ready(function() {
<tr>
<td>Bruno Nash</td>
<td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
<td><input type="text" id="row-43-position" name="row-43-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-43-position" name="row-43-position" value="Software Engineer"></td>
<td><select size="1" id="row-43-office" name="row-43-office">
<option value="Edinburgh">
Edinburgh
@@ -1227,8 +1195,7 @@ $(document).ready(function() {
<tr>
<td>Sakura Yamamoto</td>
<td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
<td><input type="text" id="row-44-position" name="row-44-position" value=
"Support Engineer"></td>
<td><input type="text" id="row-44-position" name="row-44-position" value="Support Engineer"></td>
<td><select size="1" id="row-44-office" name="row-44-office">
<option value="Edinburgh">
Edinburgh
@@ -1280,8 +1247,7 @@ $(document).ready(function() {
<tr>
<td>Finn Camacho</td>
<td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
<td><input type="text" id="row-46-position" name="row-46-position" value=
"Support Engineer"></td>
<td><input type="text" id="row-46-position" name="row-46-position" value="Support Engineer"></td>
<td><select size="1" id="row-46-office" name="row-46-office">
<option value="Edinburgh">
Edinburgh
@@ -1307,8 +1273,7 @@ $(document).ready(function() {
<tr>
<td>Serge Baldwin</td>
<td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
<td><input type="text" id="row-47-position" name="row-47-position" value=
"Data Coordinator"></td>
<td><input type="text" id="row-47-position" name="row-47-position" value="Data Coordinator"></td>
<td><select size="1" id="row-47-office" name="row-47-office">
<option value="Edinburgh">
Edinburgh
@@ -1334,8 +1299,7 @@ $(document).ready(function() {
<tr>
<td>Zenaida Frank</td>
<td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
<td><input type="text" id="row-48-position" name="row-48-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-48-position" name="row-48-position" value="Software Engineer"></td>
<td><select size="1" id="row-48-office" name="row-48-office">
<option value="Edinburgh">
Edinburgh
@@ -1361,8 +1325,7 @@ $(document).ready(function() {
<tr>
<td>Zorita Serrano</td>
<td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
<td><input type="text" id="row-49-position" name="row-49-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-49-position" name="row-49-position" value="Software Engineer"></td>
<td><select size="1" id="row-49-office" name="row-49-office">
<option value="Edinburgh">
Edinburgh
@@ -1388,8 +1351,7 @@ $(document).ready(function() {
<tr>
<td>Jennifer Acosta</td>
<td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
<td><input type="text" id="row-50-position" name="row-50-position" value=
"Junior Javascript Developer"></td>
<td><input type="text" id="row-50-position" name="row-50-position" value="Junior Javascript Developer"></td>
<td><select size="1" id="row-50-office" name="row-50-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -1415,8 +1377,7 @@ $(document).ready(function() {
<tr>
<td>Cara Stevens</td>
<td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
<td><input type="text" id="row-51-position" name="row-51-position" value=
"Sales Assistant"></td>
<td><input type="text" id="row-51-position" name="row-51-position" value="Sales Assistant"></td>
<td><select size="1" id="row-51-office" name="row-51-office">
<option value="Edinburgh">
Edinburgh
@@ -1442,8 +1403,7 @@ $(document).ready(function() {
<tr>
<td>Hermione Butler</td>
<td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
<td><input type="text" id="row-52-position" name="row-52-position" value=
"Regional Director"></td>
<td><input type="text" id="row-52-position" name="row-52-position" value="Regional Director"></td>
<td><select size="1" id="row-52-office" name="row-52-office">
<option value="Edinburgh">
Edinburgh
@@ -1469,8 +1429,7 @@ $(document).ready(function() {
<tr>
<td>Lael Greer</td>
<td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
<td><input type="text" id="row-53-position" name="row-53-position" value=
"Systems Administrator"></td>
<td><input type="text" id="row-53-position" name="row-53-position" value="Systems Administrator"></td>
<td><select size="1" id="row-53-office" name="row-53-office">
<option value="Edinburgh">
Edinburgh
@@ -1522,8 +1481,7 @@ $(document).ready(function() {
<tr>
<td>Shad Decker</td>
<td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
<td><input type="text" id="row-55-position" name="row-55-position" value=
"Regional Director"></td>
<td><input type="text" id="row-55-position" name="row-55-position" value="Regional Director"></td>
<td><select size="1" id="row-55-office" name="row-55-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -1549,8 +1507,7 @@ $(document).ready(function() {
<tr>
<td>Michael Bruce</td>
<td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
<td><input type="text" id="row-56-position" name="row-56-position" value=
"Javascript Developer"></td>
<td><input type="text" id="row-56-position" name="row-56-position" value="Javascript Developer"></td>
<td><select size="1" id="row-56-office" name="row-56-office">
<option value="Edinburgh">
Edinburgh
@@ -1576,8 +1533,7 @@ $(document).ready(function() {
<tr>
<td>Donna Snider</td>
<td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
<td><input type="text" id="row-57-position" name="row-57-position" value=
"Customer Support"></td>
<td><input type="text" id="row-57-position" name="row-57-position" value="Customer Support"></td>
<td><select size="1" id="row-57-office" name="row-57-office">
<option value="Edinburgh">
Edinburgh
@@ -1613,8 +1569,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
@@ -1627,46 +1582,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -1689,17 +1638,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -1712,19 +1659,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -1733,14 +1679,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -1758,9 +1705,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -1769,8 +1715,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -1801,8 +1747,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -1810,10 +1755,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -1821,14 +1764,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Highlighting rows and columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -17,7 +18,7 @@ td.highlight {
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -49,21 +50,17 @@ $(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
is in a table, particularly if you have a lot of narrow columns. Of course the highlighting of a row is
easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow
columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
<p>This example shows that in action on DataTable by making use of the <a href=
"//datatables.net/reference/api/cell().index()"><code class="api" title=
"API method">cell().index()</code></a> method to get the index of the column that is to be operated on,
and then the <a href="//datatables.net/reference/api/cells().nodes()"><code class="api" title=
"API method">cells().nodes()</code></a> and <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title=
"API method">column().nodes()</code></a> methods to remove old classes and apply the new highlighted
class, respectively.</p>
<p>This example shows that in action on DataTable by making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
"DataTables API method">cell().index()</code></a> method to get the index of the column that is to be operated on, and then the <a href=
"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()</code></a> and <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> methods to remove old classes and
apply the new highlighted class, respectively.</p>
</div>
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
@@ -559,8 +556,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var lastIdx = null;
var table = $('#example').DataTable();
@@ -578,48 +574,42 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">td.highlight {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">td.highlight {
background-color: whitesmoke !important;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -642,17 +632,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -665,19 +653,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -686,14 +673,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -711,9 +699,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li class="active"><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -722,8 +709,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -754,8 +741,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -763,10 +749,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -774,14 +758,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -15,12 +16,11 @@
<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
DataTables API is designed to be simple, consistent and easy to use. The examples in this section show
how the API may be used.</p>
<p>The real power of DataTables can be exploited through the use of the API that it presents. The DataTables API is designed to be simple, consistent and easy to
use. The examples in this section show how the API may be used.</p>
</div>
</section>
</div>
@@ -35,9 +35,8 @@
<h3><a href="./index.html">API</a></h3>
<ul class="toc">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -46,21 +45,18 @@
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,15 +3,22 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Individual column filtering (text inputs)</title>
<title>DataTables example - Individual column searching (text inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -27,13 +34,18 @@ $(document).ready(function() {
// DataTable
var table = $('#example').DataTable();
// Apply the filter
$("#example tfoot input").on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
@@ -44,30 +56,23 @@ $(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 searching (text inputs)</span></h1>
<div class="info">
<p>The filtering functionality that is provided by DataTables is very useful for quickly search through
the information in the table - however the search is global, and you may wish to present controls to
filter on specific columns only.</p>
<p>The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is
global, and you may wish to present controls to search on specific columns only.</p>
<p>DataTables has the ability to apply filtering to a specific column through the <a href=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a> method (note that the name of the method is
<code>search</code> not <code>filter</code> since <a href=
"//datatables.net/reference/api/filter()"><code class="api" title="API method">filter()</code></a> is
used to apply a filter to a data set).</p>
<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code> since <a href=
"//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p>
<p>The column filters are cumulative, so you can apply multiple individual column filters, in addition
to the global filter, allowing complex filtering options to be presented to the user.</p>
<p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options
to be presented to the user.</p>
<p>This examples shows text elements being used with the <a href=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a> method to add input controls in the footer of the table for
each column. Note that the <code>*index*:visible</code> option is used for the column selector to
ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method takes into account any hidden columns when selecting the column
to act upon.</p>
<p>This examples shows text elements being used with the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()</code></a> method to add input controls in the footer of the table for each column. Note that the
<code>*index*:visible</code> option is used for the column selector to ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -563,8 +568,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
@@ -573,56 +577,59 @@ $(document).ready(function() {
// DataTable
var table = $('#example').DataTable();
// Apply the filter
$(&quot;#example tfoot input&quot;).on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -645,17 +652,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -668,19 +673,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -689,14 +693,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -714,10 +719,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li class="active"><a href="./multi_filter.html">Individual column filtering (text
inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li class="active"><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -726,8 +729,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -758,8 +761,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -767,10 +769,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -778,14 +778,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,15 +3,16 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Individual column filtering (select inputs)</title>
<title>DataTables example - Individual column searching (select inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,20 +20,27 @@
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
$("#example tfoot th").each( function ( i ) {
var select = $('<select><option value=""></option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
table.column( i )
.search( $(this).val() )
.draw();
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
}
} );
} );
@@ -43,24 +51,32 @@ $(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 searching (select inputs)</span></h1>
<div class="info">
<p>This example is almost identical to text based individual column example and provides the same
functionality, but in this case using <code class="tag" title="HTML tag">select</code> input
controls.</p>
<p>This example is almost identical to text based individual column example and provides the same functionality, but in this case using <code class="tag" title=
"HTML tag">select</code> input controls.</p>
<p>After the table is initialised, the API is used to build the <code class="tag" title=
"HTML tag">select</code> inputs through the use of the <a href=
"//datatables.net/reference/api/column().data()"><code class="api" title=
"API method">column().data()</code></a> method to get the data for each column in turn. The helper
methods <a href="//datatables.net/reference/api/unique()"><code class="api" title=
"API method">unique()</code></a> and <a href="//datatables.net/reference/api/sort()"><code class="api"
title="API method">sort()</code></a> are also used to reduce the data for set input to unique and
ordered elements. Finally the <code>change</code> event from the <code class="tag" title=
"HTML tag">select</code> input is used to trigger a column search using the <a href=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a> method.</p>
<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of the <a href=
"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> method to get the data for each column
in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
"//datatables.net/reference/api/sort()"><code class="api" title="DataTables API method">sort()</code></a> are also used to reduce the data for set input to unique
and ordered elements. Finally the <code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search
using the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method.</p>
<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information
on the search options in DataTables API please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
"DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
"DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions
respectively.</p>
<p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete</code></a> a callback function that is triggered when the table has fully loaded. Use of this callback isn't
actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code
after the data has been loaded.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -556,65 +572,65 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
$(&quot;#example tfoot th&quot;).each( function ( i ) {
var select = $('&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;')
.appendTo( $(this).empty() )
.on( 'change', function () {
table.column( i )
.search( $(this).val() )
.draw();
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '&lt;option value=&quot;'+d+'&quot;&gt;'+d+'&lt;/option&gt;' )
} );
} );
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '&lt;option value=&quot;'+d+'&quot;&gt;'+d+'&lt;/option&gt;' )
} );
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -637,17 +653,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -660,19 +674,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -681,14 +694,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -706,9 +720,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li class="active"><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li class="active"><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -717,8 +730,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -749,8 +762,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -758,10 +770,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -769,14 +779,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,15 +3,16 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Filtering API (regular expressions)</title>
<title>DataTables example - Search API (regular expressions)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -35,7 +36,7 @@ function filterColumn ( i ) {
}
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
@@ -53,87 +54,76 @@ $(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>Search 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
DataTables provides a number of methods for you to control this interaction. There are APIs for the
global filter (<a href="//datatables.net/reference/api/search()"><code class="api" title=
"API method">search()</code></a>) and for each individual column (<a href=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a>).</p>
<p>Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this
interaction. There are APIs for the global search (<a href="//datatables.net/reference/api/search()"><code class="api" title=
"DataTables API method">search()</code></a>) and for each individual column (<a href="//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()</code></a>).</p>
<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api"
title="API method">draw()</code></a> method after performing the search, in order for the results to be
displayed.</p>
<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method after
performing the search, in order for the results to be displayed.</p>
<p>Each filter (global or column) can be marked as a regular expression (allowing you to create very
complex interactions) and as a smart filter or not. When smart filtering is enabled on a particular
filter, DataTables will modify the user input string to a complex regular expression which can make
filtering more intuitive.</p>
<p>Each search (global or column) can be marked as a regular expression (allowing you to create very complex interactions) and as a smart search or not. When smart
searching is enabled on a particular search, DataTables will modify the user input string to a complex regular expression which can make searching more
intuitive.</p>
<p>This example allows you to "play" with the various filtering options that DataTables provides.</p>
<p>This example allows you to "play" with the various searching options that DataTables provides.</p>
</div>
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
<thead>
<tr>
<th>Target</th>
<th>Filter text</th>
<th>Search text</th>
<th>Treat as regex</th>
<th>Use smart filter</th>
<th>Use smart search</th>
</tr>
</thead>
<tbody>
<tr id="filter_global">
<td>Global filtering</td>
<td>Global search</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked=
"checked"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
</tr>
<tr id="filter_col1" data-column="0">
<td>Column - Name</td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked=
"checked"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
</tr>
<tr id="filter_col2" data-column="1">
<td>Column - Position</td>
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked=
"checked"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
</tr>
<tr id="filter_col3" data-column="2">
<td>Column - Office</td>
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked=
"checked"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
</tr>
<tr id="filter_col4" data-column="3">
<td>Column - Age</td>
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked=
"checked"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
</tr>
<tr id="filter_col5" data-column="4">
<td>Column - Start date</td>
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked=
"checked"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
</tr>
<tr id="filter_col6" data-column="5">
<td>Column - Salary</td>
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked=
"checked"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
</tr>
</tbody>
</table>
@@ -631,8 +621,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">function filterGlobal () {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val(),
$('#global_regex').prop('checked'),
@@ -649,7 +638,7 @@ function filterColumn ( i ) {
}
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
@@ -660,46 +649,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -722,17 +705,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -745,19 +726,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -766,14 +746,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -791,9 +772,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -802,8 +782,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li class="active"><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li class="active"><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -834,8 +814,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -843,10 +822,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -854,14 +831,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -14,12 +15,12 @@ td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -50,7 +51,7 @@ $(document).ready(function() {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"class": 'details-control',
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
@@ -65,7 +66,7 @@ $(document).ready(function() {
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
@@ -88,22 +89,18 @@ $(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>
row in the DataTable. This can be used to show additional information about a row, useful for cases
where you wish to convey more information about a row than there is space for in the host table.</p>
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional
information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
"api" title="API method">row().child</code></a> methods to firstly check if a row is already displayed,
and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
"API method">row().child.hide()</code></a>), otherwise show it (<a href=
"//datatables.net/reference/api/row().child.show()"><code class="api" title=
"API method">row().child.show()</code></a>). The content of the child row is, in this example, defined
by the <code>formatDetails()</code> function, but you would replace that with whatever you wanted to
show the content required, possibly including, for example, an Ajax call to the server to obtain the
extra information to show.</p>
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
"DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but
you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra
information to show.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -138,8 +135,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">/* Formatting function for row details - modify as you need */
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '&lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;padding-left:50px;&quot;&gt;'+
@@ -163,7 +159,7 @@ $(document).ready(function() {
&quot;ajax&quot;: &quot;../ajax/data/objects.txt&quot;,
&quot;columns&quot;: [
{
&quot;class&quot;: 'details-control',
&quot;className&quot;: 'details-control',
&quot;orderable&quot;: false,
&quot;data&quot;: null,
&quot;defaultContent&quot;: ''
@@ -178,7 +174,7 @@ $(document).ready(function() {
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
@@ -194,52 +190,46 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">td.details-control {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -262,17 +252,15 @@ tr.details td.details-control {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -285,19 +273,18 @@ tr.details td.details-control {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -306,14 +293,15 @@ tr.details td.details-control {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -331,20 +319,18 @@ tr.details td.details-control {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li class="active"><a href="./row_details.html">Child rows (show extra / detailed
information)</a></li>
<li class="active"><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="./form.html">Form inputs</a></li>
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -375,8 +361,7 @@ tr.details td.details-control {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -384,10 +369,8 @@ tr.details td.details-control {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -395,14 +378,11 @@ tr.details td.details-control {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row selection (multiple rows)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -37,19 +38,16 @@ $(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.
This can be done by simply using a click event to add / remove a class on the table rows. The <a href=
"//datatables.net/reference/api/rows().data()"><code class="api" title=
"API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In
this case it is simply counting the number of selected rows, but much more complex interactions can
easily be developed.</p>
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add /
remove a class on the table rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
"DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
selected rows, but much more complex interactions can easily be developed.</p>
<p>If you are looking for a more complete row selection option <a href=
"http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete API for
selecting rows and acting upon those selected rows.</p>
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
</div><button id="button">Row count</button>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -545,8 +543,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
@@ -558,46 +555,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -620,17 +611,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -643,19 +632,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -664,14 +652,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -689,9 +678,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li class="active"><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -700,8 +688,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -732,8 +720,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -741,10 +728,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -752,14 +737,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row selection and deletion (single row)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -43,23 +44,20 @@ $(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
be selected. This is done simply by checking to see if the row already has a selected class or not, and
if so removing it, if not then the class is removed from any other row in the table which does have it
and applied to the row to be selected.</p>
<p>This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the
row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to
the row to be selected.</p>
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
"API method">row().remove()</code></a> method which will delete a row from a table, and the <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a> method
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging
(without the <code>false</code> parameter the paging would be reset to the first page).</p>
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which
will delete a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
reset to the first page).</p>
<p>If you are looking for a more complete row selection option <a href=
"http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete API for
selecting rows and acting upon those selected rows.</p>
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
</div><button id="button">Delete selected row</button>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -555,8 +553,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
@@ -574,46 +571,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -636,17 +627,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -659,19 +648,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -680,14 +668,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -705,20 +694,18 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
<li class="active"><a href="./select_single_row.html">Row selection and deletion (single
row)</a></li>
<li class="active"><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="./form.html">Form inputs</a></li>
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -749,8 +736,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -758,10 +744,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -769,14 +753,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Show / hide columns dynamically</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -42,31 +43,25 @@ $(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=
"//datatables.net/reference/api/column().visible()"><code class="api" title=
"API method">column().visible()</code></a> API method to dynamically show and hide columns in a table.
Also included here is scrolling, just to show it enabled with this API method, although that is not
required for the API function to work.</p>
<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
"DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it
enabled with this API method, although that is not required for the API function to work.</p>
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href=
"//datatables.net/reference/api/columns()"><code class="api" title="API method">columns()</code></a>
method to select multiple columns and then using the <a href=
"//datatables.net/reference/api/columns().visible()"><code class="api" title=
"API method">columns().visible()</code></a> method to set their state.</p>
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
<p>If you are looking for a more complete column visibility interaction controls <a href=
"http://datatables.net/extras/colvis">ColVis for DataTables</a> provides a complete interface for
allowing the user to show and hide columns in the table.</p>
<p>If you are looking for a more complete column visibility interaction controls, check out the <a href="https://datatables.net/extras/buttons">Buttons extension
for DataTables</a> provides a comprehensive module for column visibility control.</p>
</div>
<div>
Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column=
"1">Position</a> - <a class="toggle-vis" data-column="2">Office</a> - <a class="toggle-vis"
data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis"
data-column="5">Salary</a>
Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
"5">Salary</a>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -562,8 +557,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;paging&quot;: false
@@ -580,46 +574,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -642,17 +630,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -665,19 +651,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -686,14 +671,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -711,9 +697,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -722,8 +707,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li class="active"><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -754,8 +739,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -763,10 +747,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -774,14 +756,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,548 +3,104 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scrolling and jQuery UI tabs</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">
<title>DataTables example - Scrolling and Bootstrap tabs</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$("#tabs").tabs( {
"activate": function(event, ui) {
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
}
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.display').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
"jQueryUI": true
$('table.table').DataTable( {
ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
// Apply a search to the second table for the demo
$('#myTable2').DataTable().search( 'New York' ).draw();
} );
</script>
</head>
<body class="dt-example">
<body class="dt-example dt-example-bootstrap">
<div class="container">
<section>
<h1>DataTables example <span>- Scrolling and jQuery UI tabs</span></h1>
<h1>DataTables example <span>Scrolling and Bootstrap tabs</span></h1>
<div class="info">
<p>This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed
any other method whereby the table is in a hidden, <code>display:none</code>, element when it is
initialised). The reason this requires special consideration, is that when the DataTable is initialised
in a hidden element the browser doesn't have any measurements with which to give the DataTable, and
this will result in the misalignment of columns when scrolling is enabled.</p>
<p>This example shows how DataTables with scrolling can be used together with <a href="http://getbootstrap.com/javascript/#tabs">Bootstrap tabs</a> (or indeed any
other method whereby the table is in a hidden, <code>display:none</code>, element when it is initialised).</p>
<p>This misalignment can be corrected by the <a href=
"//datatables.net/reference/api/columns.adjust()"><code class="api" title=
"API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has
dimensions).</p>
<p>The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with
which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.</p>
<p>This example shows how the jQuery UI <code>show</code> event can be used to trigger this method
call. The visible tables on the page are selected using the static <code>dt-api-static tables()</code>
method and passing the result to <a href="//datatables.net/reference/api/columns.adjust()"><code class=
"api" title="API method">columns.adjust()</code></a>.</p>
<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
"DataTables API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has dimensions).</p>
<p>This example shows how the Bootstrap <code>shown.bs.tab</code> event can be used to trigger this method call. The visible tables on the page are selected using
the static <a href="//datatables.net/reference/api/%24.fn.dataTable.tables()"><code class="api" title="DataTables API method">$.fn.dataTable.tables()</code></a>
method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method
on them.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tab-table1" data-toggle="tab">Table 1</a></li>
<li><a href="#tab-table2" data-toggle="tab">Table 2</a></li>
</ul>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<div class="tab-content">
<div class="tab-pane active" id="tab-table1">
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
<div class="tab-pane" id="tab-table2">
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -556,66 +112,59 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$(&quot;#tabs&quot;).tabs( {
&quot;activate&quot;: function(event, ui) {
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
}
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('a[data-toggle=&quot;tab&quot;]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.display').dataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;scrollCollapse&quot;: true,
&quot;paging&quot;: false,
&quot;jQueryUI&quot;: true
$('table.table').DataTable( {
ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
// Apply a search to the second table for the demo
$('#myTable2').DataTable().search( 'New York' ).draw();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href=
"//code.jquery.com/ui/1.10.3/jquery-ui.js">//code.jquery.com/ui/1.10.3/jquery-ui.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
<li><a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
<li><a href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css</a></li>
<li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css</a></li>
<li><a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -638,17 +187,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -661,19 +208,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -682,14 +228,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -707,9 +254,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
@@ -718,9 +264,8 @@ $(document).ready(function() {
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li class="active"><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI
tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li class="active"><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -751,8 +296,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -760,10 +304,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -771,14 +313,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Alternative pagination</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"pagingType": "full_numbers"
} );
} );
@@ -29,39 +30,32 @@ $(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
numbers in-between) is fine for most situations, but there are cases where you may wish to customise
the options presented to the end user. This is done through DataTables' extensible pagination
mechanism, the <a href="//datatables.net/reference/option/pagingType"><code class="option" title=
"Initialisation option">pagingType</code></a> option.</p>
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are
cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the <a href=
"//datatables.net/reference/option/pagingType"><code class="option" title="DataTables initialisation option">pagingType</code></a> option.</p>
<p>There are four built-in options for which pagination controls DataTables should show:</p>
<ul>
<ul class="markdown">
<li><code class="string" title="String">numbers</code> - Page number buttons only</li>
<li><code class="string" title="String">simple</code> - 'Previous' and 'Next' buttons only</li>
<li><code class="string" title="String">simple_numbers</code> - 'Previous' and 'Next' buttons, plus
page numbers</li>
<li><code class="string" title="String">full</code> - 'First', 'Previous', 'Next' and 'Last'
buttons</li>
<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and
'Last' buttons, plus page numbers</li>
<li><code class="string" title="String">simple_numbers</code> - 'Previous' and 'Next' buttons, plus page numbers</li>
<li><code class="string" title="String">full</code> - 'First', 'Previous', 'Next' and 'Last' buttons</li>
<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers</li>
</ul>
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation
options of DataTables; <a href="//datatables.net/reference/option/language.paginate.first"><code class=
"option" title="Initialisation option">language.paginate.first</code></a>, <a href=
"//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
"Initialisation option">language.paginate.previous</code></a> etc.</p>
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; <a href=
"//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
"DataTables initialisation option">language.paginate.previous</code></a> etc.</p>
<p>Additional options for the buttons that are shown can be added through the use of pagination type
plug-ins. Furthermore, how the buttons are actually shown can be altered through the use of plug-in
pagination renderers.</p>
<p>Additional options for the buttons that are shown can be added through the use of pagination type plug-ins. Furthermore, how the buttons are actually shown can
be altered through the use of plug-in pagination renderers.</p>
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of
pagination.</p>
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -557,53 +551,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;pagingType&quot;: &quot;full_numbers&quot;
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -632,9 +619,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li class="active"><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -647,19 +634,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -668,14 +654,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -693,21 +680,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -738,8 +722,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -747,10 +730,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -758,14 +739,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language - Comma decimal place</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"language": {
"decimal": ",",
"thousands": "."
@@ -32,30 +33,24 @@ $(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=
"http://en.wikipedia.org/wiki/Decimal_mark">many parts of the world use a comma</a> (<code>,</code>)
and other characters such as the Unicode decimal separator (<code>&#9110;</code>) or a dash
(<code>-</code>) are often used to show the decimal place in a displayed number.</p>
<p>A dot (<code>.</code>) is used to mark the decimal place in Javascript, however, <a href="http://en.wikipedia.org/wiki/Decimal_mark">many parts of the world use
a comma</a> (<code>,</code>) and other characters such as the Unicode decimal separator (<code>&#9110;</code>) or a dash (<code>-</code>) are often used to show
the decimal place in a displayed number.</p>
<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however,
DataTables' type detection and sorting methods can be instructed through the <a href=
"//datatables.net/reference/option/language.decimal"><code class="option" title=
"Initialisation option">language.decimal</code></a> option which character is used as the decimal place
in your numbers. This will be used to correctly adjust DataTables' type detection and sorting
algorithms to sort numbers in your table.</p>
<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however, DataTables' type detection and sorting methods can be instructed
through the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title="DataTables initialisation option">language.decimal</code></a>
option which character is used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type detection and sorting algorithms to
sort numbers in your table.</p>
<p>Any character can be passed in using the <a href=
"//datatables.net/reference/option/language.decimal"><code class="option" title=
"Initialisation option">language.decimal</code></a> option, although the decimal place character used
in a single table must be consistent (i.e. numbers with a dot decimal place and comma decimal place
cannot both appear in the same table). Different tables on the same page can use different decimal
characters if required.</p>
<p>Any character can be passed in using the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title=
"DataTables initialisation option">language.decimal</code></a> option, although the decimal place character used in a single table must be consistent (i.e. numbers
with a dot decimal place and comma decimal place cannot both appear in the same table). Different tables on the same page can use different decimal characters if
required.</p>
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the
final column.</p>
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -551,9 +546,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;language&quot;: {
&quot;decimal&quot;: &quot;,&quot;,
&quot;thousands&quot;: &quot;.&quot;
@@ -561,46 +555,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -629,9 +617,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li class="active"><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -644,19 +632,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -665,14 +652,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -690,21 +678,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -735,8 +720,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -744,10 +728,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -755,14 +737,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Complex headers (rowspan and colspan)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
</script>
@@ -27,19 +28,15 @@ $(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.
DataTables fully supports <code>colspan</code> and <code>rowspan</code> in the table's header,
assigning the required order listeners to the TH element suitable for that column.</p>
<p>When using tables to display data, you will often wish to display column information in groups. DataTables fully supports <code>colspan</code> and
<code>rowspan</code> in the table's header, assigning the required order listeners to the TH element suitable for that column.</p>
<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default
DataTables will use the bottom unique cell for the column to attach the irder listener, if more than
one cell for a column if found. The <a href=
"//datatables.net/reference/option/orderCellsTop"><code class="option" title=
"Initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top
cell if you prefer.</p>
<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to
attach the order listener, if more than one cell for a column if found. The <a href="//datatables.net/reference/option/orderCellsTop"><code class="option" title=
"DataTables initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
</div>
@@ -541,51 +538,44 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -608,16 +598,15 @@ $(document).ready(function() {
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li class="active"><a href="./complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li class="active"><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="./dom.html">DOM positioning</a></li>
<li><a href="./flexible_width.html">Flexible table width</a></li>
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -630,19 +619,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -651,14 +639,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -676,21 +665,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -721,8 +707,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -730,10 +715,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -741,14 +724,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DOM positioning</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
} );
} );
@@ -29,25 +30,22 @@ $(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
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 <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> 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 an id and / or class) to provide complete layout flexibility.</p>
<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 <a href=
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> initialisation parameter which can be set to
indicate where you wish particular features to appear in the DOM. You can also specify <code>div</code> wrapping containers (with an id and / or class) to provide
complete layout flexibility.</p>
<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> option. For example the <code>l</code> option is used for the
<code>L</code>ength changing input option.</p>
<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href="//datatables.net/reference/option/dom"><code class="option"
title="DataTables initialisation option">dom</code></a> option. For example the <code>l</code> option is used for the <code>L</code>ength changing input
option.</p>
<p>The built-in options available are:</p>
<ul>
<ul class="markdown">
<li><code>l</code> - <code>L</code>ength changing</li>
<li><code>f</code> - <code>F</code>iltering input</li>
<li><code>t</code> - The <code>T</code>able!</li>
@@ -98,16 +96,14 @@ $(document).ready(function() {
</code>
</pre>
<p>All options (with the exception of the <code>t</code> (table) option can be specified multiple
times, for if you want to show the same control multiple times (pagination at the top and bottom of the
table for example).</p>
<p>All options (with the exception of the <code>t</code> (table) option can be specified multiple times, for if you want to show the same control multiple times
(pagination at the top and bottom of the table for example).</p>
<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class=
"option" title="Initialisation option">dom</code></a> options can be added to DataTables through the
use of plug-ins.</p>
<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>
options can be added to DataTables through the use of plug-ins.</p>
<p>In the example below, the table information is moved to the top of the table, and all the
interaction elements to the bottom, each wrapper in a container <code>div</code>.</p>
<p>In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container
<code>div</code>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -603,53 +599,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;dom&quot;: '&lt;&quot;top&quot;i&gt;rt&lt;&quot;bottom&quot;flp&gt;&lt;&quot;clear&quot;&gt;'
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -678,9 +667,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -693,19 +682,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -714,14 +702,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -739,21 +728,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -784,8 +770,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -793,10 +778,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -804,14 +787,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Feature enable / disable</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"paging": false,
"ordering": false,
"info": false
@@ -31,12 +32,11 @@ $(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
variable in the initialisation object. In the following example only the filter feature is left enabled
(which is enabled by default).</p>
<p>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 (which is enabled by default).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -532,55 +532,48 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;paging&quot;: false,
&quot;ordering&quot;: false,
&quot;info&quot;: false
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -609,9 +602,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -624,19 +617,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -645,14 +637,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -670,21 +663,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -715,8 +705,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -724,10 +713,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -735,14 +722,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Flexible table width</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -15,14 +16,14 @@
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
</script>
@@ -31,17 +32,16 @@ $(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
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, it will be used as the width for the table
(overruling any CSS styles).</p>
<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 or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS
styles).</p>
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width,
so as the window is resized, the table will also resize dynamically.</p>
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
dynamically.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -537,53 +537,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">div.container {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">div.container {
width: 80%;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -612,9 +605,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -627,19 +620,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -648,14 +640,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -673,21 +666,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -718,8 +708,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -727,10 +716,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -738,14 +725,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Hidden columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columnDefs": [
{
"targets": [ 2 ],
@@ -39,25 +40,21 @@ $(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
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 is done through the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title=
"Initialisation option">columns.visible</code></a> column option.</p>
<p>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 (consider also using the <a href=
"https://datatables.net/extensions/responsive">Responsive extension</a> for this). This is done through the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> column option.</p>
<p>The column that is hidden is still part of the table and can be made visible through the <code>api
column().visible()</code> API method at a future time if you wish to have columns which can be shown
and hidden.</p>
<p>The column that is hidden is still part of the table and can be made visible through the <code>api column().visible()</code> API method at a future time if you
wish to have columns which can be shown and hidden.</p>
<p>Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered
upon allowing the user access to that data (for example 'tag' information for a row entry might
used).</p>
<p>Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag'
information for a row entry might used).</p>
<p>In the table below both the office and age version columns have been hidden, the former is
searchable, the latter is not.</p>
<p>In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -553,9 +550,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;columnDefs&quot;: [
{
&quot;targets&quot;: [ 2 ],
@@ -570,46 +566,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -638,9 +628,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -653,19 +643,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -674,14 +663,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -699,21 +689,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -744,8 +731,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -753,10 +739,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -764,14 +748,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -15,12 +16,11 @@
<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
examples in this section demonstrate basic initialisation of DataTables and how it can be easily
customised by passing an object with the options you want.</p>
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of
DataTables and how it can be easily customised by passing an object with the options you want.</p>
</div>
</section>
</div>
@@ -46,9 +46,9 @@
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -56,14 +56,11 @@
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"language": {
"lengthMenu": "Display _MENU_ records per page",
"zeroRecords": "Nothing found - sorry",
@@ -35,12 +36,11 @@ $(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=
"//datatables.net/reference/option/language"><code class="option" title=
"Initialisation option">language</code></a> object to the DataTable constructor.</p>
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option"
title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
<p>The example above shows a different set of English string being used, rather than the defaults.</p>
</div>
@@ -538,9 +538,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;language&quot;: {
&quot;lengthMenu&quot;: &quot;Display _MENU_ records per page&quot;,
&quot;zeroRecords&quot;: &quot;Nothing found - sorry&quot;,
@@ -551,46 +550,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -619,9 +612,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li class="active"><a href="./language.html">Language options</a></li>
</ul>
@@ -634,19 +627,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -655,14 +647,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -680,21 +673,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -725,8 +715,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -734,10 +723,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -745,14 +732,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multi-column ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
@@ -39,33 +40,25 @@ $(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
of different ways:</p>
<p>DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways:</p>
<ul>
<li>User shift click on a column (added the clicked column as a secondary, tertiary etc ordering
column).</li>
<li>On a per-column basis (i.e. order by a specific column and then a secondary column if the data
in the first column is identical), through the <a href=
"//datatables.net/reference/option/columns.orderData"><code class="option" title=
"Initialisation option">columns.orderData</code></a> option.</li>
<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option"
title="Initialisation option">columns.orderData</code></a> option to specify a multiple column
order by default (for example <code>[ [0,'asc'], [1,'asc'] ]</code>).</li>
<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title=
"API method">order()</code></a> API method.</li>
<ul class="markdown">
<li>User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column).</li>
<li>On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the <a href=
"//datatables.net/reference/option/columns.orderData"><code class="option" title="DataTables initialisation option">columns.orderData</code></a> option.</li>
<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option" title=
"DataTables initialisation option">columns.orderData</code></a> option to specify a multiple column order by default (for example <code>[ 0, 1 ]</code>).</li>
<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> API method.</li>
</ul>
<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through
the <a href="//datatables.net/reference/option/orderMulti"><code class="option" title=
"Initialisation option">orderMulti</code></a> option.</p>
<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through the <a href=
"//datatables.net/reference/option/orderMulti"><code class="option" title="DataTables initialisation option">orderMulti</code></a> option.</p>
<p>The example below shows the first column having a secondary order applied to the second column in
the table, vice-versa for the second column being tied directly to the first and the salary column to
the first name column.</p>
<p>The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied
directly to the first and the salary column to the first name column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -492,9 +485,8 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
@@ -508,46 +500,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -576,9 +562,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -591,19 +577,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -612,14 +597,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -637,21 +623,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -682,8 +665,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -691,10 +673,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -702,14 +682,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multiple tables</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -15,14 +16,14 @@
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('table.display').dataTable();
$('table.display').DataTable();
} );
</script>
@@ -31,21 +32,18 @@ $(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
by using a jQuery selector which will pick up multiple tables.</p>
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple
tables.</p>
<p>The tables are independent for user control (i.e. user controlled paging on one table does not
effect the others), but they do share the initialisation parameters given (for example if you specific
the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to
manipulate both together, or independently.</p>
<p>The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation
parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both
together, or independently.</p>
<p>The example below shows two tables initialised with a single line of code, through the use of the
<code>table.display</code> selector (i.e. select all elements which have the class of
<code>table.display</code> (which is suitable in this example, you might wish to use a different
selector).</p>
<p>The example below shows two tables initialised with a single line of code, through the use of the <code>table.display</code> selector (i.e. select all elements
which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
</div>
<table id="" class="display" cellspacing="0" width="100%">
@@ -255,53 +253,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('table.display').dataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('table.display').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">div.dataTables_wrapper {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_wrapper {
margin-bottom: 3em;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -330,9 +321,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -345,19 +336,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -366,14 +356,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -391,21 +382,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -436,8 +424,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -445,10 +432,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -456,14 +441,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - horizontal</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -10,21 +11,20 @@
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"scrollX": true
} );
} );
@@ -35,23 +35,19 @@ $(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
you have a wide table, but want to constrain it to a limited horizontal display area. To enable
x-scrolling simply set the <a href="//datatables.net/reference/option/scrollX"><code class="option"
title="Initialisation option">scrollX</code></a> parameter to be whatever you want the container
wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the
container element).</p>
<p>DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited
horizontal display area. To enable x-scrolling simply set the <a href="//datatables.net/reference/option/scrollX"><code class="option" title=
"DataTables initialisation option">scrollX</code></a> parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all
cases with the width being constrained by the container element).</p>
<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The
CSS option of <code>th, td { white-space: nowrap; }</code> is also set to have the text content of each
row on a single line (otherwise the browser will line break the text to have it fit into the available
area).</p>
<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of <code>th, td { white-space: nowrap; }</code> is
also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
@@ -707,57 +703,49 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;scrollX&quot;: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">th, td { white-space: nowrap; }
div.dataTables_wrapper {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -786,9 +774,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li class="active"><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -801,19 +789,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -822,14 +809,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -847,21 +835,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -892,8 +877,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -901,10 +885,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -912,14 +894,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - horizontal and vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -10,21 +11,20 @@
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"scrollY": 200,
"scrollX": true
} );
@@ -36,14 +36,14 @@ $(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
time. Note also that pagination is enabled in this example, and the scrolling accounts for this.</p>
<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and
the scrolling accounts for this.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
@@ -699,58 +699,50 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;scrollY&quot;: 200,
&quot;scrollX&quot;: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">th, td { white-space: nowrap; }
div.dataTables_wrapper {
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -779,9 +771,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li class="active"><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -794,19 +786,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -815,14 +806,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -840,21 +832,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -885,8 +874,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -894,10 +882,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -905,14 +891,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
@@ -31,24 +32,21 @@ $(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
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!).</p>
<p>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!).</p>
<p>To enable y-scrolling simply set the <a href=
"//datatables.net/reference/option/scrollY"><code class="option" title=
"Initialisation option">scrollY</code></a> 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).</p>
<p>To enable y-scrolling simply set the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
"DataTables initialisation option">scrollY</code></a> 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).</p>
<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option"
title="Initialisation option">scrollCollapse</code></a> option is enabled in this example. This will
have the container match the height of the rows shown in the table if that height is smaller than that
given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
"Initialisation option">scrollY</code></a>.</p>
<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option" title=
"DataTables initialisation option">scrollCollapse</code></a> option is enabled in this example. This will have the container match the height of the rows shown in
the table if that height is smaller than that given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
"DataTables initialisation option">scrollY</code></a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -544,55 +542,48 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;scrollCollapse&quot;: true,
&quot;paging&quot;: false
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -621,9 +612,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li class="active"><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -636,19 +627,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -657,14 +647,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -682,21 +673,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -727,8 +715,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -736,10 +723,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -747,14 +732,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,27 +3,26 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - vertical with jQuery UI ThemeRoller</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">
<title>DataTables example - Scroll - vertical, dynamic height</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"scrollY": 200,
"scrollCollapse": true,
"jQueryUI": true
$('#example').DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false
} );
} );
@@ -33,11 +32,16 @@ $(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, dynamic height</span></h1>
<div class="info">
<p>This example is an extension of the vertical scrolling example, showing DataTables ability to be
themed by jQuery UI's ThemeRoller.</p>
<p>This example shows a vertically scrolling DataTable that makes use of the CSS3 <code>vh</code> unit in order to dynamically resize the viewport based on the
browser window height. The <a href="https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths"><code>vh</code> unit</a> is effectively a
percentage of the browser window height. So the <code>50vh</code> used in this example is 50% of the window height. The viewport size will update dynamically as
the window is resized.</p>
<p>A relatively modern browser is <a href="http://caniuse.com/#feat=viewport-units">required for <code>vh</code> units</a> to operate correctly. IE9+ supports the
<code>vh</code> unit and all other evergreen browsers.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -533,57 +537,48 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;scrollY&quot;: 200,
&quot;scrollCollapse&quot;: true,
&quot;jQueryUI&quot;: true
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
<li><a href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -612,10 +607,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li class="active"><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li class="active"><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -628,19 +622,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -649,14 +642,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -674,21 +668,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -719,8 +710,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -728,10 +718,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -739,14 +727,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - State saving</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,16 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$('#example').dataTable( {
"stateSave": true
$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );
</script>
@@ -27,32 +30,25 @@ $('#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
state etc) so that is can be restored when the user reloads a page, or comes back to the page after
visiting a sub-page. This state saving ability is enabled by the <a href=
"//datatables.net/reference/option/stateSave"><code class="option" title=
"Initialisation option">stateSave</code></a> option.</p>
<p>DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads
a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the <a href=
"//datatables.net/reference/option/stateSave"><code class="option" title="DataTables initialisation option">stateSave</code></a> option.</p>
<p>The built in state saving method uses the HTML5 <code>localStorage</code> API for efficient storage
of the data. Please note that this means that the built in state saving option <em>will not work with
IE6/7</em> as these browsers do not support this API. Alternative options of using cookies or saving
the state on the server through Ajax can be used through the <a href=
"//datatables.net/reference/option/stateSaveCallback"><code class="option" title=
"Initialisation option">stateSaveCallback</code></a> and <a href=
"//datatables.net/reference/option/stateLoadCallback"><code class="option" title=
"Initialisation option">stateLoadCallback</code></a> options.</p>
<p>The built in state saving method uses the HTML5 <code>localStorage</code> and <code>sessionStorage</code> APIs for efficient storage of the data. Please note
that this means that the built in state saving option <strong>will not work with IE6/7</strong> as these browsers do not support these APIs. Alternative options of
using cookies or saving the state on the server through Ajax can be used through the <a href="//datatables.net/reference/option/stateSaveCallback"><code class=
"option" title="DataTables initialisation option">stateSaveCallback</code></a> and <a href="//datatables.net/reference/option/stateLoadCallback"><code class=
"option" title="DataTables initialisation option">stateLoadCallback</code></a> options.</p>
<p>Additionally, note also that the duration for which the saved state is valid and can be used to
restore the table state can be set using the <a href=
"//datatables.net/reference/option/stateDuration"><code class="option" title=
"Initialisation option">stateDuration</code></a> initialisation parameter (2 hours by default).</p>
<p>The duration for which the saved state is valid and can be used to restore the table state can be set using the <a href=
"//datatables.net/reference/option/stateDuration"><code class="option" title="DataTables initialisation option">stateDuration</code></a> initialisation parameter
(2 hours by default). This parameter also controls if <code>localStorage</code> (0 or greater) or <code>sessionStorage</code> (-1) is used to store the data.</p>
<p>The example below simply shows state saving enabled in DataTables with the <a href=
"//datatables.net/reference/option/stateSave"><code class="option" title=
"Initialisation option">stateSave</code></a> option.</p>
<p>The example below simply shows state saving enabled in DataTables with the <a href="//datatables.net/reference/option/stateSave"><code class="option" title=
"DataTables initialisation option">stateSave</code></a> option.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -548,51 +544,46 @@ $('#example').dataTable( {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$('#example').dataTable( {
&quot;stateSave&quot;: true
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -621,9 +612,9 @@ $('#example').dataTable( {
<li class="active"><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -636,19 +627,18 @@ $('#example').dataTable( {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -657,14 +647,15 @@ $('#example').dataTable( {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -682,21 +673,18 @@ $('#example').dataTable( {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -727,8 +715,7 @@ $('#example').dataTable( {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -736,10 +723,8 @@ $('#example').dataTable( {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -747,14 +732,11 @@ $('#example').dataTable( {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Default ordering (sorting)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
@@ -29,21 +30,17 @@ $(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.
Using the <a href="//datatables.net/reference/option/order"><code class="option" title=
"Initialisation option">order</code></a> initialisation parameter, you can set the table to display the
data in exactly the order that you want.</p>
<p>With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the <a href=
"//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order</code></a> initialisation parameter, you can set the
table to display the data in exactly the order that you want.</p>
<p>The <a href="//datatables.net/reference/option/order"><code class="option" title=
"Initialisation option">order</code></a> parameter is an array of arrays where the first value of the
inner array is the column to order on, and the second is <code class="string" title=
"String">'asc'</code> (ascending ordering) or <code class="string" title="String">'desc'</code>
(descending ordering) as required. <a href="//datatables.net/reference/option/order"><code class=
"option" title="Initialisation option">order</code></a> is a 2D array to allow multi-column ordering to
be defined.</p>
<p>The <a href="//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order</code></a> parameter is an array of
arrays where the first value of the inner array is the column to order on, and the second is <code class="string" title="String">'asc'</code> (ascending ordering)
or <code class="string" title="String">'desc'</code> (descending ordering) as required. <a href="//datatables.net/reference/option/order"><code class="option"
title="DataTables initialisation option">order</code></a> is a 2D array to allow multi-column ordering to be defined.</p>
<p>The table below is ordered (descending) by the Age column.</p>
</div>
@@ -541,53 +538,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;order&quot;: [[ 3, &quot;desc&quot; ]]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -616,9 +606,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -631,19 +621,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -652,14 +641,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,21 +667,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -722,8 +709,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -731,10 +717,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -742,14 +726,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Zero configuration</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
@@ -29,14 +30,13 @@ $(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
tables is to call the construction function.</p>
<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function:
<code>$().DataTable();</code>.</p>
<p>Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this
example.</p>
<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -532,51 +532,44 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -605,9 +598,9 @@ $(document).ready(function() {
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
@@ -620,19 +613,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -641,14 +633,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -666,21 +659,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -711,8 +701,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -720,10 +709,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -731,14 +718,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );
@@ -31,25 +32,19 @@ $(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
Ajax. This can be done, in its most simple form, by setting the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
JSON data source.</p>
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option also allows for more advanced configuration such as
altering how the Ajax request is made. See the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a>
for further information.</p>
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further information.</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source (object
parameters can also be used through the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option ).</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -86,53 +81,46 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;ajax&quot;: '../ajax/data/arrays.txt'
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -155,17 +143,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -178,19 +164,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -199,14 +184,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -224,21 +210,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -269,8 +252,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -278,10 +260,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -289,14 +269,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML (DOM) sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
@@ -29,16 +30,14 @@ $(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
information directly from the DOM. This example shows how easy it is to add searching, ordering and
paging to your HTML table by simply running DataTables on it.</p>
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it
is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p>
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the
<a href="../basic_init">basic initialisation</a> and <a href="../advanced_init">advanced</a>
examples.</p>
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and
<a href="../advanced_init">advanced</a> examples.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -534,51 +533,44 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -601,17 +593,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -624,19 +614,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -645,14 +634,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -670,21 +660,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -715,8 +702,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -724,10 +710,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -735,14 +719,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -15,20 +16,20 @@
<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>
<ul>
<ul class="markdown">
<li>HTML document (DOM)</li>
<li>Javascript (array / objects)</li>
<li>Ajax sourced data with client-side processing</li>
<li>Ajax sourced data with server-side processing</li>
</ul>
<p>Which of these options is used to populate the table with data depends upon how the table is
initialised. The examples in this section show these four different data source types.</p>
<p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
data source types.</p>
</div>
</section>
</div>
@@ -51,14 +52,11 @@
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Javascript sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -19,78 +20,56 @@
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
['Webkit','Safari 1.2','OSX.3','125.5','A'],
['Webkit','Safari 1.3','OSX.3','312.8','A'],
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
} );
} );
@@ -100,22 +79,21 @@ $(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
DataTables, rather than having it read from the document. This is achieved using the <a href=
"//datatables.net/reference/option/data"><code class="option" title=
"Initialisation option">data</code></a> option in the initialisation object, passing in an array of
data to be used (like all other DataTables handled data, this can be arrays or objects using the
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option).</p>
<p>At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This
is achieved using the <a href="//datatables.net/reference/option/data"><code class="option" title="DataTables initialisation option">data</code></a> option in the
initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option).</p>
<p>A <code>&lt;table&gt;</code> must be available on the page for DataTables to use. This examples
shows the element being added by Javascript and then initialising the DataTable with a set of data from
a Javascript array.</p>
<p>A <code class="tag" title="HTML tag">table</code> must be available on the page for DataTables to use. This examples shows an empty <code class="tag" title=
"HTML tag">table</code> element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created
based on the <a href="//datatables.net/reference/option/columns.title"><code class="option" title="DataTables initialisation option">columns.title</code></a>
configuration option.</p>
</div>
<div id="demo">
<table id="example" class="display" width="100%"></table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -127,122 +105,93 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
['Webkit','Safari 1.2','OSX.3','125.5','A'],
['Webkit','Safari 1.3','OSX.3','312.8','A'],
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A&lt;sup&gt;1&lt;/sup&gt;'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var dataSet = [
[ &quot;Tiger Nixon&quot;, &quot;System Architect&quot;, &quot;Edinburgh&quot;, &quot;5421&quot;, &quot;2011/04/25&quot;, &quot;$320,800&quot; ],
[ &quot;Garrett Winters&quot;, &quot;Accountant&quot;, &quot;Tokyo&quot;, &quot;8422&quot;, &quot;2011/07/25&quot;, &quot;$170,750&quot; ],
[ &quot;Ashton Cox&quot;, &quot;Junior Technical Author&quot;, &quot;San Francisco&quot;, &quot;1562&quot;, &quot;2009/01/12&quot;, &quot;$86,000&quot; ],
[ &quot;Cedric Kelly&quot;, &quot;Senior Javascript Developer&quot;, &quot;Edinburgh&quot;, &quot;6224&quot;, &quot;2012/03/29&quot;, &quot;$433,060&quot; ],
[ &quot;Airi Satou&quot;, &quot;Accountant&quot;, &quot;Tokyo&quot;, &quot;5407&quot;, &quot;2008/11/28&quot;, &quot;$162,700&quot; ],
[ &quot;Brielle Williamson&quot;, &quot;Integration Specialist&quot;, &quot;New York&quot;, &quot;4804&quot;, &quot;2012/12/02&quot;, &quot;$372,000&quot; ],
[ &quot;Herrod Chandler&quot;, &quot;Sales Assistant&quot;, &quot;San Francisco&quot;, &quot;9608&quot;, &quot;2012/08/06&quot;, &quot;$137,500&quot; ],
[ &quot;Rhona Davidson&quot;, &quot;Integration Specialist&quot;, &quot;Tokyo&quot;, &quot;6200&quot;, &quot;2010/10/14&quot;, &quot;$327,900&quot; ],
[ &quot;Colleen Hurst&quot;, &quot;Javascript Developer&quot;, &quot;San Francisco&quot;, &quot;2360&quot;, &quot;2009/09/15&quot;, &quot;$205,500&quot; ],
[ &quot;Sonya Frost&quot;, &quot;Software Engineer&quot;, &quot;Edinburgh&quot;, &quot;1667&quot;, &quot;2008/12/13&quot;, &quot;$103,600&quot; ],
[ &quot;Jena Gaines&quot;, &quot;Office Manager&quot;, &quot;London&quot;, &quot;3814&quot;, &quot;2008/12/19&quot;, &quot;$90,560&quot; ],
[ &quot;Quinn Flynn&quot;, &quot;Support Lead&quot;, &quot;Edinburgh&quot;, &quot;9497&quot;, &quot;2013/03/03&quot;, &quot;$342,000&quot; ],
[ &quot;Charde Marshall&quot;, &quot;Regional Director&quot;, &quot;San Francisco&quot;, &quot;6741&quot;, &quot;2008/10/16&quot;, &quot;$470,600&quot; ],
[ &quot;Haley Kennedy&quot;, &quot;Senior Marketing Designer&quot;, &quot;London&quot;, &quot;3597&quot;, &quot;2012/12/18&quot;, &quot;$313,500&quot; ],
[ &quot;Tatyana Fitzpatrick&quot;, &quot;Regional Director&quot;, &quot;London&quot;, &quot;1965&quot;, &quot;2010/03/17&quot;, &quot;$385,750&quot; ],
[ &quot;Michael Silva&quot;, &quot;Marketing Designer&quot;, &quot;London&quot;, &quot;1581&quot;, &quot;2012/11/27&quot;, &quot;$198,500&quot; ],
[ &quot;Paul Byrd&quot;, &quot;Chief Financial Officer (CFO)&quot;, &quot;New York&quot;, &quot;3059&quot;, &quot;2010/06/09&quot;, &quot;$725,000&quot; ],
[ &quot;Gloria Little&quot;, &quot;Systems Administrator&quot;, &quot;New York&quot;, &quot;1721&quot;, &quot;2009/04/10&quot;, &quot;$237,500&quot; ],
[ &quot;Bradley Greer&quot;, &quot;Software Engineer&quot;, &quot;London&quot;, &quot;2558&quot;, &quot;2012/10/13&quot;, &quot;$132,000&quot; ],
[ &quot;Dai Rios&quot;, &quot;Personnel Lead&quot;, &quot;Edinburgh&quot;, &quot;2290&quot;, &quot;2012/09/26&quot;, &quot;$217,500&quot; ],
[ &quot;Jenette Caldwell&quot;, &quot;Development Lead&quot;, &quot;New York&quot;, &quot;1937&quot;, &quot;2011/09/03&quot;, &quot;$345,000&quot; ],
[ &quot;Yuri Berry&quot;, &quot;Chief Marketing Officer (CMO)&quot;, &quot;New York&quot;, &quot;6154&quot;, &quot;2009/06/25&quot;, &quot;$675,000&quot; ],
[ &quot;Caesar Vance&quot;, &quot;Pre-Sales Support&quot;, &quot;New York&quot;, &quot;8330&quot;, &quot;2011/12/12&quot;, &quot;$106,450&quot; ],
[ &quot;Doris Wilder&quot;, &quot;Sales Assistant&quot;, &quot;Sidney&quot;, &quot;3023&quot;, &quot;2010/09/20&quot;, &quot;$85,600&quot; ],
[ &quot;Angelica Ramos&quot;, &quot;Chief Executive Officer (CEO)&quot;, &quot;London&quot;, &quot;5797&quot;, &quot;2009/10/09&quot;, &quot;$1,200,000&quot; ],
[ &quot;Gavin Joyce&quot;, &quot;Developer&quot;, &quot;Edinburgh&quot;, &quot;8822&quot;, &quot;2010/12/22&quot;, &quot;$92,575&quot; ],
[ &quot;Jennifer Chang&quot;, &quot;Regional Director&quot;, &quot;Singapore&quot;, &quot;9239&quot;, &quot;2010/11/14&quot;, &quot;$357,650&quot; ],
[ &quot;Brenden Wagner&quot;, &quot;Software Engineer&quot;, &quot;San Francisco&quot;, &quot;1314&quot;, &quot;2011/06/07&quot;, &quot;$206,850&quot; ],
[ &quot;Fiona Green&quot;, &quot;Chief Operating Officer (COO)&quot;, &quot;San Francisco&quot;, &quot;2947&quot;, &quot;2010/03/11&quot;, &quot;$850,000&quot; ],
[ &quot;Shou Itou&quot;, &quot;Regional Marketing&quot;, &quot;Tokyo&quot;, &quot;8899&quot;, &quot;2011/08/14&quot;, &quot;$163,000&quot; ],
[ &quot;Michelle House&quot;, &quot;Integration Specialist&quot;, &quot;Sidney&quot;, &quot;2769&quot;, &quot;2011/06/02&quot;, &quot;$95,400&quot; ],
[ &quot;Suki Burks&quot;, &quot;Developer&quot;, &quot;London&quot;, &quot;6832&quot;, &quot;2009/10/22&quot;, &quot;$114,500&quot; ],
[ &quot;Prescott Bartlett&quot;, &quot;Technical Author&quot;, &quot;London&quot;, &quot;3606&quot;, &quot;2011/05/07&quot;, &quot;$145,000&quot; ],
[ &quot;Gavin Cortez&quot;, &quot;Team Leader&quot;, &quot;San Francisco&quot;, &quot;2860&quot;, &quot;2008/10/26&quot;, &quot;$235,500&quot; ],
[ &quot;Martena Mccray&quot;, &quot;Post-Sales support&quot;, &quot;Edinburgh&quot;, &quot;8240&quot;, &quot;2011/03/09&quot;, &quot;$324,050&quot; ],
[ &quot;Unity Butler&quot;, &quot;Marketing Designer&quot;, &quot;San Francisco&quot;, &quot;5384&quot;, &quot;2009/12/09&quot;, &quot;$85,675&quot; ]
];
$(document).ready(function() {
$('#demo').html( '&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&gt;&lt;/table&gt;' );
$('#example').dataTable( {
&quot;data&quot;: dataSet,
&quot;columns&quot;: [
{ &quot;title&quot;: &quot;Engine&quot; },
{ &quot;title&quot;: &quot;Browser&quot; },
{ &quot;title&quot;: &quot;Platform&quot; },
{ &quot;title&quot;: &quot;Version&quot;, &quot;class&quot;: &quot;center&quot; },
{ &quot;title&quot;: &quot;Grade&quot;, &quot;class&quot;: &quot;center&quot; }
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: &quot;Name&quot; },
{ title: &quot;Position&quot; },
{ title: &quot;Office&quot; },
{ title: &quot;Extn.&quot; },
{ title: &quot;Start date&quot; },
{ title: &quot;Salary&quot; }
]
} );
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -265,17 +214,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -288,19 +235,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -309,14 +255,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -334,21 +281,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -379,8 +323,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -388,10 +331,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -399,14 +340,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Server-side processing</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,14 +12,14 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/server_processing.php"
@@ -31,34 +32,29 @@ $(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
databases, you might want to consider using the server-side options that DataTables provides. With
server-side processing enabled, all paging, searching, ordering actions that DataTables performs are
handed off to a server where an SQL engine (or similar) can perform these actions on the large data set
(after all, that's what the database engine is designed for!). As such, each draw of the table will
result in a new Ajax request being made to get the required data.</p>
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server
where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw
of the table will result in a new Ajax request being made to get the required data.</p>
<p>Server-side processing is enabled by setting the <a href=
"//datatables.net/reference/option/serverSide"><code class="option" title=
"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option.</p>
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
<p>This example shows a very simple table, matching the other examples, but in this instance using
server-side processing. For further and more complex examples of using server-side processing, please
refer to the <a href="../server_side">server-side processing</a> examples.</p>
<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of
using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
@@ -66,10 +62,10 @@ $(document).ready(function() {
<tfoot>
<tr>
<th>Name</th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
@@ -86,55 +82,48 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;../server_side/scripts/server_processing.php&quot;
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -157,17 +146,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -180,19 +167,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -201,14 +187,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -226,21 +213,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -271,8 +255,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -280,10 +263,8 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -291,14 +272,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="./resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="./resources/demo.css">
<script type="text/javascript" language="javascript" src="../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="./resources/demo.js"></script>
@@ -15,13 +16,12 @@
<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
dirty as quickly as possible. These examples will show you how to perform tasks ranging from something
as simple as applying DataTables to an HTML table, right the way through to doing server-side
processing with pipelining and custom plug-in functions.</p>
<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible. These examples will show you
how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with
pipelining and custom plug-in functions.</p>
</div>
</section>
</div>
@@ -41,17 +41,15 @@
<li><a href="./basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="./basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="./basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="./basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="./basic_init/dom.html">DOM positioning</a></li>
<li><a href="./basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="./basic_init/state_save.html">State saving</a></li>
<li><a href="./basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="./basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="./basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="./basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="./basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./basic_init/language.html">Language options</a></li>
</ul>
@@ -64,19 +62,18 @@
<li><a href="./advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="./advanced_init/column_render.html">Column rendering</a></li>
<li><a href="./advanced_init/length_menu.html">Page length options</a></li>
<li><a href="./advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="./advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="./advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="./advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="./advanced_init/language_file.html">Language file</a></li>
<li><a href="./advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="./advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="./advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="./advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="./advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="./advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -85,14 +82,15 @@
<ul class="toc">
<li><a href="./styling/display.html">Base style</a></li>
<li><a href="./styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="./styling/row-border.html">Base style - row borders</a></li>
<li><a href="./styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="./styling/compact.html">Base style - compact</a></li>
<li><a href="./styling/hover.html">Base style - hover</a></li>
<li><a href="./styling/order-column.html">Base style - order-column</a></li>
<li><a href="./styling/row-border.html">Base style - row borders</a></li>
<li><a href="./styling/stripe.html">Base style - stripe</a></li>
<li><a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./styling/bootstrap.html">Bootstrap</a></li>
<li><a href="./styling/foundation.html">Foundation</a></li>
<li><a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -110,20 +108,18 @@
<h3><a href="./api/index.html">API</a></h3>
<ul class="toc">
<li><a href="./api/add_row.html">Add rows</a></li>
<li><a href="./api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="./api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="./api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="./api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="./api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="./api/form.html">Form inputs</a></li>
<li><a href="./api/counter_columns.html">Index column</a></li>
<li><a href="./api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="./api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -154,8 +150,7 @@
<li><a href="./server_side/select_rows.html">Row selection</a></li>
<li><a href="./server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="./server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="./server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="./server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -172,14 +167,11 @@
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - API plug-in methods</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -50,23 +51,18 @@ $(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
using the <code>$.fn.dataTable.Api.register</code> function. This function takes two arguments; the
first being the name of the method to be added and its chaining hierarchy, and the second the function
itself.</p>
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function.
This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p>
<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the
sum of a column in a single line: <code>table.column().data().sum()</code>. Due to the chaining of the
methods, this allows <code>sum()</code> to very easily give the sum for any selected column, and to
limit the sum to just the current page, filtered data or all pages. This is done using the options for
the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method and the options for its selectors.</p>
<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column,
and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href=
"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>
<p>For more information about API plug-ins; creating them and their requirements, please refer to the
plug-in development documentation.</p>
<p>For more information about API plug-ins; creating them and their requirements, please refer to the plug-in development documentation.</p>
</div>
<div id="demo">
@@ -563,8 +559,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.fn.dataTable.Api.register( 'column().data().sum()', function () {
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.Api.register( 'column().data().sum()', function () {
return this.reduce( function (a, b) {
var x = parseFloat( a ) || 0;
var y = parseFloat( b ) || 0;
@@ -589,46 +584,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -651,17 +640,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -674,19 +661,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -695,14 +681,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -720,21 +707,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -765,8 +749,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -783,14 +766,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Live DOM ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -26,6 +27,14 @@ $.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
} );
}
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val() * 1;
} );
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
@@ -44,11 +53,11 @@ $.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
/* Initialise the table with the required column ordering data types */
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columns": [
null,
{ "orderDataType": "dom-text", "type": "numeric" },
{ "orderDataType": "dom-text" },
{ "orderDataType": "dom-text-numeric" },
{ "orderDataType": "dom-text", type: 'string' },
{ "orderDataType": "dom-select" }
]
} );
@@ -61,26 +70,21 @@ $(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
DataTables will read information to be ordered during it's initialisation phase, and this will not be
updated based on user interaction, so ordering on columns which have, for example, form elements in
them, may not reflect the current value of the input. To overcome this problem, you must update the
data that DataTables will order on, just prior to the order. This method is much more efficient than
actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's
initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not
reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is
much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
<p>The example below shows the first two columns as normal text with ordering as you would expect. The
following columns all have a form input element of different kinds, and the information contained
within is what DataTables will perform the order on, based on the value at the time of the order.</p>
<p>The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different
kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.</p>
<p>This is a fairly simple example, but it you aren't constrained to just using form input elements,
you could use anything and customise your DOM queries to suit yourself. You could also update the
ordering live as a user in entered data into a form using an event handler calling <a href=
"//datatables.net/reference/api/order()"><code class="api" title="API method">order()</code></a> or
<a href="//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a>
methods.</p>
<p>This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit
yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling <a href=
"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -158,8 +162,7 @@ $(document).ready(function() {
<tr>
<td>Ashton Cox</td>
<td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
<td><input type="text" id="row-3-position" name="row-3-position" value=
"Junior Technical Author"></td>
<td><input type="text" id="row-3-position" name="row-3-position" value="Junior Technical Author"></td>
<td><select size="1" id="row-3-office" name="row-3-office">
<option value="Edinburgh">
Edinburgh
@@ -185,8 +188,7 @@ $(document).ready(function() {
<tr>
<td>Cedric Kelly</td>
<td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
<td><input type="text" id="row-4-position" name="row-4-position" value=
"Senior Javascript Developer"></td>
<td><input type="text" id="row-4-position" name="row-4-position" value="Senior Javascript Developer"></td>
<td><select size="1" id="row-4-office" name="row-4-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -238,8 +240,7 @@ $(document).ready(function() {
<tr>
<td>Brielle Williamson</td>
<td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
<td><input type="text" id="row-6-position" name="row-6-position" value=
"Integration Specialist"></td>
<td><input type="text" id="row-6-position" name="row-6-position" value="Integration Specialist"></td>
<td><select size="1" id="row-6-office" name="row-6-office">
<option value="Edinburgh">
Edinburgh
@@ -291,8 +292,7 @@ $(document).ready(function() {
<tr>
<td>Rhona Davidson</td>
<td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
<td><input type="text" id="row-8-position" name="row-8-position" value=
"Integration Specialist"></td>
<td><input type="text" id="row-8-position" name="row-8-position" value="Integration Specialist"></td>
<td><select size="1" id="row-8-office" name="row-8-office">
<option value="Edinburgh">
Edinburgh
@@ -318,8 +318,7 @@ $(document).ready(function() {
<tr>
<td>Colleen Hurst</td>
<td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
<td><input type="text" id="row-9-position" name="row-9-position" value=
"Javascript Developer"></td>
<td><input type="text" id="row-9-position" name="row-9-position" value="Javascript Developer"></td>
<td><select size="1" id="row-9-office" name="row-9-office">
<option value="Edinburgh">
Edinburgh
@@ -345,8 +344,7 @@ $(document).ready(function() {
<tr>
<td>Sonya Frost</td>
<td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
<td><input type="text" id="row-10-position" name="row-10-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-10-position" name="row-10-position" value="Software Engineer"></td>
<td><select size="1" id="row-10-office" name="row-10-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -424,8 +422,7 @@ $(document).ready(function() {
<tr>
<td>Charde Marshall</td>
<td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
<td><input type="text" id="row-13-position" name="row-13-position" value=
"Regional Director"></td>
<td><input type="text" id="row-13-position" name="row-13-position" value="Regional Director"></td>
<td><select size="1" id="row-13-office" name="row-13-office">
<option value="Edinburgh">
Edinburgh
@@ -451,8 +448,7 @@ $(document).ready(function() {
<tr>
<td>Haley Kennedy</td>
<td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
<td><input type="text" id="row-14-position" name="row-14-position" value=
"Senior Marketing Designer"></td>
<td><input type="text" id="row-14-position" name="row-14-position" value="Senior Marketing Designer"></td>
<td><select size="1" id="row-14-office" name="row-14-office">
<option value="Edinburgh">
Edinburgh
@@ -478,8 +474,7 @@ $(document).ready(function() {
<tr>
<td>Tatyana Fitzpatrick</td>
<td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
<td><input type="text" id="row-15-position" name="row-15-position" value=
"Regional Director"></td>
<td><input type="text" id="row-15-position" name="row-15-position" value="Regional Director"></td>
<td><select size="1" id="row-15-office" name="row-15-office">
<option value="Edinburgh">
Edinburgh
@@ -505,8 +500,7 @@ $(document).ready(function() {
<tr>
<td>Michael Silva</td>
<td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
<td><input type="text" id="row-16-position" name="row-16-position" value=
"Marketing Designer"></td>
<td><input type="text" id="row-16-position" name="row-16-position" value="Marketing Designer"></td>
<td><select size="1" id="row-16-office" name="row-16-office">
<option value="Edinburgh">
Edinburgh
@@ -532,8 +526,7 @@ $(document).ready(function() {
<tr>
<td>Paul Byrd</td>
<td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
<td><input type="text" id="row-17-position" name="row-17-position" value=
"Chief Financial Officer (CFO)"></td>
<td><input type="text" id="row-17-position" name="row-17-position" value="Chief Financial Officer (CFO)"></td>
<td><select size="1" id="row-17-office" name="row-17-office">
<option value="Edinburgh">
Edinburgh
@@ -559,8 +552,7 @@ $(document).ready(function() {
<tr>
<td>Gloria Little</td>
<td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
<td><input type="text" id="row-18-position" name="row-18-position" value=
"Systems Administrator"></td>
<td><input type="text" id="row-18-position" name="row-18-position" value="Systems Administrator"></td>
<td><select size="1" id="row-18-office" name="row-18-office">
<option value="Edinburgh">
Edinburgh
@@ -586,8 +578,7 @@ $(document).ready(function() {
<tr>
<td>Bradley Greer</td>
<td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
<td><input type="text" id="row-19-position" name="row-19-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-19-position" name="row-19-position" value="Software Engineer"></td>
<td><select size="1" id="row-19-office" name="row-19-office">
<option value="Edinburgh">
Edinburgh
@@ -639,8 +630,7 @@ $(document).ready(function() {
<tr>
<td>Jenette Caldwell</td>
<td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
<td><input type="text" id="row-21-position" name="row-21-position" value=
"Development Lead"></td>
<td><input type="text" id="row-21-position" name="row-21-position" value="Development Lead"></td>
<td><select size="1" id="row-21-office" name="row-21-office">
<option value="Edinburgh">
Edinburgh
@@ -666,8 +656,7 @@ $(document).ready(function() {
<tr>
<td>Yuri Berry</td>
<td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
<td><input type="text" id="row-22-position" name="row-22-position" value=
"Chief Marketing Officer (CMO)"></td>
<td><input type="text" id="row-22-position" name="row-22-position" value="Chief Marketing Officer (CMO)"></td>
<td><select size="1" id="row-22-office" name="row-22-office">
<option value="Edinburgh">
Edinburgh
@@ -693,8 +682,7 @@ $(document).ready(function() {
<tr>
<td>Caesar Vance</td>
<td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
<td><input type="text" id="row-23-position" name="row-23-position" value=
"Pre-Sales Support"></td>
<td><input type="text" id="row-23-position" name="row-23-position" value="Pre-Sales Support"></td>
<td><select size="1" id="row-23-office" name="row-23-office">
<option value="Edinburgh">
Edinburgh
@@ -720,8 +708,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
<td><input type="text" id="row-24-position" name="row-24-position" value=
"Sales Assistant"></td>
<td><input type="text" id="row-24-position" name="row-24-position" value="Sales Assistant"></td>
<td><select size="1" id="row-24-office" name="row-24-office">
<option value="Edinburgh">
Edinburgh
@@ -747,8 +734,7 @@ $(document).ready(function() {
<tr>
<td>Angelica Ramos</td>
<td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
<td><input type="text" id="row-25-position" name="row-25-position" value=
"Chief Executive Officer (CEO)"></td>
<td><input type="text" id="row-25-position" name="row-25-position" value="Chief Executive Officer (CEO)"></td>
<td><select size="1" id="row-25-office" name="row-25-office">
<option value="Edinburgh">
Edinburgh
@@ -800,8 +786,7 @@ $(document).ready(function() {
<tr>
<td>Jennifer Chang</td>
<td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
<td><input type="text" id="row-27-position" name="row-27-position" value=
"Regional Director"></td>
<td><input type="text" id="row-27-position" name="row-27-position" value="Regional Director"></td>
<td><select size="1" id="row-27-office" name="row-27-office">
<option value="Edinburgh">
Edinburgh
@@ -827,8 +812,7 @@ $(document).ready(function() {
<tr>
<td>Brenden Wagner</td>
<td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
<td><input type="text" id="row-28-position" name="row-28-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-28-position" name="row-28-position" value="Software Engineer"></td>
<td><select size="1" id="row-28-office" name="row-28-office">
<option value="Edinburgh">
Edinburgh
@@ -854,8 +838,7 @@ $(document).ready(function() {
<tr>
<td>Fiona Green</td>
<td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
<td><input type="text" id="row-29-position" name="row-29-position" value=
"Chief Operating Officer (COO)"></td>
<td><input type="text" id="row-29-position" name="row-29-position" value="Chief Operating Officer (COO)"></td>
<td><select size="1" id="row-29-office" name="row-29-office">
<option value="Edinburgh">
Edinburgh
@@ -881,8 +864,7 @@ $(document).ready(function() {
<tr>
<td>Shou Itou</td>
<td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
<td><input type="text" id="row-30-position" name="row-30-position" value=
"Regional Marketing"></td>
<td><input type="text" id="row-30-position" name="row-30-position" value="Regional Marketing"></td>
<td><select size="1" id="row-30-office" name="row-30-office">
<option value="Edinburgh">
Edinburgh
@@ -908,8 +890,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
<td><input type="text" id="row-31-position" name="row-31-position" value=
"Integration Specialist"></td>
<td><input type="text" id="row-31-position" name="row-31-position" value="Integration Specialist"></td>
<td><select size="1" id="row-31-office" name="row-31-office">
<option value="Edinburgh">
Edinburgh
@@ -961,8 +942,7 @@ $(document).ready(function() {
<tr>
<td>Prescott Bartlett</td>
<td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
<td><input type="text" id="row-33-position" name="row-33-position" value=
"Technical Author"></td>
<td><input type="text" id="row-33-position" name="row-33-position" value="Technical Author"></td>
<td><select size="1" id="row-33-office" name="row-33-office">
<option value="Edinburgh">
Edinburgh
@@ -1014,8 +994,7 @@ $(document).ready(function() {
<tr>
<td>Martena Mccray</td>
<td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
<td><input type="text" id="row-35-position" name="row-35-position" value=
"Post-Sales support"></td>
<td><input type="text" id="row-35-position" name="row-35-position" value="Post-Sales support"></td>
<td><select size="1" id="row-35-office" name="row-35-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -1041,8 +1020,7 @@ $(document).ready(function() {
<tr>
<td>Unity Butler</td>
<td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
<td><input type="text" id="row-36-position" name="row-36-position" value=
"Marketing Designer"></td>
<td><input type="text" id="row-36-position" name="row-36-position" value="Marketing Designer"></td>
<td><select size="1" id="row-36-office" name="row-36-office">
<option value="Edinburgh">
Edinburgh
@@ -1120,8 +1098,7 @@ $(document).ready(function() {
<tr>
<td>Vivian Harrell</td>
<td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
<td><input type="text" id="row-39-position" name="row-39-position" value=
"Financial Controller"></td>
<td><input type="text" id="row-39-position" name="row-39-position" value="Financial Controller"></td>
<td><select size="1" id="row-39-office" name="row-39-office">
<option value="Edinburgh">
Edinburgh
@@ -1199,8 +1176,7 @@ $(document).ready(function() {
<tr>
<td>Olivia Liang</td>
<td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
<td><input type="text" id="row-42-position" name="row-42-position" value=
"Support Engineer"></td>
<td><input type="text" id="row-42-position" name="row-42-position" value="Support Engineer"></td>
<td><select size="1" id="row-42-office" name="row-42-office">
<option value="Edinburgh">
Edinburgh
@@ -1226,8 +1202,7 @@ $(document).ready(function() {
<tr>
<td>Bruno Nash</td>
<td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
<td><input type="text" id="row-43-position" name="row-43-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-43-position" name="row-43-position" value="Software Engineer"></td>
<td><select size="1" id="row-43-office" name="row-43-office">
<option value="Edinburgh">
Edinburgh
@@ -1253,8 +1228,7 @@ $(document).ready(function() {
<tr>
<td>Sakura Yamamoto</td>
<td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
<td><input type="text" id="row-44-position" name="row-44-position" value=
"Support Engineer"></td>
<td><input type="text" id="row-44-position" name="row-44-position" value="Support Engineer"></td>
<td><select size="1" id="row-44-office" name="row-44-office">
<option value="Edinburgh">
Edinburgh
@@ -1306,8 +1280,7 @@ $(document).ready(function() {
<tr>
<td>Finn Camacho</td>
<td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
<td><input type="text" id="row-46-position" name="row-46-position" value=
"Support Engineer"></td>
<td><input type="text" id="row-46-position" name="row-46-position" value="Support Engineer"></td>
<td><select size="1" id="row-46-office" name="row-46-office">
<option value="Edinburgh">
Edinburgh
@@ -1333,8 +1306,7 @@ $(document).ready(function() {
<tr>
<td>Serge Baldwin</td>
<td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
<td><input type="text" id="row-47-position" name="row-47-position" value=
"Data Coordinator"></td>
<td><input type="text" id="row-47-position" name="row-47-position" value="Data Coordinator"></td>
<td><select size="1" id="row-47-office" name="row-47-office">
<option value="Edinburgh">
Edinburgh
@@ -1360,8 +1332,7 @@ $(document).ready(function() {
<tr>
<td>Zenaida Frank</td>
<td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
<td><input type="text" id="row-48-position" name="row-48-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-48-position" name="row-48-position" value="Software Engineer"></td>
<td><select size="1" id="row-48-office" name="row-48-office">
<option value="Edinburgh">
Edinburgh
@@ -1387,8 +1358,7 @@ $(document).ready(function() {
<tr>
<td>Zorita Serrano</td>
<td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
<td><input type="text" id="row-49-position" name="row-49-position" value=
"Software Engineer"></td>
<td><input type="text" id="row-49-position" name="row-49-position" value="Software Engineer"></td>
<td><select size="1" id="row-49-office" name="row-49-office">
<option value="Edinburgh">
Edinburgh
@@ -1414,8 +1384,7 @@ $(document).ready(function() {
<tr>
<td>Jennifer Acosta</td>
<td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
<td><input type="text" id="row-50-position" name="row-50-position" value=
"Junior Javascript Developer"></td>
<td><input type="text" id="row-50-position" name="row-50-position" value="Junior Javascript Developer"></td>
<td><select size="1" id="row-50-office" name="row-50-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -1441,8 +1410,7 @@ $(document).ready(function() {
<tr>
<td>Cara Stevens</td>
<td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
<td><input type="text" id="row-51-position" name="row-51-position" value=
"Sales Assistant"></td>
<td><input type="text" id="row-51-position" name="row-51-position" value="Sales Assistant"></td>
<td><select size="1" id="row-51-office" name="row-51-office">
<option value="Edinburgh">
Edinburgh
@@ -1468,8 +1436,7 @@ $(document).ready(function() {
<tr>
<td>Hermione Butler</td>
<td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
<td><input type="text" id="row-52-position" name="row-52-position" value=
"Regional Director"></td>
<td><input type="text" id="row-52-position" name="row-52-position" value="Regional Director"></td>
<td><select size="1" id="row-52-office" name="row-52-office">
<option value="Edinburgh">
Edinburgh
@@ -1495,8 +1462,7 @@ $(document).ready(function() {
<tr>
<td>Lael Greer</td>
<td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
<td><input type="text" id="row-53-position" name="row-53-position" value=
"Systems Administrator"></td>
<td><input type="text" id="row-53-position" name="row-53-position" value="Systems Administrator"></td>
<td><select size="1" id="row-53-office" name="row-53-office">
<option value="Edinburgh">
Edinburgh
@@ -1548,8 +1514,7 @@ $(document).ready(function() {
<tr>
<td>Shad Decker</td>
<td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
<td><input type="text" id="row-55-position" name="row-55-position" value=
"Regional Director"></td>
<td><input type="text" id="row-55-position" name="row-55-position" value="Regional Director"></td>
<td><select size="1" id="row-55-office" name="row-55-office">
<option value="Edinburgh" selected="selected">
Edinburgh
@@ -1575,8 +1540,7 @@ $(document).ready(function() {
<tr>
<td>Michael Bruce</td>
<td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
<td><input type="text" id="row-56-position" name="row-56-position" value=
"Javascript Developer"></td>
<td><input type="text" id="row-56-position" name="row-56-position" value="Javascript Developer"></td>
<td><select size="1" id="row-56-office" name="row-56-office">
<option value="Edinburgh">
Edinburgh
@@ -1602,8 +1566,7 @@ $(document).ready(function() {
<tr>
<td>Donna Snider</td>
<td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
<td><input type="text" id="row-57-position" name="row-57-position" value=
"Customer Support"></td>
<td><input type="text" id="row-57-position" name="row-57-position" value="Customer Support"></td>
<td><select size="1" id="row-57-office" name="row-57-office">
<option value="Edinburgh">
Edinburgh
@@ -1639,8 +1602,7 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">/* Create an array with the values of all the input boxes in a column */
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
@@ -1648,6 +1610,14 @@ $.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
} );
}
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val() * 1;
} );
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
@@ -1666,56 +1636,50 @@ $.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
/* Initialise the table with the required column ordering data types */
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;columns&quot;: [
null,
{ &quot;orderDataType&quot;: &quot;dom-text&quot;, &quot;type&quot;: &quot;numeric&quot; },
{ &quot;orderDataType&quot;: &quot;dom-text&quot; },
{ &quot;orderDataType&quot;: &quot;dom-text-numeric&quot; },
{ &quot;orderDataType&quot;: &quot;dom-text&quot;, type: 'string' },
{ &quot;orderDataType&quot;: &quot;dom-select&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -1738,17 +1702,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -1761,19 +1723,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -1782,14 +1743,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -1807,21 +1769,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -1852,8 +1811,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -1870,14 +1828,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -15,13 +16,12 @@
<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
every type of data out of the box. For this reason, DataTables exposes an extension API which allows
you, the developers using DataTables, to add support for your own data types, searching, ordering and
feature plug-ins.</p>
<p>While DataTables has a wide range of options and data type support built in, it can never cater for every type of data out of the box. For this reason,
DataTables exposes an extension API which allows you, the developers using DataTables, to add support for your own data types, searching, ordering and feature
plug-ins.</p>
<p>The examples in this section show how plug-ins can be used and developed for DataTables.</p>
</div>
@@ -47,14 +47,11 @@
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom filtering - range search</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -21,14 +22,14 @@
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = $('#min').val() * 1;
var max = $('#max').val() * 1;
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( min == '' && max == '' ) ||
( min == '' && age <= max ) ||
( min <= age && '' == max ) ||
( min <= age && age <= max ) )
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
@@ -52,17 +53,14 @@ $(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,
common examples are number range search (in between two numbers) and date range search. DataTables
provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is
an array of functions (push your own onto it) which will will be run at table draw time to see if a
particular row should be included or not.</p>
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two
numbers) and date range search. DataTables provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.</p>
<p>This example shows a search being performed on the age column in the data, based upon two
inputs.</p>
<p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
</div>
<table border="0" cellspacing="5" cellpadding="5">
@@ -569,18 +567,17 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">/* Custom filtering function which will search data in column four between two values */
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = $('#min').val() * 1;
var max = $('#max').val() * 1;
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( min == '' &amp;&amp; max == '' ) ||
( min == '' &amp;&amp; age &lt;= max ) ||
( min &lt;= age &amp;&amp; '' == max ) ||
( min &lt;= age &amp;&amp; age &lt;= max ) )
if ( ( isNaN( min ) &amp;&amp; isNaN( max ) ) ||
( isNaN( min ) &amp;&amp; age &lt;= max ) ||
( min &lt;= age &amp;&amp; isNaN( max ) ) ||
( min &lt;= age &amp;&amp; age &lt;= max ) )
{
return true;
}
@@ -597,46 +594,40 @@ $(document).ready(function() {
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -659,17 +650,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -682,19 +671,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -703,14 +691,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -728,21 +717,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -773,8 +759,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -784,22 +769,18 @@ $(document).ready(function() {
<li><a href="./api.html">API plug-in methods</a></li>
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li class="active"><a href="./range_filtering.html">Custom filtering - range
search</a></li>
<li class="active"><a href="./range_filtering.html">Custom filtering - range search</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ordering plug-ins (with type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,7 +12,7 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@@ -20,17 +21,24 @@
$.fn.dataTable.ext.type.detect.unshift(
function ( d ) {
return /^[\-\d,]+$/.test( d ) ? 'numeric-comma' : null;
return d === 'Low' || d === 'Medium' || d === 'High' ?
'salary-grade' :
null;
}
);
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
@@ -40,24 +48,19 @@ $(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
built in methods, When dealing with more complex formatted data, it can be desirable to define the
ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any
manner you wish.</p>
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.</p>
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in
assigned to it by making use of DataTables' plug-in type detection abilities. For complete information
about type detection and ordering plug-ins; creating them and their requirements, please refer to the
plug-in development documentation.</p>
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type
detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in
development documentation.</p>
<p>This example shows ordering with a comma for a decimal place, as is often used in parts of Europe
with automatic type detection.</p>
<p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -90,7 +93,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320.800,00</td>
<td>Low</td>
</tr>
<tr>
<td>Garrett Winters</td>
@@ -98,7 +101,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170.750,00</td>
<td>Low</td>
</tr>
<tr>
<td>Ashton Cox</td>
@@ -106,7 +109,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cedric Kelly</td>
@@ -114,7 +117,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433.060,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Airi Satou</td>
@@ -122,7 +125,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162.700,00</td>
<td>Low</td>
</tr>
<tr>
<td>Brielle Williamson</td>
@@ -130,7 +133,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372.000,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Herrod Chandler</td>
@@ -138,7 +141,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Rhona Davidson</td>
@@ -146,7 +149,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327.900,00</td>
<td>Low</td>
</tr>
<tr>
<td>Colleen Hurst</td>
@@ -154,7 +157,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sonya Frost</td>
@@ -162,7 +165,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jena Gaines</td>
@@ -170,7 +173,7 @@ $(document).ready(function() {
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90.560,00</td>
<td>Low</td>
</tr>
<tr>
<td>Quinn Flynn</td>
@@ -178,7 +181,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Charde Marshall</td>
@@ -186,7 +189,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470.600,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Haley Kennedy</td>
@@ -194,7 +197,7 @@ $(document).ready(function() {
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
@@ -202,7 +205,7 @@ $(document).ready(function() {
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Michael Silva</td>
@@ -210,7 +213,7 @@ $(document).ready(function() {
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Paul Byrd</td>
@@ -218,7 +221,7 @@ $(document).ready(function() {
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gloria Little</td>
@@ -226,7 +229,7 @@ $(document).ready(function() {
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bradley Greer</td>
@@ -234,7 +237,7 @@ $(document).ready(function() {
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Dai Rios</td>
@@ -242,7 +245,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
@@ -250,7 +253,7 @@ $(document).ready(function() {
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Yuri Berry</td>
@@ -258,7 +261,7 @@ $(document).ready(function() {
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Caesar Vance</td>
@@ -266,7 +269,7 @@ $(document).ready(function() {
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106.450,00</td>
<td>Low</td>
</tr>
<tr>
<td>Doris Wilder</td>
@@ -274,7 +277,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Angelica Ramos</td>
@@ -282,7 +285,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1.200.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gavin Joyce</td>
@@ -290,7 +293,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Chang</td>
@@ -298,7 +301,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357.650,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Brenden Wagner</td>
@@ -306,7 +309,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Fiona Green</td>
@@ -314,7 +317,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Shou Itou</td>
@@ -322,7 +325,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michelle House</td>
@@ -330,7 +333,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95.400,00</td>
<td>Low</td>
</tr>
<tr>
<td>Suki Burks</td>
@@ -338,7 +341,7 @@ $(document).ready(function() {
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
@@ -346,7 +349,7 @@ $(document).ready(function() {
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Gavin Cortez</td>
@@ -354,7 +357,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Martena Mccray</td>
@@ -362,7 +365,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324.050,00</td>
<td>Low</td>
</tr>
<tr>
<td>Unity Butler</td>
@@ -370,7 +373,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85.675,00</td>
<td>Low</td>
</tr>
<tr>
<td>Howard Hatfield</td>
@@ -378,7 +381,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hope Fuentes</td>
@@ -386,7 +389,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Vivian Harrell</td>
@@ -394,7 +397,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452.500,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Timothy Mooney</td>
@@ -402,7 +405,7 @@ $(document).ready(function() {
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136.200,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
@@ -410,7 +413,7 @@ $(document).ready(function() {
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Olivia Liang</td>
@@ -418,7 +421,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bruno Nash</td>
@@ -426,7 +429,7 @@ $(document).ready(function() {
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
@@ -434,7 +437,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Thor Walton</td>
@@ -442,7 +445,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98.540,00</td>
<td>Low</td>
</tr>
<tr>
<td>Finn Camacho</td>
@@ -450,7 +453,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Serge Baldwin</td>
@@ -458,7 +461,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zenaida Frank</td>
@@ -466,7 +469,7 @@ $(document).ready(function() {
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125.250,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zorita Serrano</td>
@@ -474,7 +477,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
@@ -482,7 +485,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75.650,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cara Stevens</td>
@@ -490,7 +493,7 @@ $(document).ready(function() {
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hermione Butler</td>
@@ -498,7 +501,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356.250,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Lael Greer</td>
@@ -506,7 +509,7 @@ $(document).ready(function() {
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jonas Alexander</td>
@@ -514,7 +517,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Shad Decker</td>
@@ -522,7 +525,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michael Bruce</td>
@@ -530,7 +533,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Donna Snider</td>
@@ -538,7 +541,7 @@ $(document).ready(function() {
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112.000,00</td>
<td>Low</td>
</tr>
</tbody>
</table>
@@ -553,62 +556,62 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.fn.dataTable.ext.type.detect.unshift(
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.ext.type.detect.unshift(
function ( d ) {
return /^[\-\d,]+$/.test( d ) ? 'numeric-comma' : null;
return d === 'Low' || d === 'Medium' || d === 'High' ?
'salary-grade' :
null;
}
);
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -631,17 +634,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -654,19 +655,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -675,14 +675,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -700,21 +701,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -745,8 +743,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -754,8 +751,7 @@ $(document).ready(function() {
<h3><a href="./index.html">Plug-ins</a></h3>
<ul class="toc active">
<li><a href="./api.html">API plug-in methods</a></li>
<li class="active"><a href="./sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li class="active"><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="./range_filtering.html">Custom filtering - range search</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
@@ -764,14 +760,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ordering plug-ins (no type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -11,22 +12,27 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columnDefs": [ {
"type": "numeric-comma",
"targets": 3
"type": "salary-grade",
"targets": -1
} ]
} );
} );
@@ -38,25 +44,21 @@ $(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
more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in
ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define
the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class=
"option" title="Initialisation option">columns.type</code></a> parameter, in combination with a
ordering plug-in. The ordering plug-in can be be of any level of complexity (natural ordering for
example can be fairly complex while also very powerful), and is defined by attaching to the
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins;
creating them and their requirements, please refer to the plug-in development documentation.</p>
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title=
"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of
complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in
development documentation.</p>
<p>This example shows ordering with a comma for a decimal place, as is often used in parts of
Europe.</p>
<p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -89,7 +91,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320.800,00</td>
<td>Low</td>
</tr>
<tr>
<td>Garrett Winters</td>
@@ -97,7 +99,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170.750,00</td>
<td>Low</td>
</tr>
<tr>
<td>Ashton Cox</td>
@@ -105,7 +107,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cedric Kelly</td>
@@ -113,7 +115,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433.060,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Airi Satou</td>
@@ -121,7 +123,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162.700,00</td>
<td>Low</td>
</tr>
<tr>
<td>Brielle Williamson</td>
@@ -129,7 +131,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372.000,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Herrod Chandler</td>
@@ -137,7 +139,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Rhona Davidson</td>
@@ -145,7 +147,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327.900,00</td>
<td>Low</td>
</tr>
<tr>
<td>Colleen Hurst</td>
@@ -153,7 +155,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sonya Frost</td>
@@ -161,7 +163,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jena Gaines</td>
@@ -169,7 +171,7 @@ $(document).ready(function() {
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90.560,00</td>
<td>Low</td>
</tr>
<tr>
<td>Quinn Flynn</td>
@@ -177,7 +179,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Charde Marshall</td>
@@ -185,7 +187,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470.600,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Haley Kennedy</td>
@@ -193,7 +195,7 @@ $(document).ready(function() {
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
@@ -201,7 +203,7 @@ $(document).ready(function() {
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Michael Silva</td>
@@ -209,7 +211,7 @@ $(document).ready(function() {
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Paul Byrd</td>
@@ -217,7 +219,7 @@ $(document).ready(function() {
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gloria Little</td>
@@ -225,7 +227,7 @@ $(document).ready(function() {
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bradley Greer</td>
@@ -233,7 +235,7 @@ $(document).ready(function() {
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Dai Rios</td>
@@ -241,7 +243,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
@@ -249,7 +251,7 @@ $(document).ready(function() {
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Yuri Berry</td>
@@ -257,7 +259,7 @@ $(document).ready(function() {
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Caesar Vance</td>
@@ -265,7 +267,7 @@ $(document).ready(function() {
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106.450,00</td>
<td>Low</td>
</tr>
<tr>
<td>Doris Wilder</td>
@@ -273,7 +275,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Angelica Ramos</td>
@@ -281,7 +283,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1.200.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gavin Joyce</td>
@@ -289,7 +291,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Chang</td>
@@ -297,7 +299,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357.650,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Brenden Wagner</td>
@@ -305,7 +307,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Fiona Green</td>
@@ -313,7 +315,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Shou Itou</td>
@@ -321,7 +323,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michelle House</td>
@@ -329,7 +331,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95.400,00</td>
<td>Low</td>
</tr>
<tr>
<td>Suki Burks</td>
@@ -337,7 +339,7 @@ $(document).ready(function() {
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
@@ -345,7 +347,7 @@ $(document).ready(function() {
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Gavin Cortez</td>
@@ -353,7 +355,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Martena Mccray</td>
@@ -361,7 +363,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324.050,00</td>
<td>Low</td>
</tr>
<tr>
<td>Unity Butler</td>
@@ -369,7 +371,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85.675,00</td>
<td>Low</td>
</tr>
<tr>
<td>Howard Hatfield</td>
@@ -377,7 +379,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hope Fuentes</td>
@@ -385,7 +387,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Vivian Harrell</td>
@@ -393,7 +395,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452.500,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Timothy Mooney</td>
@@ -401,7 +403,7 @@ $(document).ready(function() {
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136.200,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
@@ -409,7 +411,7 @@ $(document).ready(function() {
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Olivia Liang</td>
@@ -417,7 +419,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bruno Nash</td>
@@ -425,7 +427,7 @@ $(document).ready(function() {
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
@@ -433,7 +435,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Thor Walton</td>
@@ -441,7 +443,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98.540,00</td>
<td>Low</td>
</tr>
<tr>
<td>Finn Camacho</td>
@@ -449,7 +451,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Serge Baldwin</td>
@@ -457,7 +459,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zenaida Frank</td>
@@ -465,7 +467,7 @@ $(document).ready(function() {
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125.250,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zorita Serrano</td>
@@ -473,7 +475,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
@@ -481,7 +483,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75.650,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cara Stevens</td>
@@ -489,7 +491,7 @@ $(document).ready(function() {
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hermione Butler</td>
@@ -497,7 +499,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356.250,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Lael Greer</td>
@@ -505,7 +507,7 @@ $(document).ready(function() {
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jonas Alexander</td>
@@ -513,7 +515,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Shad Decker</td>
@@ -521,7 +523,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michael Bruce</td>
@@ -529,7 +531,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Donna Snider</td>
@@ -537,7 +539,7 @@ $(document).ready(function() {
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112.000,00</td>
<td>Low</td>
</tr>
</tbody>
</table>
@@ -552,60 +554,58 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;columnDefs&quot;: [ {
&quot;type&quot;: &quot;numeric-comma&quot;,
&quot;targets&quot;: 3
&quot;type&quot;: &quot;salary-grade&quot;,
&quot;targets&quot;: -1
} ]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
@@ -628,17 +628,15 @@ $(document).ready(function() {
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
@@ -651,19 +649,18 @@ $(document).ready(function() {
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@@ -672,14 +669,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -697,21 +695,18 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -742,8 +737,7 @@ $(document).ready(function() {
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
@@ -752,8 +746,7 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./api.html">API plug-in methods</a></li>
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li class="active"><a href="./sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li class="active"><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="./range_filtering.html">Custom filtering - range search</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
@@ -761,14 +754,11 @@ $(document).ready(function() {
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

View File

@@ -1,204 +0,0 @@
div.dataTables_length label {
font-weight: normal;
float: left;
text-align: left;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
font-weight: normal;
float: right;
}
div.dataTables_filter input {
width: 16em;
}
div.dataTables_info {
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
div.dataTables_paginate ul.pagination {
margin: 2px;
}
table.table {
clear: both;
margin-top: 6px !important;
margin-bottom: 6px !important;
max-width: none !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;
}
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;
}
/* Scrolling */
div.dataTables_scrollHead table {
margin-bottom: 0 !important;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
div.dataTables_scrollHead table thead tr:last-child th:first-child,
div.dataTables_scrollHead table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.dataTables_scrollBody table {
border-top: none;
margin-bottom: 0 !important;
}
div.dataTables_scrollBody tbody tr:first-child th,
div.dataTables_scrollBody tbody tr:first-child td {
border-top: none;
}
div.dataTables_scrollFoot table {
border-top: none;
}
/*
* TableTools styles
*/
.table tbody tr.active td,
.table tbody tr.active th {
background-color: #08C;
color: white;
}
.table tbody tr.active:hover td,
.table tbody tr.active:hover th {
background-color: #0075b0 !important;
}
.table-striped tbody tr.active:nth-child(odd) td,
.table-striped tbody tr.active:nth-child(odd) th {
background-color: #017ebc;
}
table.DTTT_selectable tbody tr {
cursor: pointer;
}
div.DTTT .btn {
color: #333 !important;
font-size: 12px;
}
div.DTTT .btn:hover {
text-decoration: none !important;
}
ul.DTTT_dropdown.dropdown-menu {
z-index: 2003;
}
ul.DTTT_dropdown.dropdown-menu a {
color: #333 !important; /* needed only when demo_page.css is included */
}
ul.DTTT_dropdown.dropdown-menu li {
position: relative;
}
ul.DTTT_dropdown.dropdown-menu li:hover a {
background-color: #0088cc;
color: white !important;
}
/* TableTools information display */
div.DTTT_print_info.modal {
height: 150px;
margin-top: -75px;
text-align: center;
}
div.DTTT_print_info h6 {
font-weight: normal;
font-size: 28px;
line-height: 28px;
margin: 1em;
}
div.DTTT_print_info p {
font-size: 14px;
line-height: 20px;
}
/*
* FixedColumns styles
*/
div.DTFC_LeftHeadWrapper table,
div.DTFC_LeftFootWrapper table,
div.DTFC_RightHeadWrapper table,
div.DTFC_RightFootWrapper table,
table.DTFC_Cloned tr.even {
background-color: white;
}
div.DTFC_RightHeadWrapper table ,
div.DTFC_LeftHeadWrapper table {
margin-bottom: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightBodyWrapper table,
div.DTFC_LeftBodyWrapper table {
border-top: none;
margin-bottom: 0 !important;
}
div.DTFC_RightBodyWrapper tbody tr:first-child th,
div.DTFC_RightBodyWrapper tbody tr:first-child td,
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
div.DTFC_RightFootWrapper table,
div.DTFC_LeftFootWrapper table {
border-top: none;
}

View File

@@ -1,152 +0,0 @@
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
"sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
/* Default class modification */
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline",
"sFilterInput": "form-control input-sm",
"sLengthSelect": "form-control input-sm"
} );
/* 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": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : 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).append(
'<ul class="pagination">'+
'<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, ien, 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, ien=an.length ; i<ien ; 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');
}
}
}
}
} );
/*
* TableTools Bootstrap compatibility
* Required TableTools 2.1+
*/
if ( $.fn.DataTable.TableTools ) {
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "DTTT btn-group",
"buttons": {
"normal": "btn btn-default",
"disabled": "disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
},
"print": {
"info": "DTTT_print_info modal"
},
"select": {
"row": "active"
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
}

View File

@@ -1,442 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables Bootstrap 2 example</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">
<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body>
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -1,17 +0,0 @@
{
"processing": "Bitte warten...",
"lengthMenu": "_MENU_ Einträge anzeigen",
"zeroRecords": "Keine Einträge vorhanden.",
"info": "_START_ bis _END_ von _TOTAL_ Einträgen",
"infoEmpty": "0 bis 0 von 0 Einträgen",
"infoFiltered": "(gefiltert von _MAX_ Einträgen)",
"infoPostFix": "",
"search": "Suchen",
"url": "",
"paginate": {
"first": "Erster",
"previous": "Zurück",
"next": "Nächster",
"last": "Letzter"
}
}

View File

@@ -1,39 +1,36 @@
@font-face {
/* RaleWay Thin from - https://www.theleagueofmoveabletype.com, Font Squirrel for Web Font creation with "Adjust Glyph Spacing" -50 */
font-family: 'ralewaythin';
src: url('font/raleway_thin-webfont.eot');
src: url('font/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('font/raleway_thin-webfont.woff') format('woff'),
url('font/raleway_thin-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
body.dt-example-bootstrap {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
div.container {
width: 980px;
max-width: 980px;
margin: 0 auto;
}
h1 {
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'ralewaythin', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Raleway', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 100;
letter-spacing: 1px;
font-size: 3em;
line-height: 1em;
}
h1 span {
font-size: 0.5em;
line-height: 1em;
}
a {
@@ -42,7 +39,7 @@ a {
text-decoration: none;
}
a:hover {
p > a:hover {
text-decoration: underline;
}
@@ -126,7 +123,7 @@ div.footer {
}
div.footer > div.liner {
width: 960px;
max-width: 960px;
margin: 0 auto;
}
@@ -184,54 +181,103 @@ code {
border-radius: 3px;
}
code:after {
display: inline-block;
border-left: 1px solid rgba( 0, 0, 0, 0.2 );
margin-left: 4px;
padding-left: 4px;
opacity: 0.5;
}
a code {
text-decoration: underline;
}
code.option {
color: #D14; /* red */
background-color: #fcf6f8;
border: 1px solid #f7d6df;
white-space: nowrap;
}
code.option:after { content: 'Option'; }
code.path {
color: #095c05; /* dark green */
border: 1px solid #D6E9C6;
background-color: #eef7ed;
border: 1px solid #8ccb89;
white-space: nowrap;
}
code.path:after { content: 'Path'; }
code.tag {
color: #cad119; /* yellow */
background-color: #f7f8e6;
border: 1px solid #D6E9C6;
color: #c29f00; /* yellow */
background-color: #fff9d7;
border: 1px solid #ffe700;
white-space: nowrap;
}
code.tag:after { content: 'Tag'; }
code.api {
color: #0c199c; /* dark blue */
background-color: #f4f5fc;
border: 1px solid #c6cbe9;
white-space: nowrap;
}
code.api:after { content: 'API'; }
code.type {
color: #d119cf; /* purple */
color: #d119cf; /* pink */
background-color: #faebfa;
border: 1px solid #f3aef2;
white-space: nowrap;
}
code.type:after { content: 'Type'; }
code.event {
color: #2a839e; /* deep aqua */
background-color: #f5fafb;
border: 1px solid #a8ddec;
white-space: nowrap;
}
code.event:after { content: 'Event'; }
code.string {
color: #e8941e; /* orange */
background-color: #fcf8f1;
border: 1px solid #f7e4c9;
color: #c05f1d; /* brown */
background-color: #f5eee9;
border: 1px solid #dfc4b2;
white-space: nowrap;
}
code.string:after { content: 'String'; }
code.field {
color: #ad1ee8; /* purple */
background-color: #f9f1fc;
border: 1px solid #ebc9f7;
white-space: nowrap;
}
code.field:after { content: 'Field'; }
code.button {
color: #464e50; /* grey */
background-color: #f2f7f9;
border: 1px solid #b8c3c5;
white-space: nowrap;
}
code.button:after { content: 'Button'; }
code.multiline {
display: inline-block;
width: 95%;
}
div.syntaxhighlighter code:after {
display: none;
}
ul.tabs {
position: relative;
top: 1px;
height: 40px;
margin: 20px 20px 0 0;
}
@@ -240,7 +286,7 @@ ul.tabs {
ul.tabs li {
display: block;
float: left;
padding: 0 20px;
padding: 0 15px;
height: 40px;
font-size: 1.2em;
margin: 0 5px;
@@ -268,10 +314,14 @@ ul.tabs li.active:hover {
background-color: white;
}
div.tabs {
clear: both;
margin-top: -1px;
}
div.tabs>div {
padding: 0 20px;
padding: 15px;
border: 1px solid #ccc;
margin-top: 1px;
display: none;
border-radius: 5px;
box-shadow: 2px 2px 2px #bbb;
@@ -282,8 +332,45 @@ div.tabs>div h1 {
margin-top: 1em;
}
div.tabs > div > p:first-child {
margin-top: 0;
}
div.column_half {
float: left;
width: 49%;
padding-right: 1%;
}
@media only screen and (max-width : 979px) {
div.container,
div.footer {
padding: 0 1em;
}
}
@media
screen and (max-width : 767px),
screen and (max-width : 768px) and (orientation: portrait) {
div.info {
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
div.toc {
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
h1 span {
display: block;
}
}

View File

@@ -2,115 +2,129 @@
/*global SyntaxHighlighter*/
SyntaxHighlighter.config.tagName = 'code';
$(document).ready( function () {
if ( ! $.fn.dataTable ) {
return;
}
var dt110 = $.fn.dataTable.Api ? true : false;
if ( window.$ ) {
$(document).ready( function () {
if ( ! $.fn.dataTable ) {
return;
}
var dt110 = $.fn.dataTable.Api ? true : false;
// Work around for WebKit bug 55740
var info = $('div.info');
// Work around for WebKit bug 55740
var info = $('div.info');
if ( info.height() < 115 ) {
info.css( 'height', '8em' );
}
if ( info.height() < 115 ) {
info.css( 'min-height', '8em' );
}
var escapeHtml = function ( str ) {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
};
var escapeHtml = function ( str ) {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
};
// css
var cssContainer = $('div.tabs div.css');
if ( $.trim( cssContainer.find('code').text() ) === '' ) {
cssContainer.find('code, p:eq(0), div').css('display', 'none');
}
// css
var cssContainer = $('div.tabs div.css');
if ( $.trim( cssContainer.find('code').text() ) === '' ) {
cssContainer.find('code, p:eq(0), div').css('display', 'none');
}
// init html
var table = $('<p/>').append( $('table').clone() ).html();
$('div.tabs div.table').append(
'<code class="multiline brush: html;">\t\t\t'+
escapeHtml( table )+
'</code>'
);
//SyntaxHighlighter.highlight({}, $('#display-init-html')[0]);
// init html
var table = $('<p/>').append( $('table').clone() ).html();
$('div.tabs div.table').append(
'<code class="multiline language-html">\t\t\t'+
escapeHtml( table )+
'</code>'
);
//SyntaxHighlighter.highlight({}, $('#display-init-html')[0]);
// Allow the demo code to run if DT 1.9 is used
if ( dt110 ) {
// json
var ajaxTab = $('ul.tabs li').eq(3).css('display', 'none');
// Allow the demo code to run if DT 1.9 is used
if ( dt110 ) {
// json
var ajaxTab = $('ul.tabs li').eq(3).css('display', 'none');
$(document).on( 'init.dt', function ( e, settings ) {
var api = new $.fn.dataTable.Api( settings );
var show = function ( str ) {
ajaxTab.css( 'display', 'block' );
$('div.tabs div.ajax code').remove();
// Old IE :-|
try {
str = JSON.stringify( str, null, 2 );
} catch ( e ) {}
$('div.tabs div.ajax').append(
'<code class="multiline brush: js;">'+str+'</code>'
);
SyntaxHighlighter.highlight( {}, $('div.tabs div.ajax code')[0] );
};
// First draw
var json = api.ajax.json();
if ( json ) {
show( json );
}
// Subsequent draws
api.on( 'xhr.dt', function ( e, settings, json ) {
show( json );
} );
} );
// php
var phpTab = $('ul.tabs li').eq(4).css('display', 'none');
$(document).on( 'init.dt.demoSSP', function ( e, settings ) {
if ( settings.oFeatures.bServerSide ) {
if ( $.isFunction( settings.ajax ) ) {
$(document).on( 'init.dt', function ( e, settings ) {
if ( e.namespace !== 'dt' ) {
return;
}
$.ajax( {
url: '../resources/examples.php',
data: {
src: settings.sAjaxSource || settings.ajax.url || settings.ajax
},
dataType: 'text',
type: 'post',
success: function ( txt ) {
phpTab.css( 'display', 'block' );
$('div.tabs div.php').append(
'<code class="multiline brush: php;">'+txt+'</code>'
);
SyntaxHighlighter.highlight( {}, $('div.tabs div.php code')[0] );
}
var api = new $.fn.dataTable.Api( settings );
var show = function ( str ) {
ajaxTab.css( 'display', 'block' );
$('div.tabs div.ajax code').remove();
$('div.tabs div.ajax div.syntaxhighlighter').remove();
// Old IE :-|
try {
str = JSON.stringify( str, null, 2 );
} catch ( e ) {}
$('div.tabs div.ajax').append(
'<code class="multiline language-js">'+str+'</code>'
);
// This can be really slow for large builds
setTimeout( function () {
SyntaxHighlighter.highlight( {}, $('div.tabs div.ajax code')[0] );
}, 500 );
};
// First draw
var json = api.ajax.json();
if ( json ) {
show( json );
}
// Subsequent draws
api.on( 'xhr.dt', function ( e, settings, json ) {
show( json );
} );
}
} );
// php
var phpTab = $('ul.tabs li').eq(4).css('display', 'none');
$(document).on( 'init.dt.demoSSP', function ( e, settings ) {
if ( e.namespace !== 'dt' ) {
return;
}
if ( settings.oFeatures.bServerSide ) {
if ( $.isFunction( settings.ajax ) ) {
return;
}
$.ajax( {
url: '../resources/examples.php',
data: {
src: settings.sAjaxSource || settings.ajax.url || settings.ajax
},
dataType: 'text',
type: 'post',
success: function ( txt ) {
phpTab.css( 'display', 'block' );
$('div.tabs div.php').append(
'<code class="multiline language-php">'+txt+'</code>'
);
SyntaxHighlighter.highlight( {}, $('div.tabs div.php code')[0] );
}
} );
}
} );
}
else {
$('ul.tabs li').eq(3).css('display', 'none');
$('ul.tabs li').eq(4).css('display', 'none');
}
// Tabs
$('ul.tabs').on( 'click', 'li', function () {
$('ul.tabs li.active').removeClass('active');
$(this).addClass('active');
$('div.tabs>div')
.css('display', 'none')
.eq( $(this).index() ).css('display', 'block');
} );
}
else {
$('ul.tabs li').eq(3).css('display', 'none');
$('ul.tabs li').eq(4).css('display', 'none');
}
// Tabs
$('ul.tabs').on( 'click', 'li', function () {
$('ul.tabs li.active').removeClass('active');
$(this).addClass('active');
$('div.tabs>div')
.css('display', 'none')
.eq( $(this).index() ).css('display', 'block');
$('ul.tabs li.active').click();
} );
$('ul.tabs li.active').click();
} );
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 841 B

After

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 881 B

After

Width:  |  Height:  |  Size: 709 B

View File

@@ -1,213 +0,0 @@
div.dataTables_wrapper {
margin-bottom: 1.25em;
}
div.dataTables_length label,
div.dataTables_filter label,
div.dataTables_info {
color: #999;
font-weight: normal;
}
div.dataTables_length {
padding-top: 6px;
}
div.dataTables_length label {
float: left;
text-align: left;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
float: right;
}
div.dataTables_filter input {
display: inline-block !important;
width: auto !important;
}
div.dataTables_info {
padding-top: 2px;
font-size: 0.875em;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
table.dataTable {
clear: both;
margin-bottom: 0.5em !important;
max-width: none !important;
width: 100%;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
cursor: pointer;
*cursor: hand;
}
table.dataTable thead .sorting { background: url('images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; }
table.dataTable thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; }
table.dataTable th:active {
outline: none;
}
/* Scrolling */
div.dataTables_scrollHead table {
margin-bottom: 0 !important;
}
div.dataTables_scrollBody table {
border-top: none;
margin-bottom: 0 !important;
}
div.dataTables_scrollBody tbody tr:first-child th,
div.dataTables_scrollBody tbody tr:first-child td {
border-top: none;
}
div.dataTables_scrollFoot table {
border-top: none;
}
/*
* TableTools styles
*/
.table tbody tr.active td,
.table tbody tr.active th {
background-color: #08C;
color: white;
}
.table tbody tr.active:hover td,
.table tbody tr.active:hover th {
background-color: #0075b0 !important;
}
.table-striped tbody tr.active:nth-child(odd) td,
.table-striped tbody tr.active:nth-child(odd) th {
background-color: #017ebc;
}
table.DTTT_selectable tbody tr {
cursor: pointer;
*cursor: hand;
}
div.DTTT {
float: left;
margin-bottom: 0;
}
div.DTTT .button:hover {
text-decoration: none !important;
}
ul.DTTT_dropdown.dropdown-menu li {
position: relative;
}
ul.DTTT_dropdown.dropdown-menu li:hover a {
background-color: #0088cc;
color: white !important;
}
/* TableTools information display */
.DTTT_print_info {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 150px;
margin-left: -200px;
margin-top: -75px;
text-align: center;
color: #333;
padding: 10px 30px;
background: #ffffff; /* Old browsers */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
opacity: 0.95;
border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.5);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
}
div.DTTT_print_info h6 {
font-weight: normal;
font-size: 28px;
line-height: 28px;
margin: 1em;
}
div.DTTT_print_info p {
font-size: 14px;
line-height: 20px;
}
/*
* FixedColumns styles
*/
div.DTFC_LeftHeadWrapper table,
div.DTFC_LeftFootWrapper table,
table.DTFC_Cloned tr.even {
background-color: white;
}
div.DTFC_LeftHeadWrapper table {
margin-bottom: 0 !important;
}
div.DTFC_LeftBodyWrapper table {
border-top: none;
margin-bottom: 0 !important;
}
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
div.DTFC_LeftFootWrapper table {
border-top: none;
}

View File

@@ -1,186 +0,0 @@
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
"sDom":
"<'row'<'large-6 columns'l><'large-6 columns'f>r>"+
"t"+
"<'row'<'large-6 columns'i><'large-6 columns'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
/* 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": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : 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).append(
'<ul class="pagination">'+
'<li class="prev arrow unavailable"><a href="">&laquo;</a></li>'+
'<li class="next arrow unavailable"><a href="">&raquo;</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 pages = [];
var i, ien, klass, host;
// This could use some improving - however, see
// https://github.com/DataTables/DataTables/issues/163 - this will
// be changing in the near future, so not much point in doing too
// much just now
if ( oPaging.iTotalPages <= 6 ) {
for ( i=0 ; i<oPaging.iTotalPages ; i++ ) {
pages.push( i );
}
}
else {
// Current page
pages.push( oPaging.iPage );
// After current page
var pagesAfter = oPaging.iPage + 2 >= oPaging.iTotalPages ?
oPaging.iTotalPages :
oPaging.iPage + 2;
for ( i=oPaging.iPage+1 ; i<pagesAfter ; i++ ) {
pages.push( i );
}
// After gap
if ( pagesAfter < oPaging.iTotalPages-2 ) {
pages.push( null );
}
// End
if ( $.inArray( oPaging.iTotalPages-2, pages ) === -1 && oPaging.iPage < oPaging.iTotalPages-2 ) {
pages.push( oPaging.iTotalPages-2 );
}
if ( $.inArray( oPaging.iTotalPages-1, pages ) === -1 ) {
pages.push( oPaging.iTotalPages-1 );
}
// Pages before
var pagesBefore = oPaging.iPage - 2 > 0 ?
oPaging.iPage - 2 :
0;
for ( i=oPaging.iPage-1 ; i>pagesBefore ; i-- ) {
pages.unshift( i );
}
// Before gap
if ( pagesBefore > 1 ) {
pages.unshift( null );
}
// Start
if ( $.inArray( 1, pages ) === -1 && oPaging.iTotalPages > 1 ) {
pages.unshift( 1 );
}
if ( $.inArray( 0, pages ) === -1 ) {
pages.unshift( 0 );
}
}
for ( i=0, ien=an.length ; i<ien ; i++ ) {
// Remove the middle elements
host = an[i];
$('li:gt(0)', host).filter(':not(:last)').remove();
// Add the new list items and their event handlers
$.each( pages, function( i, page ) {
klass = page === null ? 'unavailable' :
page === oPaging.iPage ? 'current' : '';
$('<li class="'+klass+'"><a href="">'+(page===null? '&hellip;' : page+1)+'</a></li>')
.insertBefore( $('li:last', host) )
.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', host).addClass('unavailable');
} else {
$('li:first', host).removeClass('unavailable');
}
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
$('li:last', host).addClass('unavailable');
} else {
$('li:last', host).removeClass('unavailable');
}
}
}
}
} );
/*
* TableTools Foundation compatibility
* Required TableTools 2.1+
*/
if ( $.fn.DataTable.TableTools ) {
// Set the classes that TableTools uses to something suitable for Foundation
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "DTTT button-group",
"buttons": {
"normal": "button",
"disabled": "disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
},
"select": {
"row": "active"
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Some files were not shown because too many files have changed in this diff Show More