Compare commits

...

118 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
129 changed files with 3915 additions and 2756 deletions

View File

@@ -1 +1 @@
478170013461fddd73285c996048025eba179741
07dbb4d0dfaff7a518bb30d671446ea246ca76a3

View File

@@ -1,4 +1,9 @@
# 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:

View File

@@ -1,6 +1,6 @@
{
"name": "datatables",
"version": "1.10.6",
"version": "1.10.9",
"main": [
"media/js/jquery.dataTables.js",
"media/css/jquery.dataTables.css",

View File

@@ -1,6 +1,6 @@
{
"name": "datatables/datatables",
"version": "1.10.6",
"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.6",
"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

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
@@ -47,10 +47,10 @@ $(document).ready(function() {
<div class="info">
<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<span>DT</span></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<span>DT</span></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>
"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>
@@ -550,7 +550,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;columnDefs&quot;: [
{
// The `data` parameter refers to the data for the cell (defined by the
@@ -569,7 +569,7 @@ $(document).ready(function() {
<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>
@@ -628,9 +628,9 @@ $(document).ready(function() {
<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>
@@ -644,7 +644,7 @@ $(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="./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>
@@ -699,7 +699,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -749,8 +749,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -5,14 +5,14 @@
<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>
@@ -20,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columnDefs": [ {
"visible": false,
"targets": -1
@@ -35,19 +35,20 @@ $(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="DataTables initialisation option">columns.visible<span>DT</span></code></a> option
and <a href="//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()<span>DT</span></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>
</div>
@@ -550,7 +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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;columnDefs&quot;: [ {
&quot;visible&quot;: false,
&quot;targets&quot;: -1
@@ -561,7 +562,7 @@ $(document).ready(function() {
<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>
@@ -620,9 +621,9 @@ $(document).ready(function() {
<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>
@@ -636,7 +637,7 @@ $(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 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>
@@ -691,7 +692,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -741,8 +742,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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();
} );
@@ -40,9 +40,9 @@ $(document).ready(function() {
<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="DataTables initialisation option">dom<span>DT</span></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>
<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>
</div>
@@ -540,20 +540,20 @@ $(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 language-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>
<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>
@@ -612,9 +612,9 @@ $(document).ready(function() {
<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>
@@ -628,7 +628,7 @@ $(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="./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>
@@ -683,7 +683,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -733,8 +733,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -20,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>
@@ -28,7 +28,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
} );
} );
@@ -44,11 +44,12 @@ $(document).ready(function() {
<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=
"DataTables initialisation option">dom<span>DT</span></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=
"DataTables initialisation option">dom<span>DT</span></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>
"DataTables initialisation option">dom</code></a> initialisation parameter to move DataTables features around the table to where you want them.</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>
@@ -547,7 +548,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#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>
@@ -555,7 +556,7 @@ $(document).ready(function() {
<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>
@@ -620,9 +621,9 @@ $(document).ready(function() {
<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>
@@ -636,7 +637,7 @@ $(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 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="./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>
@@ -691,7 +692,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -741,8 +742,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -18,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>
@@ -26,7 +26,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"dom": '<"toolbar">frtip'
} );
@@ -45,13 +45,13 @@ $(document).ready(function() {
<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="DataTables initialisation option">dom<span>DT</span></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>
"//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=
"DataTables initialisation option">dom<span>DT</span></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>
"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>
@@ -551,7 +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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;dom&quot;: '&lt;&quot;toolbar&quot;&gt;frtip'
} );
@@ -561,7 +561,7 @@ $(document).ready(function() {
<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>
@@ -622,9 +622,9 @@ $(document).ready(function() {
<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>
@@ -638,7 +638,7 @@ $(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="./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>
@@ -693,7 +693,7 @@ $(document).ready(function() {
<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/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 +743,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -30,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();
} );
@@ -47,13 +47,13 @@ $(document).ready(function() {
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="DataTables API method">on()<span>DT</span></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>
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="DataTables event">order<span>DT</span></code></a>,
<a href="//datatables.net/reference/event/search"><code class="event" title="DataTables event">search<span>DT</span></code></a> and <a href=
"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page<span>DT</span></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>
@@ -562,13 +562,13 @@ $(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>
<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>
@@ -627,9 +627,9 @@ $(document).ready(function() {
<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,7 +643,7 @@ $(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="./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>
@@ -698,7 +698,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -748,8 +748,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,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' );
} );
} );
@@ -42,7 +42,9 @@ $(document).ready(function() {
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,18 +541,18 @@ $(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 language-js">$(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' );
} );
} );</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="../../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>
@@ -609,9 +611,9 @@ $(document).ready(function() {
<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>
@@ -625,7 +627,7 @@ $(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="./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>
@@ -680,7 +682,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -730,8 +732,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -14,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>
@@ -22,7 +22,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
@@ -69,14 +69,14 @@ $(document).ready(function() {
<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="DataTables initialisation option">headerCallback<span>DT</span></code></a> and
<a href="//datatables.net/reference/option/footerCallback"><code class="option" title="DataTables initialisation option">footerCallback<span>DT</span></code></a>),
it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.</p>
"//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="DataTables API method">column().data()<span>DT</span></code></a> API method and <a href=
"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()<span>DT</span></code></a> for writing the
value into the footer.</p>
"//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%">
@@ -511,7 +511,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;footerCallback&quot;: function ( row, data, start, end, display ) {
var api = this.api(), data;
@@ -550,7 +550,7 @@ $(document).ready(function() {
<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>
@@ -609,9 +609,9 @@ $(document).ready(function() {
<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>
@@ -625,7 +625,7 @@ $(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="./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>
@@ -680,7 +680,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -730,8 +730,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -48,9 +48,8 @@ $(document).ready(function() {
</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>/y</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>
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%">
@@ -553,7 +552,7 @@ $(document).ready(function() {
<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>
@@ -612,9 +611,9 @@ $(document).ready(function() {
<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>
@@ -628,7 +627,7 @@ $(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="./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>
@@ -683,7 +682,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -733,8 +732,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,14 +42,13 @@ $(document).ready(function() {
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<span>DT</span></code></a>.</p>
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<span>DT</span></code></a> and <a href="//datatables.net/reference/option/order"><code class="option" title=
"DataTables initialisation option">order<span>DT</span></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<span>DT</span></code></a> option on the fifth column below.</p>
"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; ]]">
@@ -552,7 +551,7 @@ $(document).ready(function() {
<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>
@@ -611,9 +610,9 @@ $(document).ready(function() {
<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>
@@ -627,7 +626,7 @@ $(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="./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>
@@ -682,7 +681,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -732,8 +731,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -43,7 +43,7 @@
<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="./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>
@@ -60,8 +60,8 @@
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
@@ -38,9 +38,9 @@ $(document).ready(function() {
<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=
"DataTables initialisation option">language<span>DT</span></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<span>DT</span></code></a> option.</p>
"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 which is hosted on the <a href="http://cdn.datatables.net">DataTables CDN</a></p>
</div>
@@ -539,7 +539,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;language&quot;: {
&quot;url&quot;: &quot;//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json&quot;
}
@@ -549,7 +549,7 @@ $(document).ready(function() {
<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>
@@ -608,9 +608,9 @@ $(document).ready(function() {
<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,7 +624,7 @@ $(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="./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>
@@ -679,7 +679,7 @@ $(document).ready(function() {
<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/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 +729,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
@@ -36,8 +36,7 @@ $(document).ready(function() {
<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="DataTables initialisation option">lengthMenu<span>DT</span></code></a> initialisation
option.</p>
"//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>
@@ -544,7 +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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;lengthMenu&quot;: [[10, 25, 50, -1], [10, 25, 50, &quot;All&quot;]]
} );
} );</code>
@@ -552,7 +551,7 @@ $(document).ready(function() {
<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>
@@ -611,9 +610,9 @@ $(document).ready(function() {
<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>
@@ -627,7 +626,7 @@ $(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="./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>
@@ -682,7 +681,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -732,8 +731,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -46,22 +46,22 @@ $(document).ready(function() {
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<span>DT</span></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<span>DT</span></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>
"//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": "...",
"name": "...",
"position": "...",
"office": "...",
"age": "...",
"start_date": "...",
"salary": "..."
"salary": "..."
}
</code>
</pre>
@@ -578,7 +578,7 @@ $(document).ready(function() {
<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>
@@ -637,9 +637,9 @@ $(document).ready(function() {
<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>
@@ -653,7 +653,7 @@ $(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="./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>
@@ -708,7 +708,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -758,8 +758,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -17,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>
@@ -25,7 +25,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"createdRow": function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
$('td', row).eq(5).addClass('highlight');
@@ -45,12 +45,12 @@ $(document).ready(function() {
<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="DataTables initialisation option">createdRow<span>DT</span></code></a> function
is called once and once only. It is passed the create row node which can then be modified.</p>
<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=
"DataTables initialisation option">columns.createdCell<span>DT</span></code></a> could also be used to create exactly the same effect.</p>
"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%">
@@ -547,7 +547,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;createdRow&quot;: function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 &gt; 150000 ) {
$('td', row).eq(5).addClass('highlight');
@@ -559,7 +559,7 @@ $(document).ready(function() {
<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>
@@ -621,9 +621,9 @@ $(document).ready(function() {
<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>
@@ -637,7 +637,7 @@ $(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="./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>
@@ -692,7 +692,7 @@ $(document).ready(function() {
<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/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 +742,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -17,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>
@@ -74,10 +74,9 @@ $(document).ready(function() {
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=
"DataTables initialisation option">drawCallback<span>DT</span></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>
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%">
@@ -612,7 +611,7 @@ $(document).ready(function() {
<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>
@@ -674,9 +673,9 @@ tr.group:hover {
<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>
@@ -690,7 +689,7 @@ 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="./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>
@@ -745,7 +744,7 @@ tr.group:hover {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -795,8 +794,8 @@ tr.group:hover {
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"aoColumns": [
null,
null,
@@ -44,8 +44,8 @@ $(document).ready(function() {
<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=
"DataTables initialisation option">columns.orderSequence<span>DT</span></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>
"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>
@@ -556,7 +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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;aoColumns&quot;: [
null,
null,
@@ -571,7 +571,7 @@ $(document).ready(function() {
<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>
@@ -630,9 +630,9 @@ $(document).ready(function() {
<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,7 +646,7 @@ $(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="./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>
@@ -701,7 +701,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -751,8 +751,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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": ""
@@ -46,10 +46,10 @@ $(document).ready(function() {
<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="DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
"//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=
"DataTables initialisation option">ajax.dataSrc<span>DT</span></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 class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
@@ -59,8 +59,8 @@ $(document).ready(function() {
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"DataTables initialisation option">ajax.dataSrc<span>DT</span></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>
"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%">
@@ -98,7 +98,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/objects_root_array.txt&quot;,
&quot;dataSrc&quot;: &quot;&quot;
@@ -117,7 +117,7 @@ $(document).ready(function() {
<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>
@@ -176,9 +176,9 @@ $(document).ready(function() {
<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>
@@ -192,7 +192,7 @@ $(document).ready(function() {
<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/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>
@@ -247,7 +247,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -297,8 +297,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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"
@@ -38,10 +38,10 @@ $(document).ready(function() {
<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="DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
"//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=
"DataTables initialisation option">ajax.dataSrc<span>DT</span></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 class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
@@ -51,8 +51,10 @@ $(document).ready(function() {
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"DataTables initialisation option">ajax.dataSrc<span>DT</span></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>
"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%">
@@ -90,7 +92,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/arrays_custom_prop.txt&quot;,
&quot;dataSrc&quot;: &quot;demo&quot;
@@ -101,7 +103,7 @@ $(document).ready(function() {
<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>
@@ -160,9 +162,9 @@ $(document).ready(function() {
<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>
@@ -176,7 +178,7 @@ $(document).ready(function() {
<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/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>
@@ -231,7 +233,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -281,8 +283,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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": [
@@ -43,10 +43,10 @@ $(document).ready(function() {
<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="DataTables initialisation option">columns.data<span>DT</span></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<span>DT</span></code></a> option represents another object level.</p>
"//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>
@@ -105,7 +105,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;ajax&quot;: &quot;data/objects_deep.txt&quot;,
&quot;columns&quot;: [
@@ -122,7 +122,7 @@ $(document).ready(function() {
<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>
@@ -181,9 +181,9 @@ $(document).ready(function() {
<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>
@@ -197,7 +197,7 @@ $(document).ready(function() {
<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/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>
@@ -252,7 +252,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -302,8 +302,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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
} );
@@ -36,7 +36,7 @@ $(document).ready(function() {
<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=
"DataTables initialisation option">deferRender<span>DT</span></code></a> option.</p>
"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
@@ -82,7 +82,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;deferRender&quot;: true
} );
@@ -91,7 +91,7 @@ $(document).ready(function() {
<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>
@@ -150,9 +150,9 @@ $(document).ready(function() {
<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>
@@ -166,7 +166,7 @@ $(document).ready(function() {
<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/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>
@@ -221,7 +221,7 @@ $(document).ready(function() {
<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/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 +271,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -20,8 +20,8 @@
<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="DataTables initialisation option">ajax<span>DT</span></code></a> option, which has a
number of options to customise how the data is retrieved from the server.</p>
<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>
</div>
@@ -52,8 +52,8 @@
<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>
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>

View File

@@ -12,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>
@@ -46,21 +46,21 @@ $(document).ready(function() {
<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
<ul class="markdown">
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
"DataTables initialisation option">columns.render<span>DT</span></code></a> for content that is dynamic (i.e. based upon the row's data)</li>
<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=
"DataTables initialisation option">columns.defaultContent<span>DT</span></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=
"DataTables initialisation option">columns.defaultContent<span>DT</span></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()<span>DT</span></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>
"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=
"DataTables initialisation option">columns.data<span>DT</span></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>
"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%">
@@ -116,7 +116,7 @@ $(document).ready(function() {
<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>
@@ -175,9 +175,9 @@ $(document).ready(function() {
<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,7 +191,7 @@ $(document).ready(function() {
<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/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>
@@ -246,7 +246,7 @@ $(document).ready(function() {
<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/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 +296,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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" },
@@ -46,8 +46,8 @@ $(document).ready(function() {
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=
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell DataTables which property to use from the data source object
for each column.</p>
"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>
@@ -62,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%">
@@ -99,7 +101,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/objects.txt&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name&quot; },
@@ -115,7 +117,7 @@ $(document).ready(function() {
<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>
@@ -174,9 +176,9 @@ $(document).ready(function() {
<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>
@@ -190,7 +192,7 @@ $(document).ready(function() {
<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/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>
@@ -245,7 +247,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -295,8 +297,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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[, ]" },
@@ -42,19 +42,18 @@ $(document).ready(function() {
<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="DataTables initialisation option">columns.data<span>DT</span></code></a> option, which
is particularly useful for working with JSON feeds in an already defined format.</p>
"//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=
"DataTables initialisation option">columns.data<span>DT</span></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<span>DT</span></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<span>DT</span></code></a> as a
<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=
"DataTables initialisation option">columns.data<span>DT</span></code></a> to read arrays:</p>
"DataTables initialisation option">columns.data</code></a> to read arrays:</p>
<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
@@ -116,7 +115,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/objects_subarrays.txt&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name[, ]&quot; },
@@ -132,7 +131,7 @@ $(document).ready(function() {
<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>
@@ -191,9 +190,9 @@ $(document).ready(function() {
<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>
@@ -207,7 +206,7 @@ $(document).ready(function() {
<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/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>
@@ -262,7 +261,7 @@ $(document).ready(function() {
<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/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 +311,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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" },
@@ -49,8 +49,8 @@ $(document).ready(function() {
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=
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell DataTables which property to use from the data source object
for each column.</p>
"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>
@@ -105,7 +105,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
ajax: &quot;data/orthogonal.txt&quot;,
columns: [
{ data: &quot;name&quot; },
@@ -124,7 +124,7 @@ $(document).ready(function() {
<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>
@@ -183,9 +183,9 @@ $(document).ready(function() {
<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>
@@ -199,7 +199,7 @@ $(document).ready(function() {
<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/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>
@@ -254,7 +254,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -304,8 +304,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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"
} );
} );
@@ -34,17 +34,17 @@ $(document).ready(function() {
<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="DataTables initialisation option">ajax<span>DT</span></code></a> option to the
address of the JSON data source.</p>
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="DataTables initialisation option">ajax<span>DT</span></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<span>DT</span></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="DataTables initialisation option">columns.data<span>DT</span></code></a> option, shown
in other examples).</p>
"//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>
<pre>
@@ -58,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%">
@@ -95,7 +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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;
} );
} );</code>
@@ -103,7 +105,7 @@ $(document).ready(function() {
<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>
@@ -162,9 +164,9 @@ $(document).ready(function() {
<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,7 +180,7 @@ $(document).ready(function() {
<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/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>
@@ -233,7 +235,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -283,8 +285,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,14 +50,19 @@ $(document).ready(function() {
<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=
"DataTables API method">row.add()<span>DT</span></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()<span>DT</span></code></a> method (note the plural).</p>
"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=
"DataTables API method">draw()<span>DT</span></code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
"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%">
@@ -115,7 +120,7 @@ $(document).ready(function() {
<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>
@@ -174,9 +179,9 @@ $(document).ready(function() {
<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>
@@ -190,7 +195,7 @@ $(document).ready(function() {
<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/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>
@@ -245,7 +250,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -295,8 +300,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"initComplete": function () {
var api = this.api();
api.$('td').click( function () {
@@ -41,16 +41,15 @@ $(document).ready(function() {
<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="DataTables initialisation option">initComplete<span>DT</span></code></a>, <a href=
"//datatables.net/reference/option/rowCallback"><code class="option" title="DataTables initialisation option">rowCallback<span>DT</span></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>
"//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=
"DataTables API method">$()<span>DT</span></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>
@@ -550,7 +549,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;initComplete&quot;: function () {
var api = this.api();
api.$('td').click( function () {
@@ -563,7 +562,7 @@ $(document).ready(function() {
<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>
@@ -622,9 +621,9 @@ $(document).ready(function() {
<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>
@@ -638,7 +637,7 @@ $(document).ready(function() {
<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/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>
@@ -693,7 +692,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -743,8 +742,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,13 +50,12 @@ $(document).ready(function() {
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="DataTables event">order<span>DT</span></code></a> and
<a href="//datatables.net/reference/event/search"><code class="event" title="DataTables event">search<span>DT</span></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()<span>DT</span></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()<span>DT</span></code></a> method to get the nodes in the
current order and with the currently applied filter.</p>
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%">
@@ -572,7 +571,7 @@ $(document).ready(function() {
<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>
@@ -631,9 +630,9 @@ $(document).ready(function() {
<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>
@@ -647,7 +646,7 @@ $(document).ready(function() {
<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/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>
@@ -702,7 +701,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -752,8 +751,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -46,9 +46,9 @@ $(document).ready(function() {
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="DataTables API method">$()<span>DT</span></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">$()<span>DT</span></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>
@@ -1585,7 +1585,7 @@ $(document).ready(function() {
<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>
@@ -1644,9 +1644,9 @@ $(document).ready(function() {
<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>
@@ -1660,7 +1660,7 @@ $(document).ready(function() {
<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/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>
@@ -1715,7 +1715,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -1765,8 +1765,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -18,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>
@@ -57,10 +57,10 @@ $(document).ready(function() {
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=
"DataTables API method">cell().index()<span>DT</span></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()<span>DT</span></code></a> and <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()<span>DT</span></code></a> methods to remove old
classes and apply the new highlighted class, respectively.</p>
"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%">
@@ -577,7 +577,7 @@ $(document).ready(function() {
<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>
@@ -638,9 +638,9 @@ $(document).ready(function() {
<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,7 +654,7 @@ $(document).ready(function() {
<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/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>
@@ -709,7 +709,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -759,8 +759,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -45,7 +45,7 @@
<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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -53,8 +53,8 @@
<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>
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>

View File

@@ -18,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>
@@ -40,9 +40,11 @@ $(document).ready(function() {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
@@ -61,17 +63,16 @@ $(document).ready(function() {
global, and you may wish to present controls to search on specific columns only.</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()<span>DT</span></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()<span>DT</span></code></a> is used to apply a
filter to a result set).</p>
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 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=
"DataTables API method">column().search()<span>DT</span></code></a> method to add input controls in the footer of the table for each column. Note that the
"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()<span>DT</span></code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
"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%">
@@ -582,9 +583,11 @@ $(document).ready(function() {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );</code>
@@ -592,7 +595,7 @@ $(document).ready(function() {
<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>
@@ -655,9 +658,9 @@ $(document).ready(function() {
<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>
@@ -671,7 +674,7 @@ $(document).ready(function() {
<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/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>
@@ -726,7 +729,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -776,8 +779,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -58,27 +58,25 @@ $(document).ready(function() {
"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="DataTables API method">column().data()<span>DT</span></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()<span>DT</span></code></a> and <a href="//datatables.net/reference/api/sort()"><code class="api" title=
"DataTables API method">sort()<span>DT</span></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()<span>DT</span></code></a> method.</p>
"//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()<span>DT</span></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()<span>DT</span></code></a>, <a href=
"//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()<span>DT</span></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()<span>DT</span></code></a> which are used for searching globally, by column and escaping regular
expressions respectively.</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<span>DT</span></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<span>DT</span></code></a> is useful to
execute code after the data has been loaded.</p>
"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%">
@@ -602,7 +600,7 @@ $(document).ready(function() {
<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>
@@ -661,9 +659,9 @@ $(document).ready(function() {
<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>
@@ -677,7 +675,7 @@ $(document).ready(function() {
<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/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>
@@ -732,7 +730,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -782,8 +780,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -36,7 +36,7 @@ function filterColumn ( i ) {
}
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
@@ -59,11 +59,11 @@ $(document).ready(function() {
<div class="info">
<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()<span>DT</span></code></a>) and for each individual column (<a href="//datatables.net/reference/api/column().search()"><code class=
"api" title="DataTables API method">column().search()<span>DT</span></code></a>).</p>
"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=
"DataTables API method">draw()<span>DT</span></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 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
@@ -638,7 +638,7 @@ function filterColumn ( i ) {
}
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
@@ -652,7 +652,7 @@ $(document).ready(function() {
<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>
@@ -711,9 +711,9 @@ $(document).ready(function() {
<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>
@@ -727,7 +727,7 @@ $(document).ready(function() {
<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/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>
@@ -782,7 +782,7 @@ $(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="./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>
@@ -832,8 +832,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -20,7 +20,7 @@ tr.shown td.details-control {
}
</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>
@@ -95,12 +95,12 @@ $(document).ready(function() {
<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=
"DataTables API method">row().child<span>DT</span></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()<span>DT</span></code></a>), otherwise show
it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title="DataTables API method">row().child.show()<span>DT</span></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%">
@@ -193,7 +193,7 @@ $(document).ready(function() {
<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>
@@ -258,9 +258,9 @@ tr.shown td.details-control {
<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>
@@ -274,7 +274,7 @@ tr.shown td.details-control {
<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/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>
@@ -329,7 +329,7 @@ tr.shown td.details-control {
<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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -379,8 +379,8 @@ tr.shown td.details-control {
<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>
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>

View File

@@ -12,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,11 +43,11 @@ $(document).ready(function() {
<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=
"DataTables API method">rows().data()<span>DT</span></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>
"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%">
@@ -558,7 +558,7 @@ $(document).ready(function() {
<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>
@@ -617,9 +617,9 @@ $(document).ready(function() {
<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>
@@ -633,7 +633,7 @@ $(document).ready(function() {
<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/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>
@@ -688,7 +688,7 @@ $(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="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -738,8 +738,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -51,13 +51,13 @@ $(document).ready(function() {
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=
"DataTables API method">row().remove()<span>DT</span></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()<span>DT</span></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%">
@@ -574,7 +574,7 @@ $(document).ready(function() {
<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>
@@ -633,9 +633,9 @@ $(document).ready(function() {
<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,7 +649,7 @@ $(document).ready(function() {
<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/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>
@@ -704,7 +704,7 @@ $(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="./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 +754,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -47,16 +47,15 @@ $(document).ready(function() {
<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=
"DataTables API method">column().visible()<span>DT</span></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>
"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="DataTables API method">columns()<span>DT</span></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()<span>DT</span></code></a> method to set
their state.</p>
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>
@@ -578,7 +577,7 @@ $(document).ready(function() {
<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>
@@ -637,9 +636,9 @@ $(document).ready(function() {
<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>
@@ -653,7 +652,7 @@ $(document).ready(function() {
<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/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>
@@ -708,7 +707,7 @@ $(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="./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 +757,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -5,542 +5,102 @@
<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.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/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.11.2/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>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 misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
"DataTables API method">columns.adjust()<span>DT</span></code></a> method when the table is made visible (i.e. it has dimensions).</p>
"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 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=
"DataTables API method">columns.adjust()<span>DT</span></code></a>.</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>
@@ -553,26 +113,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 language-js">$(document).ready(function() {
$(&quot;#tabs&quot;).tabs( {
&quot;activate&quot;: function(event, ui) {
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
}
$('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>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="//code.jquery.com/ui/1.11.2/jquery-ui.js">//code.jquery.com/ui/1.11.2/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>
@@ -589,9 +151,8 @@ $(document).ready(function() {
<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.11.2/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css</a></li>
<li><a href=
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/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>
@@ -632,9 +193,9 @@ $(document).ready(function() {
<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>
@@ -648,7 +209,7 @@ $(document).ready(function() {
<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/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>
@@ -703,7 +264,7 @@ $(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 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>
@@ -753,8 +314,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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"
} );
} );
@@ -35,11 +35,12 @@ $(document).ready(function() {
<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="DataTables initialisation option">pagingType<span>DT</span></code></a> option.</p>
"//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 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>
@@ -47,10 +48,9 @@ $(document).ready(function() {
</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=
"DataTables initialisation option">language.paginate.first<span>DT</span></code></a>, <a href=
"//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
"DataTables initialisation option">language.paginate.previous<span>DT</span></code></a> etc.</p>
"//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>
@@ -552,7 +552,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;pagingType&quot;: &quot;full_numbers&quot;
} );
} );</code>
@@ -560,7 +560,7 @@ $(document).ready(function() {
<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>
@@ -619,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>
@@ -635,7 +635,7 @@ $(document).ready(function() {
<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/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>
@@ -690,7 +690,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -740,8 +740,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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": "."
@@ -41,14 +41,14 @@ $(document).ready(function() {
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=
"DataTables initialisation option">language.decimal<span>DT</span></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>
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=
"DataTables initialisation option">language.decimal<span>DT</span></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>
"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>
</div>
@@ -547,7 +547,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;language&quot;: {
&quot;decimal&quot;: &quot;,&quot;,
&quot;thousands&quot;: &quot;.&quot;
@@ -558,7 +558,7 @@ $(document).ready(function() {
<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>
@@ -617,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>
@@ -633,7 +633,7 @@ $(document).ready(function() {
<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/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>
@@ -688,7 +688,7 @@ $(document).ready(function() {
<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/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 +738,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -36,7 +36,7 @@ $(document).ready(function() {
<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<span>DT</span></code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
"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>
@@ -539,13 +539,13 @@ $(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 language-js">$(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>
<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>
@@ -604,9 +604,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,7 +620,7 @@ $(document).ready(function() {
<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/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>
@@ -675,7 +675,7 @@ $(document).ready(function() {
<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/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 +725,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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">'
} );
} );
@@ -35,13 +35,13 @@ $(document).ready(function() {
<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="DataTables initialisation option">dom<span>DT</span></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>
"//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="DataTables initialisation option">dom<span>DT</span></code></a> option. For example the <code>l</code> option is used for the <code>L</code>ength changing
input option.</p>
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>
@@ -99,8 +99,8 @@ $(document).ready(function() {
<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=
"DataTables initialisation option">dom<span>DT</span></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>
@@ -600,7 +600,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;dom&quot;: '&lt;&quot;top&quot;i&gt;rt&lt;&quot;bottom&quot;flp&gt;&lt;&quot;clear&quot;&gt;'
} );
} );</code>
@@ -608,7 +608,7 @@ $(document).ready(function() {
<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>
@@ -667,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>
@@ -683,7 +683,7 @@ $(document).ready(function() {
<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/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>
@@ -738,7 +738,7 @@ $(document).ready(function() {
<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/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 +788,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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
@@ -533,7 +533,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;paging&quot;: false,
&quot;ordering&quot;: false,
&quot;info&quot;: false
@@ -543,7 +543,7 @@ $(document).ready(function() {
<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>
@@ -602,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>
@@ -618,7 +618,7 @@ $(document).ready(function() {
<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/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>
@@ -673,7 +673,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -723,8 +723,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -16,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>
@@ -37,7 +37,8 @@ $(document).ready(function() {
<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>
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>
@@ -537,13 +538,13 @@ $(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 language-js">$(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>
<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>
@@ -604,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>
@@ -620,7 +621,7 @@ $(document).ready(function() {
<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/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>
@@ -675,7 +676,7 @@ $(document).ready(function() {
<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/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 +726,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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 ],
@@ -44,9 +44,9 @@ $(document).ready(function() {
<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="DataTables initialisation option">columns.visible<span>DT</span></code></a> column
option.</p>
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>
@@ -551,7 +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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;columnDefs&quot;: [
{
&quot;targets&quot;: [ 2 ],
@@ -569,7 +569,7 @@ $(document).ready(function() {
<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>
@@ -628,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>
@@ -644,7 +644,7 @@ $(document).ready(function() {
<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/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>
@@ -699,7 +699,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -749,8 +749,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -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>
@@ -57,8 +57,8 @@
<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>
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>

View File

@@ -12,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",
@@ -40,7 +40,7 @@ $(document).ready(function() {
<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="DataTables initialisation option">language<span>DT</span></code></a> object to the DataTable constructor.</p>
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>
@@ -539,7 +539,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;language&quot;: {
&quot;lengthMenu&quot;: &quot;Display _MENU_ records per page&quot;,
&quot;zeroRecords&quot;: &quot;Nothing found - sorry&quot;,
@@ -553,7 +553,7 @@ $(document).ready(function() {
<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>
@@ -612,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>
@@ -628,7 +628,7 @@ $(document).ready(function() {
<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/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>
@@ -683,7 +683,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -733,8 +733,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
@@ -48,17 +48,14 @@ $(document).ready(function() {
<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<span>DT</span></code></a>
option.</li>
"//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<span>DT</span></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="DataTables API method">order()<span>DT</span></code></a> API
method.</li>
"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="DataTables initialisation option">orderMulti<span>DT</span></code></a> option.</p>
"//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>
@@ -489,7 +486,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
@@ -506,7 +503,7 @@ $(document).ready(function() {
<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>
@@ -565,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>
@@ -581,7 +578,7 @@ $(document).ready(function() {
<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/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>
@@ -636,7 +633,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -686,8 +683,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -16,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>
@@ -254,13 +254,13 @@ $(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 language-js">$(document).ready(function() {
$('table.display').dataTable();
$('table.display').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="../../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>
@@ -321,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>
@@ -337,7 +337,7 @@ $(document).ready(function() {
<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/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>
@@ -392,7 +392,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -442,8 +442,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -11,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
} );
} );
@@ -41,14 +40,14 @@ $(document).ready(function() {
<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=
"DataTables initialisation option">scrollX<span>DT</span></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>
"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>
</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>
@@ -705,7 +704,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;scrollX&quot;: true
} );
} );</code>
@@ -713,7 +712,7 @@ $(document).ready(function() {
<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>
@@ -725,8 +724,7 @@ $(document).ready(function() {
<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">th, td { white-space: nowrap; }
div.dataTables_wrapper {
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}</code>
@@ -776,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>
@@ -792,7 +790,7 @@ $(document).ready(function() {
<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/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>
@@ -847,7 +845,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -897,8 +895,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -11,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
} );
@@ -44,7 +43,7 @@ $(document).ready(function() {
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>
@@ -701,7 +700,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;scrollY&quot;: 200,
&quot;scrollX&quot;: true
} );
@@ -710,7 +709,7 @@ $(document).ready(function() {
<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>
@@ -722,8 +721,7 @@ $(document).ready(function() {
<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">th, td { white-space: nowrap; }
div.dataTables_wrapper {
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}</code>
@@ -773,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>
@@ -789,7 +787,7 @@ $(document).ready(function() {
<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/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>
@@ -844,7 +842,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -894,8 +892,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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
@@ -40,13 +40,13 @@ $(document).ready(function() {
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=
"DataTables initialisation option">scrollY<span>DT</span></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>
"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=
"DataTables initialisation option">scrollCollapse<span>DT</span></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<span>DT</span></code></a>.</p>
"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%">
@@ -543,7 +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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;scrollCollapse&quot;: true,
&quot;paging&quot;: false
@@ -553,7 +553,7 @@ $(document).ready(function() {
<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>
@@ -612,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>
@@ -628,7 +628,7 @@ $(document).ready(function() {
<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/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>
@@ -683,7 +683,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -733,8 +733,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -5,25 +5,24 @@
<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.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/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,10 +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,17 +538,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
&quot;scrollY&quot;: 200,
&quot;scrollCollapse&quot;: true,
&quot;jQueryUI&quot;: true
$('#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>
<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>
@@ -561,9 +566,7 @@ $(document).ready(function() {
<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.11.2/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css</a></li>
<li><a href=
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
@@ -604,9 +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>
@@ -620,7 +623,7 @@ $(document).ready(function() {
<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/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>
@@ -675,7 +678,7 @@ $(document).ready(function() {
<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/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 +728,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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( {
stateSave: true
} );
} );
@@ -35,22 +35,20 @@ $(document).ready(function() {
<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="DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
"//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> 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<span>DT</span></code></a> and <a href=
"//datatables.net/reference/option/stateLoadCallback"><code class="option" title="DataTables initialisation option">stateLoadCallback<span>DT</span></code></a>
options.</p>
"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>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<span>DT</span></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>
"//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=
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
"DataTables initialisation option">stateSave</code></a> option.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -547,7 +545,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
stateSave: true
} );
} );</code>
@@ -555,7 +553,7 @@ $(document).ready(function() {
<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>
@@ -614,9 +612,9 @@ $(document).ready(function() {
<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>
@@ -630,7 +628,7 @@ $(document).ready(function() {
<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/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>
@@ -685,7 +683,7 @@ $(document).ready(function() {
<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/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 +733,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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" ]]
} );
} );
@@ -34,14 +34,13 @@ $(document).ready(function() {
<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="DataTables initialisation option">order<span>DT</span></code></a> initialisation parameter,
you can set the table to display the data in exactly the order that you want.</p>
"//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="DataTables initialisation option">order<span>DT</span></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<span>DT</span></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>
@@ -540,7 +539,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;order&quot;: [[ 3, &quot;desc&quot; ]]
} );
} );</code>
@@ -548,7 +547,7 @@ $(document).ready(function() {
<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>
@@ -607,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>
@@ -623,7 +622,7 @@ $(document).ready(function() {
<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/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>
@@ -678,7 +677,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -728,8 +727,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -33,9 +33,10 @@ $(document).ready(function() {
<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%">
@@ -538,7 +539,7 @@ $(document).ready(function() {
<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>
@@ -597,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>
@@ -613,7 +614,7 @@ $(document).ready(function() {
<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/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>
@@ -668,7 +669,7 @@ $(document).ready(function() {
<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/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 +719,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );
@@ -36,16 +36,15 @@ $(document).ready(function() {
<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="DataTables initialisation option">ajax<span>DT</span></code></a> option to the
address of the JSON data source.</p>
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="DataTables initialisation option">ajax<span>DT</span></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<span>DT</span></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="DataTables initialisation option">columns.data<span>DT</span></code></a> option ).</p>
"//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%">
@@ -83,7 +82,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;ajax&quot;: '../ajax/data/arrays.txt'
} );
} );</code>
@@ -91,7 +90,7 @@ $(document).ready(function() {
<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>
@@ -150,9 +149,9 @@ $(document).ready(function() {
<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>
@@ -166,7 +165,7 @@ $(document).ready(function() {
<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/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>
@@ -221,7 +220,7 @@ $(document).ready(function() {
<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/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 +270,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
@@ -534,13 +534,13 @@ $(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 language-js">$(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>
<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>
@@ -599,9 +599,9 @@ $(document).ready(function() {
<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>
@@ -615,7 +615,7 @@ $(document).ready(function() {
<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/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>
@@ -670,7 +670,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -720,8 +720,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -53,8 +53,8 @@
<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>
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>

View File

@@ -12,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,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" }
]
} );
} );
} );
@@ -105,16 +83,17 @@ $(document).ready(function() {
<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="DataTables initialisation option">data<span>DT</span></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<span>DT</span></code></a>
option).</p>
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"></div>
<table id="example" class="display" width="100%"></table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -127,84 +106,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 language-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']
[ &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>
<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>
@@ -263,9 +220,9 @@ $(document).ready(function() {
<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>
@@ -279,7 +236,7 @@ $(document).ready(function() {
<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/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>
@@ -334,7 +291,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -384,8 +341,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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"
@@ -41,8 +41,8 @@ $(document).ready(function() {
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=
"DataTables initialisation option">serverSide<span>DT</span></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<span>DT</span></code></a> option.</p>
"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>
@@ -51,10 +51,10 @@ $(document).ready(function() {
<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>
@@ -62,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>
@@ -83,7 +83,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;../server_side/scripts/server_processing.php&quot;
@@ -93,7 +93,7 @@ $(document).ready(function() {
<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>
@@ -152,9 +152,9 @@ $(document).ready(function() {
<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>
@@ -168,7 +168,7 @@ $(document).ready(function() {
<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/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>
@@ -223,7 +223,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -273,8 +273,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -47,9 +47,9 @@
<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>
@@ -63,7 +63,7 @@
<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/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>
@@ -118,7 +118,7 @@
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="./api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -168,8 +168,8 @@
<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>
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>

View File

@@ -12,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>
@@ -60,8 +60,7 @@ $(document).ready(function() {
<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()<span>DT</span></code></a> method and the options for its
selectors.</p>
"//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>
</div>
@@ -588,7 +587,7 @@ $(document).ready(function() {
<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>
@@ -647,9 +646,9 @@ $(document).ready(function() {
<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>
@@ -663,7 +662,7 @@ $(document).ready(function() {
<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/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>
@@ -718,7 +717,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -768,8 +767,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -53,7 +53,7 @@ $.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-numeric" },
@@ -83,8 +83,8 @@ $(document).ready(function() {
<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()<span>DT</span></code></a> or <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()<span>DT</span></code></a> methods.</p>
"//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%">
@@ -1636,7 +1636,7 @@ $.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-numeric&quot; },
@@ -1649,7 +1649,7 @@ $(document).ready(function() {
<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>
@@ -1708,9 +1708,9 @@ $(document).ready(function() {
<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>
@@ -1724,7 +1724,7 @@ $(document).ready(function() {
<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/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>
@@ -1779,7 +1779,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -1829,8 +1829,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -48,8 +48,8 @@
<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>
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>

View File

@@ -12,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>
@@ -597,7 +597,7 @@ $(document).ready(function() {
<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>
@@ -656,9 +656,9 @@ $(document).ready(function() {
<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>
@@ -672,7 +672,7 @@ $(document).ready(function() {
<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/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>
@@ -727,7 +727,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -777,8 +777,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,7 +38,7 @@ $.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
$(document).ready(function() {
$('#example').dataTable();
$('#example').DataTable();
} );
@@ -575,13 +575,13 @@ $.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
$(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>
<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>
@@ -640,9 +640,9 @@ $(document).ready(function() {
<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,7 +656,7 @@ $(document).ready(function() {
<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/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>
@@ -711,7 +711,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -761,8 +761,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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 +29,7 @@ $.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
};
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"columnDefs": [ {
"type": "salary-grade",
"targets": -1
@@ -51,8 +51,8 @@ $(document).ready(function() {
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=
"DataTables initialisation option">columns.type<span>DT</span></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
"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>
@@ -564,7 +564,7 @@ $(document).ready(function() {
};
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;columnDefs&quot;: [ {
&quot;type&quot;: &quot;salary-grade&quot;,
&quot;targets&quot;: -1
@@ -575,7 +575,7 @@ $(document).ready(function() {
<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>
@@ -634,9 +634,9 @@ $(document).ready(function() {
<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,7 +650,7 @@ $(document).ready(function() {
<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/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>
@@ -705,7 +705,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -755,8 +755,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -9,6 +9,11 @@ body {
background-color: #fff;
}
body.dt-example-bootstrap {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
div.container {
max-width: 980px;
@@ -34,7 +39,7 @@ a {
text-decoration: none;
}
a:hover {
p > a:hover {
text-decoration: underline;
}
@@ -176,65 +181,99 @@ code {
border-radius: 3px;
}
code > span {
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: #a1a713; /* 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;
@@ -277,12 +316,12 @@ ul.tabs li.active:hover {
div.tabs {
clear: both;
margin-top: -1px;
}
div.tabs>div {
padding: 0 15px;
padding: 15px;
border: 1px solid #ccc;
margin-top: 1px;
display: none;
border-radius: 5px;
box-shadow: 2px 2px 2px #bbb;
@@ -293,6 +332,10 @@ div.tabs>div h1 {
margin-top: 1em;
}
div.tabs > div > p:first-child {
margin-top: 0;
}
div.column_half {
float: left;
width: 49%;

View File

@@ -2,124 +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( 'min-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 language-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 ) {
if ( e.namespace !== 'dt' ) {
return;
}
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>'
);
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 ( e.namespace !== 'dt' ) {
return;
}
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 language-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();
} );
}

View File

@@ -50,6 +50,7 @@
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
white-space: nowrap;
}
.syntaxhighlighter {
@@ -134,7 +135,7 @@
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
top: -18px !important;
font-size: 10px !important;
z-index: 7 !important;
}

View File

@@ -120,7 +120,7 @@ var sh = {
multiLineDoubleQuotedString : XRegExp('"([^\\\\"]|\\\\.)*"', 'gs'),
multiLineSingleQuotedString : XRegExp("'([^\\\\']|\\\\.)*'", 'gs'),
xmlComments : XRegExp('(&lt;|<)!--.*?--(&gt;|>)', 'gs'),
url : /\w+:\/\/[\w-.\/?%&=:@;#]*/g,
url : /\w+:\/\/[\w-.\/?%&=:@;#,]*/g,
phpScriptTags : { left: /(&lt;|<)\?(?:=|php)?/g, right: /\?(&gt;|>)/g, 'eof' : true },
aspScriptTags : { left: /(&lt;|<)%=?/g, right: /%(&gt;|>)/g },
scriptScriptTags : { left: /(&lt;|<)\s*script.*?(&gt;|>)/gi, right: /(&lt;|<)\/\s*script\s*(&gt;|>)/gi }
@@ -302,6 +302,13 @@ var sh = {
*/
highlight: function(globalParams, element)
{
// Don't run the syntax highlighter on IE6/7 as it absolutely kills
// performance
var userAgent = navigator.appVersion;
if (userAgent.indexOf("MSIE 7.") !== -1 || userAgent.indexOf("MSIE 6.") !== -1) {
return;
}
var elements = this.findElements(globalParams, element),
propertyName = 'innerHTML',
highlighter = null,

View File

@@ -12,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": {
@@ -43,8 +43,8 @@ $(document).ready(function() {
<div class="info">
<p>It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option's <code>data</code>
parameter which can be used in one of two different ways:</p>
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option's <code>data</code> parameter which
can be used in one of two different ways:</p>
<ul class="markdown">
<li><code>object</code> - An object data to send to the server. This is useful for adding static data to the request.</li>
@@ -91,7 +91,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: {
@@ -108,7 +108,7 @@ $(document).ready(function() {
<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>
@@ -167,9 +167,9 @@ $(document).ready(function() {
<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>
@@ -183,7 +183,7 @@ $(document).ready(function() {
<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/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>
@@ -238,7 +238,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -288,8 +288,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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": "scripts/server_processing.php",
@@ -41,13 +41,13 @@ $(document).ready(function() {
preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).</p>
<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href="//datatables.net/reference/option/deferLoading"><code class=
"option" title="DataTables initialisation option">deferLoading<span>DT</span></code></a> initialisation property. It serves two purposes, firstly to indicate that
deferred loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and
pagination to be displayed correctly).</p>
"option" title="DataTables initialisation option">deferLoading</code></a> initialisation property. It serves two purposes, firstly to indicate that deferred
loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination
to be displayed correctly).</p>
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading<span>DT</span></code></a> to tell
DataTables that this data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -166,7 +166,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/server_processing.php&quot;,
@@ -177,7 +177,7 @@ $(document).ready(function() {
<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>
@@ -236,9 +236,9 @@ $(document).ready(function() {
<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>
@@ -252,7 +252,7 @@ $(document).ready(function() {
<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/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>
@@ -307,7 +307,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -357,8 +357,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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": "scripts/ids-objects.php",
@@ -44,17 +44,12 @@ $(document).ready(function() {
<div class="info">
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for
example). By assigning the ID you want to apply to each row using the property <code>DT_RowId</code> of the data source object for each row, DataTables will
automatically add it for you.</p>
example). By assigning the ID you want to apply to each row using the property <code>DT_RowId</code> of the data source object for each row (this property name can
be configured using the <a href="//datatables.net/reference/option/idSrc"><code class="option" title="DataTables initialisation option">idSrc</code></a> option),
DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).</p>
<p>In addition to <code>DT_RowId</code> there are two other properties which perform similar actions: <code>DT_RowClass</code> and <code>DT_RowData</code>:</p>
<ul class="markdown">
<li>{string} <code>DT_RowId</code> - Add an ID to the <em>TR</em> element</li>
<li>{string} <code>DT_RowClass</code> - Add a class name to the <em>TR</em> element</li>
<li>{object} <code>DT_RowData</code> - Add HTML5 <em>data-</em> attributes to the <em>TR</em> element. This is an object of key / value pairs which are
assigned as data attributes to the <em>TR</em> element.</li>
</ul>
<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions - please refer to the <a href=
"https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
</div>
@@ -94,7 +89,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/ids-objects.php&quot;,
@@ -112,7 +107,7 @@ $(document).ready(function() {
<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>
@@ -171,9 +166,9 @@ $(document).ready(function() {
<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>
@@ -187,7 +182,7 @@ $(document).ready(function() {
<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/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>
@@ -242,7 +237,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -292,8 +287,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,7 +6,7 @@
<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>
@@ -25,8 +25,8 @@
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=
"DataTables initialisation option">serverSide<span>DT</span></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<span>DT</span></code></a> option.</p>
"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>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
</div>
@@ -58,8 +58,8 @@
<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>
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>

View File

@@ -12,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": {
@@ -41,16 +41,15 @@ $(document).ready(function() {
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server
(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation option.</p>
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a>
options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class=
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option).</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>dataType</code> option set to retrieve JSONP data for server-side
processing in DataTables.</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -88,7 +87,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: {
@@ -101,7 +100,7 @@ $(document).ready(function() {
<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>
@@ -160,9 +159,9 @@ $(document).ready(function() {
<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>
@@ -176,7 +175,7 @@ $(document).ready(function() {
<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/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>
@@ -231,7 +230,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -281,8 +280,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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": "scripts/objects.php",
@@ -48,8 +48,8 @@ $(document).ready(function() {
database for example). For these situations DataTables supports the reading of data for objects as well as arrays.</p>
<p>In this example the server responds with an array of objects, where DataTables will look up and use each property that is specified by the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> property
given for each column.</p>
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -87,7 +87,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/objects.php&quot;,
@@ -105,7 +105,7 @@ $(document).ready(function() {
<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>
@@ -164,9 +164,9 @@ $(document).ready(function() {
<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,7 +180,7 @@ $(document).ready(function() {
<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/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>
@@ -235,7 +235,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -285,8 +285,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -138,7 +138,7 @@ $.fn.dataTable.Api.register( 'clearPipeline()', function () {
// DataTables initialisation
//
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": $.fn.dataTable.pipeline( {
@@ -158,14 +158,14 @@ $(document).ready(function() {
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
<div class="info">
<p>Sever-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large
<p>Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large
number of page views, you could potentially end up DDoSing your own server with your own applications!</p>
<p>This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done
by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This
intercept of the Ajax request is performed by giving the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> option as a function. This function then performs the logic of deciding if another Ajax call is
needed, or if data from the cache can be used.</p>
"DataTables initialisation option">ajax</code></a> option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if
data from the cache can be used.</p>
<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set,
when using server-side processing, is only available at the server.</p>
@@ -324,7 +324,7 @@ $.fn.dataTable.Api.register( 'clearPipeline()', function () {
// DataTables initialisation
//
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: $.fn.dataTable.pipeline( {
@@ -337,7 +337,7 @@ $(document).ready(function() {
<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>
@@ -396,9 +396,9 @@ $(document).ready(function() {
<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>
@@ -412,7 +412,7 @@ $(document).ready(function() {
<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/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>
@@ -467,7 +467,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -517,8 +517,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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,7 +20,7 @@
$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
@@ -49,16 +49,15 @@ $(document).ready(function() {
<div class="info">
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to
use POST. This is very easily done by using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> initialisation option.</p>
"DataTables initialisation option">ajax</code></a> initialisation option.</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a>
options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class=
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option).</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>type</code> option set to <code class="string" title=
"String">POST</code> to make a POST request.</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -96,7 +95,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: {
@@ -117,7 +116,7 @@ $(document).ready(function() {
<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>
@@ -176,9 +175,9 @@ $(document).ready(function() {
<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>
@@ -192,7 +191,7 @@ $(document).ready(function() {
<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/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>
@@ -247,7 +246,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -297,8 +296,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -20,7 +20,7 @@ tr.details td.details-control {
}
</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>
@@ -101,15 +101,15 @@ $(document).ready(function() {
<p>The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's
display. This is set up using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class=
"option" title="DataTables initialisation option">columns.defaultContent<span>DT</span></code></a>, in combination with CSS to show an empty cell with a background
image which can be clicked upon.</p>
"DataTables initialisation option">columns.data</code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"DataTables initialisation option">columns.defaultContent</code></a>, in combination with CSS to show an empty cell with a background image which can be clicked
upon.</p>
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title=
"DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a row is already displayed, and if so hide it, if not show it. The
content of the child row is, in this example, defined by the <code>format()</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. Note that the format details function has
access to the full data source object for the row, including information that is not actually shown in the table (the salary parameter for example).</p>
<p>The event handler 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, if not show it. The content of the child row is, in this example, defined by the
<code>format()</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. Note that the format details function has access to the full data source object for the row, including
information that is not actually shown in the table (the salary parameter for example).</p>
<p>Furthermore, this example shows a small difference from the <a href="../api/row_details.html">client-side row details example</a> in that to have rows
automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row <code>id</code>. This is required because
@@ -211,7 +211,7 @@ $(document).ready(function() {
<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>
@@ -276,9 +276,9 @@ tr.details td.details-control {
<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>
@@ -292,7 +292,7 @@ tr.details td.details-control {
<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/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>
@@ -347,7 +347,7 @@ tr.details td.details-control {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -397,8 +397,8 @@ tr.details td.details-control {
<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>
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>

View File

@@ -63,7 +63,14 @@ $sql_details = array(
*/
require( 'ssp.class.php' );
echo $_GET['callback'].'('.json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
).');';
// Validate the JSONP to make use it is an okay Javascript function to execute
$jsonp = preg_match('/^[$A-Z_][0-9A-Z_$]*$/i', $_GET['callback']) ?
$_GET['callback'] :
false;
if ( $jsonp ) {
echo $jsonp.'('.json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
).');';
}

View File

@@ -11,70 +11,72 @@ CREATE TABLE `datatables_demo` (
`position` varchar(250) NOT NULL default '',
`email` varchar(250) NOT NULL default '',
`office` varchar(250) NOT NULL default '',
`start_date` timestamp DEFAULT CURRENT_TIMESTAMP,
`start_date` datetime default CURRENT_TIMESTAMP,
`age` int(8),
`salary` int(8),
`seq` int(8),
`extn` varchar(8) NOT NULL default '',
PRIMARY KEY (`id`)
PRIMARY KEY (`id`),
INDEX (`seq`)
);
INSERT INTO `datatables_demo`
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
( id, first_name, last_name, age, position, salary, start_date, extn, email, office, seq )
VALUES
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh' ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo' ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco' ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh' ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo' ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York' ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco' ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo' ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco' ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh' ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London' ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh' ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco' ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London' ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London' ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London' ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York' ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York' ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London' ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh' ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York' ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York' ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York' ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney' ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London' ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh' ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore' ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco' ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco' ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo' ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney' ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London' ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London' ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco' ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh' ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco' ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco' ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco' ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco' ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London' ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York' ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore' ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London' ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo' ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York' ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco' ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore' ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York' ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco' ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh' ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York' ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London' ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London' ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco' ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh' ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore' ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York' );
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo', 22 ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco', 6 ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo', 55 ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York', 21 ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh', 18 ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London', 13 ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London', 12 ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London', 54 ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London', 37 ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York', 32 ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York', 35 ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London', 48 ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York', 17 ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York', 57 ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York', 29 ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney', 56 ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London', 36 ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore', 51 ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco', 7 ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo', 1 ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney', 39 ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London', 40 ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London', 47 ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco', 24 ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London', 28 ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York', 34 ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore', 4 ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London', 3 ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York', 11 ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore', 44 ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York', 42 ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York', 15 ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London', 9 ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London', 25 ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh', 43 ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore', 16 ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York', 19 );

View File

@@ -10,72 +10,73 @@ CREATE TABLE datatables_demo (
position text NOT NULL default '',
email text NOT NULL default '',
office text NOT NULL default '',
start_date timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
start_date timestamp without time zone default CURRENT_TIMESTAMP,
age integer,
salary integer,
seq integer,
extn text NOT NULL default '',
PRIMARY KEY (id)
);
INSERT INTO datatables_demo
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
( id, first_name, last_name, age, position, salary, start_date, extn, email, office, seq )
VALUES
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh' ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo' ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco' ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh' ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo' ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York' ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco' ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo' ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco' ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh' ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London' ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh' ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco' ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London' ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London' ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London' ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York' ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York' ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London' ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh' ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York' ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York' ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York' ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney' ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London' ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh' ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore' ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco' ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco' ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo' ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney' ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London' ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London' ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco' ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh' ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco' ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco' ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco' ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco' ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London' ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York' ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore' ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London' ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo' ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York' ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco' ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore' ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York' ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco' ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh' ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York' ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London' ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London' ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco' ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh' ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore' ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York' );
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo', 22 ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco', 6 ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo', 55 ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York', 21 ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh', 18 ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London', 13 ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London', 12 ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London', 54 ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London', 37 ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York', 32 ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York', 35 ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London', 48 ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York', 17 ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York', 57 ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York', 29 ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney', 56 ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London', 36 ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore', 51 ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco', 7 ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo', 1 ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney', 39 ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London', 40 ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London', 47 ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco', 24 ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London', 28 ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York', 34 ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore', 4 ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London', 3 ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York', 11 ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore', 44 ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York', 42 ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York', 15 ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London', 9 ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London', 25 ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh', 43 ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore', 16 ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York', 19 );
ALTER SEQUENCE datatables_demo_id_seq RESTART WITH 58;

View File

@@ -10,69 +10,70 @@ CREATE TABLE datatables_demo (
position text NOT NULL default '',
email text NOT NULL default '',
office text NOT NULL default '',
start_date timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
start_date timestamp without time zone default CURRENT_TIMESTAMP,
age integer,
salary integer,
seq integer,
extn text NOT NULL default ''
);
INSERT INTO datatables_demo
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
( id, first_name, last_name, age, position, salary, start_date, extn, email, office, seq )
VALUES
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh' ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo' ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco' ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh' ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo' ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York' ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco' ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo' ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco' ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh' ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London' ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh' ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco' ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London' ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London' ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London' ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York' ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York' ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London' ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh' ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York' ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York' ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York' ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney' ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London' ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh' ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore' ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco' ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco' ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo' ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney' ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London' ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London' ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco' ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh' ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco' ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco' ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco' ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco' ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London' ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York' ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore' ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London' ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo' ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York' ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco' ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore' ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York' ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco' ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh' ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York' ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London' ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London' ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco' ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh' ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore' ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York' );
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo', 22 ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco', 6 ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo', 55 ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York', 21 ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh', 18 ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London', 13 ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London', 12 ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London', 54 ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London', 37 ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York', 32 ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York', 35 ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London', 48 ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York', 17 ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York', 57 ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York', 29 ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney', 56 ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London', 36 ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore', 51 ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco', 7 ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo', 1 ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney', 39 ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London', 40 ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London', 47 ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco', 24 ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London', 28 ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York', 34 ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore', 4 ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London', 3 ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York', 11 ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore', 44 ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York', 42 ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York', 15 ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London', 9 ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London', 25 ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh', 43 ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore', 16 ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York', 19 );

View File

@@ -1,8 +1,8 @@
--
-- DataTables Ajax and server-side processing database (SQL Server)
--
IF OBJECT_ID('dbo.datatables_demo', 'U') IS NOT NULL
DROP TABLE dbo.datatables_demo;
IF OBJECT_ID('datatables_demo', 'U') IS NOT NULL
DROP TABLE datatables_demo;
CREATE TABLE datatables_demo (
id int NOT NULL identity,
@@ -11,9 +11,10 @@ CREATE TABLE datatables_demo (
position varchar(250) NOT NULL default '',
email varchar(250) NOT NULL default '',
office varchar(250) NOT NULL default '',
start_date datetime DEFAULT GETDATE(),
start_date datetime default GETDATE(),
age int,
salary int,
seq int,
extn varchar(8) NOT NULL default '',
PRIMARY KEY (id)
);
@@ -21,64 +22,64 @@ CREATE TABLE datatables_demo (
SET IDENTITY_INSERT datatables_demo ON;
INSERT INTO datatables_demo
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
( id, first_name, last_name, age, position, salary, start_date, extn, email, office, seq )
VALUES
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh' ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo' ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco' ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh' ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo' ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York' ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco' ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo' ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco' ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh' ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London' ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh' ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco' ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London' ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London' ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London' ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York' ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York' ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London' ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh' ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York' ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York' ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York' ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney' ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London' ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh' ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore' ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco' ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco' ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo' ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney' ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London' ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London' ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco' ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh' ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco' ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco' ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco' ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco' ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London' ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York' ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore' ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London' ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo' ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York' ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco' ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore' ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York' ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco' ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh' ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York' ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London' ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London' ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco' ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh' ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore' ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York' );
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 ),
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo', 22 ),
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco', 6 ),
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 ),
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo', 55 ),
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York', 21 ),
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 ),
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 ),
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 ),
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh', 18 ),
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London', 13 ),
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 ),
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 ),
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London', 12 ),
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London', 54 ),
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London', 37 ),
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York', 32 ),
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York', 35 ),
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London', 48 ),
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 ),
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York', 17 ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York', 57 ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York', 29 ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney', 56 ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London', 36 ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore', 51 ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco', 7 ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo', 1 ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney', 39 ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London', 40 ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London', 47 ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 ),
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco', 24 ),
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 ),
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 ),
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 ),
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London', 28 ),
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York', 34 ),
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore', 4 ),
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London', 3 ),
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 ),
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York', 11 ),
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 ),
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore', 44 ),
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York', 42 ),
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 ),
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 ),
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York', 15 ),
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London', 9 ),
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London', 25 ),
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 ),
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh', 43 ),
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore', 16 ),
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York', 19 );
SET IDENTITY_INSERT datatables_demo OFF;

View File

@@ -12,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>
@@ -22,7 +22,7 @@
$(document).ready(function() {
var selected = [];
$("#example").dataTable({
$("#example").DataTable({
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-arrays.php",
@@ -63,6 +63,9 @@ $(document).ready(function() {
<p>This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the <code>DT_RowId</code> special
property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.</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>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -102,7 +105,7 @@ $(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 selected = [];
$(&quot;#example&quot;).dataTable({
$(&quot;#example&quot;).DataTable({
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/ids-arrays.php&quot;,
@@ -130,7 +133,7 @@ $(document).ready(function() {
<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>
@@ -189,9 +192,9 @@ $(document).ready(function() {
<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,7 +208,7 @@ $(document).ready(function() {
<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/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>
@@ -260,7 +263,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -310,8 +313,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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": "scripts/server_processing.php"
@@ -41,8 +41,8 @@ $(document).ready(function() {
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=
"DataTables initialisation option">serverSide<span>DT</span></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<span>DT</span></code></a> option.</p>
"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 client-side processing examples, but in this instance using server-side processing.</p>
</div>
@@ -82,7 +82,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 language-js">$(document).ready(function() {
$('#example').dataTable( {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/server_processing.php&quot;
@@ -92,7 +92,7 @@ $(document).ready(function() {
<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>
@@ -151,9 +151,9 @@ $(document).ready(function() {
<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>
@@ -167,7 +167,7 @@ $(document).ready(function() {
<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/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>
@@ -222,7 +222,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -272,8 +272,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -6,30 +6,28 @@
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Bootstrap</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">
<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">
body { font-size: 140%; }
</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="../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.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() {
$('#example').dataTable();
$('#example').DataTable();
} );
</script>
</head>
<body class="dt-example bootstrap">
<body class="dt-example dt-example-bootstrap">
<div class="container">
<section>
<h1>DataTables example <span>Bootstrap</span></h1>
@@ -539,16 +537,15 @@ $(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 language-js">$(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>
<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>
<li><a href=
"../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js">../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js</a></li>
<li><a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.js</a></li>
</ul>
</div>
@@ -559,15 +556,14 @@ $(document).ready(function() {
<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">body { font-size: 140%; }</code>
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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css</a></li>
<li><a href=
"../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.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>
@@ -608,9 +604,9 @@ $(document).ready(function() {
<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,7 +620,7 @@ $(document).ready(function() {
<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/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>
@@ -679,7 +675,7 @@ $(document).ready(function() {
<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/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 +725,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -528,13 +528,13 @@ $(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 language-js">$(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>
<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>
@@ -593,9 +593,9 @@ $(document).ready(function() {
<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>
@@ -609,7 +609,7 @@ $(document).ready(function() {
<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/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>
@@ -664,7 +664,7 @@ $(document).ready(function() {
<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/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
@@ -714,8 +714,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -529,13 +529,13 @@ $(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 language-js">$(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>
<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>
@@ -594,9 +594,9 @@ $(document).ready(function() {
<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>
@@ -610,7 +610,7 @@ $(document).ready(function() {
<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/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>
@@ -665,7 +665,7 @@ $(document).ready(function() {
<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/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 +715,8 @@ $(document).ready(function() {
<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>
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>

View File

@@ -12,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>
@@ -543,13 +543,13 @@ $(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 language-js">$(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>
<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>
@@ -608,9 +608,9 @@ $(document).ready(function() {
<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,7 +624,7 @@ $(document).ready(function() {
<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/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>
@@ -679,7 +679,7 @@ $(document).ready(function() {
<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/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 +729,8 @@ $(document).ready(function() {
<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>
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>

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