github/DataTables
1
1
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2026-01-13 00:08:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: github:1.10.0-beta.2
Branches Tags
github:master github:1_9 github:1_10_wip github:1_9_DEV
github:1.10.21 github:1.10.20 github:1.10.19 github:1.10.18 github:1.10.17 github:1.10.16 github:1.10.15 github:1.10.13 github:1.10.12 github:1.10.11 github:1.10.10 github:1.10.9 github:1.10.8 github:1.10.7 github:1.10.6 github:1.10.5 github:1.10.4 github:1.10.3 github:1.10.2 github:1.10.1 github:1.10.0 github:1.10.0-rc.1 github:1.10.0-beta.2 github:1.10.0-beta.1 github:1.9.4 github:RELEASE_1_9_4 github:1.9.0 github:1.9.1 github:1.9.2 github:1.9.3 github:RELEASE_1_9_3 github:RELEASE_1_9_2 github:RELEASE_1_9_1 github:RELEASE_1_9_0 github:RELEASE_1_9_0_BETA_3 github:RELEASE_1_9_0_beta_2 github:RELEASE_1_9_0_beta_1 github:RELEASE_1_8_2 github:RELEASE_1_8_1 github:RELEASE_1_8_0 github:BETA_1_8_0_4 github:RELEASE_1_8_0_4 github:RELEASE_1_8_0_3 github:RELEASE_1_8_0_2 github:BETA_1_8_0_1 github:RELEASE_1_7_6 github:RELEASE_1_7_5 github:RELEASE_1_7_4 github:RELEASE_1_7_3 github:RELEASE_1_7_2 github:RELEASE_1_7_1 github:RELEASE_1_7_0
...
compare: github:1.10.2
Branches Tags
github:master github:1_9 github:1_10_wip github:1_9_DEV
github:1.10.21 github:1.10.20 github:1.10.19 github:1.10.18 github:1.10.17 github:1.10.16 github:1.10.15 github:1.10.13 github:1.10.12 github:1.10.11 github:1.10.10 github:1.10.9 github:1.10.8 github:1.10.7 github:1.10.6 github:1.10.5 github:1.10.4 github:1.10.3 github:1.10.2 github:1.10.1 github:1.10.0 github:1.10.0-rc.1 github:1.10.0-beta.2 github:1.10.0-beta.1 github:1.9.4 github:RELEASE_1_9_4 github:1.9.0 github:1.9.1 github:1.9.2 github:1.9.3 github:RELEASE_1_9_3 github:RELEASE_1_9_2 github:RELEASE_1_9_1 github:RELEASE_1_9_0 github:RELEASE_1_9_0_BETA_3 github:RELEASE_1_9_0_beta_2 github:RELEASE_1_9_0_beta_1 github:RELEASE_1_8_2 github:RELEASE_1_8_1 github:RELEASE_1_8_0 github:BETA_1_8_0_4 github:RELEASE_1_8_0_4 github:RELEASE_1_8_0_3 github:RELEASE_1_8_0_2 github:BETA_1_8_0_1 github:RELEASE_1_7_6 github:RELEASE_1_7_5 github:RELEASE_1_7_4 github:RELEASE_1_7_3 github:RELEASE_1_7_2 github:RELEASE_1_7_1 github:RELEASE_1_7_0

177 Commits
1.10.0-bet ... 1.10.2

Author SHA1 Message Date
Allan Jardine
64f979a72b Release 1.10.2 2014-07-31 14:59:26 +01:00
Allan Jardine
3743d6bc28 Dev: Add common shell method to get version string from a JSDoc 
commented file
 2014-07-31 14:58:33 +01:00
Allan Jardine
a8575c5a7a Fix: #384. Direct to the manual page for latest install instructions 2014-07-30 10:16:47 +01:00
Allan Jardine
a644aa7e21 Fix: Add redrawCalculations option to dt-api columns().visible() and dt-api column().visible() to improve performance in a loop. 2014-07-25 16:26:30 +01:00
Allan Jardine
43118eed49 Fix: dt-api column().search() wasn't returning the search term when not given any parameter (well, it was, but in an API instance which was wrong) 2014-07-25 10:09:44 +01:00
Allan Jardine
fc9d6fac64 Fix - examples: Update the tag CSS to be more readable 2014-07-25 10:09:09 +01:00
Allan Jardine
a19e700582 Fix: When using :visible for the column selector to get visible columns, no columns were returned due to an incorrect regex. Now :visible can be used to get only the visible columns 2014-07-25 10:08:26 +01:00
Allan Jardine
7668646e1e Fix: Regression from 1.10 whereby empty data for a column could cause an offset in the filtering column 2014-07-18 12:11:05 +01:00
Allan Jardine
9f5eb39a2f Dev: Moving on to 1.10.2 development 2014-07-18 12:10:43 +01:00
Allan Jardine
89c4e24698 Fix examples: Search API examples should use consistent terminology 2014-07-18 12:09:54 +01:00
Allan Jardine
c4cdba49e4 Fix example: Use search terminology 
* See thread 22268
 2014-07-18 12:09:03 +01:00
Allan Jardine
e89c187b16 Remove old demo files that are no longer required 2014-07-15 11:40:48 +01:00
Allan Jardine
3cd15f1c16 DataTables 1.10.1 release 2014-07-15 11:33:57 +01:00
Allan Jardine
641924cbee Fix: If filtering data is null, undefined or NaN it is not included in the filter 2014-07-15 11:33:39 +01:00
Allan Jardine
39df74eb2c Fix: dt-init createdCell cellData prarameter now passes in the original data for the cell 
* This reverts the last commit which documented the old behaviour.
  Thinking again about it, if you want to modify the rendered data use
  `$(cell).html()`.
 2014-07-15 11:33:25 +01:00
Allan Jardine
13e33e2177 Fix docs: Add clarification for cellData in dt-init columns.createdCell 
* Based on discussion in thre 22009
 2014-07-15 11:33:10 +01:00
Allan Jardine
786d79d1a9 Fix: dt-api cell() was not selecting cells for row index 0 
* Problem was the check for the index was falsy rather than checking for
  undefined
* See thread 22219 for more information
 2014-07-11 10:11:17 +01:00
Allan Jardine
cd920b0605 New: Instance methods for a data source are now executed in the scope of that instance 
* When `dt-init columns.data` / `dt-init columns.render` resolve to a
  function, that function is executed. Previously this execution was in
  the global scope, but in order to be able to use an instance as a data
  source for the row (something I wanted as part of 1.10) we need to
  execute the function with the instance's scope. A simple `call()` does
  this.
* I could add a check to see if the `rowData` is a plain object or not,
  but that would add significant overhead to the processing, and this
  particular part of the code needs to be very fast. Additionally, I
  think it is unlikely that any one was dependant on this being executed
  in global scope, so the change is made.
* This fixes DataTables/DataTables #368.
 2014-07-10 16:11:29 +01:00
Allan Jardine
264e1f0a60 New: Cell styling classes for alignment of text 
* This fixes DataTables/DataTables #371
 2014-07-10 14:24:04 +01:00
Allan Jardine
78724dd11d Fix: With deferred rendering enabled a DOM sourced table would create new nodes rather than using the exisiting one. It should be noted that deffered rendering with a DOM sourced table is completely redundant, but it should still use the same nodes. 
* This fixes DataTables/DataTables #365
 2014-07-10 12:28:49 +01:00
Allan Jardine
c50629a4b5 Fix: Boolean type searching 
* 1.10.0 had issues when searching for boolean data as the search
  extension methods were checking for empty data, but if found they were
  using `''` as the term to filter. It should more accurately just use
  the given data.
* Relates, the `_empty()` method was considering `false` to be empty,
  but not `true`. Both are now considered to be empty.
 2014-07-10 11:57:26 +01:00
Allan Jardine
ad7963b3dd New: state API methods 
* `dt-api state()` - get the last saved state
* `dt-api state.loaded()` - get the state that was loaded when the table
  was created
* `dt-api state.save()` - trigger a state save
* `dt-api state.clear()` - clear the saved state
 2014-07-09 16:42:29 +01:00
Allan Jardine
9b8153f1d6 Dev: Fix recent childNode removal when checking for nodes 2014-07-09 09:12:29 +01:00
Allan Jardine
02b6a5c39c Fix: camelCase notation for column search options (dt-init searchCols) wasn't working 
* Fix is to convert from hungarian notation to camelCase in a loop for
  the array

New: State staving object structure is now full documentated

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Angela "Cheif Exec" London

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2
.datatables-commit-sync
View File

@@ -1 +1 @@
0a10f0a40ff1c6fa3b8d5c8e2e5abab318de88d2
e6ea753d4408ad0a45b409ac8105d565075c21d9

2
.gitignore vendored
View File

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

9
Readme.md
View File

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

2
bower.json
View File

@@ -1,6 +1,6 @@
{
"name": "datatables",
"version": "1.10.0-beta.2",
"version": "1.10.2",
"main": [
"media/js/jquery.dataTables.js",
"media/css/jquery.dataTables.css"

2
composer.json
View File

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

2
dataTables.jquery.json
View File

@@ -1,6 +1,6 @@
{
"name": "DataTables",
"version": "1.10.0-beta.2",
"version": "1.10.2",
"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/",

25
examples/advanced_init/column_render.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Column rendering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -42,16 +43,17 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Column rendering</span></h1>
<h1>DataTables example <span>Column rendering</span></h1>
<div class="info">
<p>Each column has an optional rendering control called <a href=
"//datatables.net/reference/option/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> which can be used to process the content of each cell
before the data is used. <a href="//datatables.net/reference/option/columns.render"><code class=
"option" title="Initialisation option">columns.render</code></a> has a wide array of options available
to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can
be used very simply to manipulate the content of a cell, as shown here.</p>
"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>
<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
@@ -672,14 +674,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -697,8 +700,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -711,7 +714,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

20
examples/advanced_init/complex_header.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Complex headers (rowspan / colspan)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -34,7 +35,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Complex headers (rowspan / colspan)</span></h1>
<h1>DataTables example <span>Complex headers (rowspan / colspan)</span></h1>
<div class="info">
<p>Complex headers (using colspan / rowspan) can be used to group columns of similar information in
@@ -44,10 +45,10 @@ $(document).ready(function() {
working with hidden columns. The colspan and rowspan attributes for each cell are automatically
calculated and rendered on the page for you. This allows the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title=
"Initialisation option">columns.visible</code></a> option and <a href=
"DataTables initialisation option">columns.visible<span>DT</span></code></a> option and <a href=
"//datatables.net/reference/api/column().visible()"><code class="api" title=
"API method">column().visible()</code></a> method to take into account rowspan / colspan cells, drawing
the header correctly.</p>
"DataTables API method">column().visible()<span>DT</span></code></a> method to take into account
rowspan / colspan 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>
@@ -667,14 +668,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -692,8 +694,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -706,7 +708,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

22
examples/advanced_init/defaults.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Setting defaults</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -35,16 +36,16 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Setting defaults</span></h1>
<h1>DataTables example <span>Setting defaults</span></h1>
<div class="info">
<p>When working with DataTables over multiple pages it is often useful to set the initialisation
defaults to common values (for example you might want to set <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> to a common value so all tables get the same layout). This can
be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same
parameters as the DataTables initialisation object, but in this case you are setting the default for
all future initialisations of DataTables.</p>
"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>
<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>
@@ -657,14 +658,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -682,8 +684,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -696,7 +698,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

27
examples/advanced_init/dom_multiple_elements.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multiple table control elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,17 +40,18 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Multiple table control elements</span></h1>
<h1>DataTables example <span>Multiple table control elements</span></h1>
<div class="info">
<p>As is described by the basic DOM positioning example you can use the <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> initialisation parameter to move DataTables features around the
table to where you want them. In addition to this, you can also use <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> to create multiple instances of these table controls. Simply
include the feature's identification letter where you want it to appear, as many times as you wish, and
the controls will all sync up (note that obviously the table ('t') should be included only once).</p>
"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>
<p>This is shown in the demo below where for four key build-in features are duplicated above and below
the table.</p>
@@ -665,14 +667,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -690,8 +693,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -704,7 +707,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

25
examples/advanced_init/dom_toolbar.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom toolbar elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,22 +40,23 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom toolbar elements</span></h1>
<h1>DataTables example <span>Custom toolbar elements</span></h1>
<div class="info">
<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make
use of this mechanism as well to insert your own custom elements. In this example a <code class="tag"
title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a>, with which HTML is inserted to create the toolbar. You could
put whatever HTML you want into the toolbar and add event handlers etc.</p>
"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>
<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in
API available, which can be used to create plug-ins which are used in a table by a single character
reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> option (like the built in option of <code class="string" title=
"String">f</code> refers to 'filtering input', you could have an <code class="string" title=
"String">F</code> option which creates your own filtering input control, custom to your app).</p>
"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>
<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,
@@ -668,14 +670,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -693,8 +696,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -707,7 +710,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

31
examples/advanced_init/dt_events.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DataTables events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- DataTables events</span></h1>
<h1>DataTables example <span>DataTables events</span></h1>
<div class="info">
<p>DataTables fires a number of custom events which you can bind to in the standard jQuery fashion
@@ -48,16 +49,17 @@ $(document).ready(function() {
<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to
prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables <a href=
"//datatables.net/reference/api/on()"><code class="api" title="API method">on()</code></a> method can
be used like the jQuery <code>on()</code> method, but will automatically append the <code>dt</code>
namespace if required.</p>
"//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>
<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class=
"event" title="Event">order</code></a>, <a href="//datatables.net/reference/event/search"><code class=
"event" title="Event">search</code></a> and <a href=
"//datatables.net/reference/event/page"><code class="event" title="Event">page</code></a> events by
adding a notification that the event fired to an element on the page to show that they have indeed
fired.</p>
"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>
</div>
<div id="demo_info" class="box"></div>
@@ -673,14 +675,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -698,8 +701,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -712,7 +715,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/advanced_init/events_live.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DOM / jQuery events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -34,7 +35,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- DOM / jQuery events</span></h1>
<h1>DataTables example <span>DOM / jQuery events</span></h1>
<div class="info">
<p>Events assigned to the table can be exceptionally useful for user interaction, however you must be
@@ -652,14 +653,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,8 +679,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -691,7 +693,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

79
examples/advanced_init/footer_callback.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Footer callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -23,7 +24,8 @@
$(document).ready(function() {
$('#example').dataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api();
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
@@ -33,20 +35,20 @@ $(document).ready(function() {
};
// Total over all pages
var total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
data = api.column( 4 ).data();
total = data.length ?
data.reduce( function (a, b) {
return intVal(a) + intVal(b);
} ) :
0;
// Total over this page
var pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
data = api.column( 4, { page: 'current'} ).data();
pageTotal = data.length ?
data.reduce( function (a, b) {
return intVal(a) + intVal(b);
} ) :
0;
// Update footer
$( api.column( 4 ).footer() ).html(
@@ -63,22 +65,23 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Footer callback</span></h1>
<h1>DataTables example <span>Footer callback</span></h1>
<div class="info">
<p>Through the use of the header and footer callback manipulation functions provided by DataTables
(<a href="//datatables.net/reference/option/headerCallback"><code class="option" title=
"Initialisation option">headerCallback</code></a> and <a href=
"DataTables initialisation option">headerCallback<span>DT</span></code></a> and <a href=
"//datatables.net/reference/option/footerCallback"><code class="option" title=
"Initialisation option">footerCallback</code></a>), it is possible to perform some powerful and useful
data manipulation functions, such as summarising data in the table.</p>
"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>
<p>The example below shows a footer callback being used to total the data for a column (both the
visible and the hidden data) using the <a href=
"//datatables.net/reference/api/column().data()"><code class="api" title=
"API method">column().data()</code></a> API method and <a href=
"DataTables API method">column().data()<span>DT</span></code></a> API method and <a href=
"//datatables.net/reference/api/column().footer()"><code class="api" title=
"API method">column().footer()</code></a> for writing the value into the footer.</p>
"DataTables API method">column().footer()<span>DT</span></code></a> for writing the value into the
footer.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -516,7 +519,8 @@ $(document).ready(function() {
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;footerCallback&quot;: function ( row, data, start, end, display ) {
var api = this.api();
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
@@ -526,20 +530,20 @@ $(document).ready(function() {
};
// Total over all pages
var total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
data = api.column( 4 ).data();
total = data.length ?
data.reduce( function (a, b) {
return intVal(a) + intVal(b);
} ) :
0;
// Total over this page
var pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
data = api.column( 4, { page: 'current'} ).data();
pageTotal = data.length ?
data.reduce( function (a, b) {
return intVal(a) + intVal(b);
} ) :
0;
// Update footer
$( api.column( 4 ).footer() ).html(
@@ -652,14 +656,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,8 +682,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -691,7 +696,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML5 data-* attributes</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -29,10 +30,10 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- HTML5 data-* attributes</span></h1>
<h1>DataTables example <span>HTML5 data-* attributes</span></h1>
<div class="info">
<p>DataTables can use different data for different actions (display, ordering and searcgubg) which can
<p>DataTables can use different data for different actions (display, ordering and searching) which can
be immensely powerful for transforming data in the display to be intuitive for the end user, while
using different, or more complex data, for other actions. For example, if a table contains a formatted
telephone number in the format <code>xxx-xxxx</code>, intuitively a user might search for the number
@@ -45,7 +46,7 @@ $(document).ready(function() {
custom HTML5 data attributes</a>. DataTables will automatically detect four different attributes on the
HTML elements:</p>
<ul>
<ul class="markdown">
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
</ul>
@@ -53,7 +54,7 @@ $(document).ready(function() {
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In
this case the first column has been formatted so the first name has abbreviated, but the full name is
still searchable (search for "Bruno" for example). Additionally, although the last column contains
non-numeric data in it (<code>/m</code>) the column will correctly order numerically as the
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>
</div>
@@ -87,456 +88,456 @@ $(document).ready(function() {
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td data-order="1303682400">Mon 25th Apr 11</td>
<td data-order="320800">$320,800/m</td>
<td data-order="1303686000">Mon 25th Apr 11</td>
<td data-order="320800">$320,800/y</td>
</tr>
<tr>
<td data-search="Garrett Winters">G. Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td data-order="1311544800">Mon 25th Jul 11</td>
<td data-order="170750">$170,750/m</td>
<td data-order="1311548400">Mon 25th Jul 11</td>
<td data-order="170750">$170,750/y</td>
</tr>
<tr>
<td data-search="Ashton Cox">A. Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td data-order="1231714800">Mon 12th Jan 09</td>
<td data-order="86000">$86,000/m</td>
<td data-order="1231718400">Mon 12th Jan 09</td>
<td data-order="86000">$86,000/y</td>
</tr>
<tr>
<td data-search="Cedric Kelly">C. Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td data-order="1332972000">Thu 29th Mar 12</td>
<td data-order="433060">$433,060/m</td>
<td data-order="1332975600">Thu 29th Mar 12</td>
<td data-order="433060">$433,060/y</td>
</tr>
<tr>
<td data-search="Airi Satou">A. Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td data-order="1227826800">Fri 28th Nov 08</td>
<td data-order="162700">$162,700/m</td>
<td data-order="1227830400">Fri 28th Nov 08</td>
<td data-order="162700">$162,700/y</td>
</tr>
<tr>
<td data-search="Brielle Williamson">B. Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td data-order="1354402800">Sun 2nd Dec 12</td>
<td data-order="372000">$372,000/m</td>
<td data-order="1354406400">Sun 2nd Dec 12</td>
<td data-order="372000">$372,000/y</td>
</tr>
<tr>
<td data-search="Herrod Chandler">H. Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td data-order="1344204000">Mon 6th Aug 12</td>
<td data-order="137500">$137,500/m</td>
<td data-order="1344207600">Mon 6th Aug 12</td>
<td data-order="137500">$137,500/y</td>
</tr>
<tr>
<td data-search="Rhona Davidson">R. Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td data-order="1287007200">Thu 14th Oct 10</td>
<td data-order="327900">$327,900/m</td>
<td data-order="1287010800">Thu 14th Oct 10</td>
<td data-order="327900">$327,900/y</td>
</tr>
<tr>
<td data-search="Colleen Hurst">C. Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td data-order="1252965600">Tue 15th Sep 09</td>
<td data-order="205500">$205,500/m</td>
<td data-order="1252969200">Tue 15th Sep 09</td>
<td data-order="205500">$205,500/y</td>
</tr>
<tr>
<td data-search="Sonya Frost">S. Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td data-order="1229122800">Sat 13th Dec 08</td>
<td data-order="103600">$103,600/m</td>
<td data-order="1229126400">Sat 13th Dec 08</td>
<td data-order="103600">$103,600/y</td>
</tr>
<tr>
<td data-search="Jena Gaines">J. Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td data-order="1229641200">Fri 19th Dec 08</td>
<td data-order="90560">$90,560/m</td>
<td data-order="1229644800">Fri 19th Dec 08</td>
<td data-order="90560">$90,560/y</td>
</tr>
<tr>
<td data-search="Quinn Flynn">Q. Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td data-order="1362265200">Sun 3rd Mar 13</td>
<td data-order="342000">$342,000/m</td>
<td data-order="1362268800">Sun 3rd Mar 13</td>
<td data-order="342000">$342,000/y</td>
</tr>
<tr>
<td data-search="Charde Marshall">C. Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td data-order="1224108000">Thu 16th Oct 08</td>
<td data-order="470600">$470,600/m</td>
<td data-order="1224111600">Thu 16th Oct 08</td>
<td data-order="470600">$470,600/y</td>
</tr>
<tr>
<td data-search="Haley Kennedy">H. Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td data-order="1355785200">Tue 18th Dec 12</td>
<td data-order="313500">$313,500/m</td>
<td data-order="1355788800">Tue 18th Dec 12</td>
<td data-order="313500">$313,500/y</td>
</tr>
<tr>
<td data-search="Tatyana Fitzpatrick">T. Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td data-order="1268780400">Wed 17th Mar 10</td>
<td data-order="385750">$385,750/m</td>
<td data-order="1268784000">Wed 17th Mar 10</td>
<td data-order="385750">$385,750/y</td>
</tr>
<tr>
<td data-search="Michael Silva">M. Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td data-order="1353970800">Tue 27th Nov 12</td>
<td data-order="198500">$198,500/m</td>
<td data-order="1353974400">Tue 27th Nov 12</td>
<td data-order="198500">$198,500/y</td>
</tr>
<tr>
<td data-search="Paul Byrd">P. Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td data-order="1276034400">Wed 9th Jun 10</td>
<td data-order="725000">$725,000/m</td>
<td data-order="1276038000">Wed 9th Jun 10</td>
<td data-order="725000">$725,000/y</td>
</tr>
<tr>
<td data-search="Gloria Little">G. Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td data-order="1239314400">Fri 10th Apr 09</td>
<td data-order="237500">$237,500/m</td>
<td data-order="1239318000">Fri 10th Apr 09</td>
<td data-order="237500">$237,500/y</td>
</tr>
<tr>
<td data-search="Bradley Greer">B. Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td data-order="1350079200">Sat 13th Oct 12</td>
<td data-order="132000">$132,000/m</td>
<td data-order="1350082800">Sat 13th Oct 12</td>
<td data-order="132000">$132,000/y</td>
</tr>
<tr>
<td data-search="Dai Rios">D. Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td data-order="1348610400">Wed 26th Sep 12</td>
<td data-order="217500">$217,500/m</td>
<td data-order="1348614000">Wed 26th Sep 12</td>
<td data-order="217500">$217,500/y</td>
</tr>
<tr>
<td data-search="Jenette Caldwell">J. Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td data-order="1315000800">Sat 3rd Sep 11</td>
<td data-order="345000">$345,000/m</td>
<td data-order="1315004400">Sat 3rd Sep 11</td>
<td data-order="345000">$345,000/y</td>
</tr>
<tr>
<td data-search="Yuri Berry">Y. Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td data-order="1245880800">Thu 25th Jun 09</td>
<td data-order="675000">$675,000/m</td>
<td data-order="1245884400">Thu 25th Jun 09</td>
<td data-order="675000">$675,000/y</td>
</tr>
<tr>
<td data-search="Caesar Vance">C. Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td data-order="1323644400">Mon 12th Dec 11</td>
<td data-order="106450">$106,450/m</td>
<td data-order="1323648000">Mon 12th Dec 11</td>
<td data-order="106450">$106,450/y</td>
</tr>
<tr>
<td data-search="Doris Wilder">D. Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td data-order="1284933600">Mon 20th Sep 10</td>
<td data-order="85600">$85,600/m</td>
<td data-order="1284937200">Mon 20th Sep 10</td>
<td data-order="85600">$85,600/y</td>
</tr>
<tr>
<td data-search="Angelica Ramos">A. Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td data-order="1255039200">Fri 9th Oct 09</td>
<td data-order="1200000">$1,200,000/m</td>
<td data-order="1255042800">Fri 9th Oct 09</td>
<td data-order="1200000">$1,200,000/y</td>
</tr>
<tr>
<td data-search="Gavin Joyce">G. Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td data-order="1292972400">Wed 22nd Dec 10</td>
<td data-order="92575">$92,575/m</td>
<td data-order="1292976000">Wed 22nd Dec 10</td>
<td data-order="92575">$92,575/y</td>
</tr>
<tr>
<td data-search="Jennifer Chang">J. Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td data-order="1289689200">Sun 14th Nov 10</td>
<td data-order="357650">$357,650/m</td>
<td data-order="1289692800">Sun 14th Nov 10</td>
<td data-order="357650">$357,650/y</td>
</tr>
<tr>
<td data-search="Brenden Wagner">B. Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td data-order="1307397600">Tue 7th Jun 11</td>
<td data-order="206850">$206,850/m</td>
<td data-order="1307401200">Tue 7th Jun 11</td>
<td data-order="206850">$206,850/y</td>
</tr>
<tr>
<td data-search="Fiona Green">F. Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td data-order="1268262000">Thu 11th Mar 10</td>
<td data-order="850000">$850,000/m</td>
<td data-order="1268265600">Thu 11th Mar 10</td>
<td data-order="850000">$850,000/y</td>
</tr>
<tr>
<td data-search="Shou Itou">S. Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td data-order="1313272800">Sun 14th Aug 11</td>
<td data-order="163000">$163,000/m</td>
<td data-order="1313276400">Sun 14th Aug 11</td>
<td data-order="163000">$163,000/y</td>
</tr>
<tr>
<td data-search="Michelle House">M. House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td data-order="1306965600">Thu 2nd Jun 11</td>
<td data-order="95400">$95,400/m</td>
<td data-order="1306969200">Thu 2nd Jun 11</td>
<td data-order="95400">$95,400/y</td>
</tr>
<tr>
<td data-search="Suki Burks">S. Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td data-order="1256162400">Thu 22nd Oct 09</td>
<td data-order="114500">$114,500/m</td>
<td data-order="1256166000">Thu 22nd Oct 09</td>
<td data-order="114500">$114,500/y</td>
</tr>
<tr>
<td data-search="Prescott Bartlett">P. Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td data-order="1304719200">Sat 7th May 11</td>
<td data-order="145000">$145,000/m</td>
<td data-order="1304722800">Sat 7th May 11</td>
<td data-order="145000">$145,000/y</td>
</tr>
<tr>
<td data-search="Gavin Cortez">G. Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td data-order="1224972000">Sun 26th Oct 08</td>
<td data-order="235500">$235,500/m</td>
<td data-order="1224975600">Sun 26th Oct 08</td>
<td data-order="235500">$235,500/y</td>
</tr>
<tr>
<td data-search="Martena Mccray">M. Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td data-order="1299625200">Wed 9th Mar 11</td>
<td data-order="324050">$324,050/m</td>
<td data-order="1299628800">Wed 9th Mar 11</td>
<td data-order="324050">$324,050/y</td>
</tr>
<tr>
<td data-search="Unity Butler">U. Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td data-order="1260313200">Wed 9th Dec 09</td>
<td data-order="85675">$85,675/m</td>
<td data-order="1260316800">Wed 9th Dec 09</td>
<td data-order="85675">$85,675/y</td>
</tr>
<tr>
<td data-search="Howard Hatfield">H. Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td data-order="1229382000">Tue 16th Dec 08</td>
<td data-order="164500">$164,500/m</td>
<td data-order="1229385600">Tue 16th Dec 08</td>
<td data-order="164500">$164,500/y</td>
</tr>
<tr>
<td data-search="Hope Fuentes">H. Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td data-order="1265929200">Fri 12th Feb 10</td>
<td data-order="109850">$109,850/m</td>
<td data-order="1265932800">Fri 12th Feb 10</td>
<td data-order="109850">$109,850/y</td>
</tr>
<tr>
<td data-search="Vivian Harrell">V. Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td data-order="1234566000">Sat 14th Feb 09</td>
<td data-order="452500">$452,500/m</td>
<td data-order="1234569600">Sat 14th Feb 09</td>
<td data-order="452500">$452,500/y</td>
</tr>
<tr>
<td data-search="Timothy Mooney">T. Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td data-order="1228950000">Thu 11th Dec 08</td>
<td data-order="136200">$136,200/m</td>
<td data-order="1228953600">Thu 11th Dec 08</td>
<td data-order="136200">$136,200/y</td>
</tr>
<tr>
<td data-search="Jackson Bradshaw">J. Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td data-order="1222380000">Fri 26th Sep 08</td>
<td data-order="645750">$645,750/m</td>
<td data-order="1222383600">Fri 26th Sep 08</td>
<td data-order="645750">$645,750/y</td>
</tr>
<tr>
<td data-search="Olivia Liang">O. Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td data-order="1296687600">Thu 3rd Feb 11</td>
<td data-order="234500">$234,500/m</td>
<td data-order="1296691200">Thu 3rd Feb 11</td>
<td data-order="234500">$234,500/y</td>
</tr>
<tr>
<td data-search="Bruno Nash">B. Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td data-order="1304373600">Tue 3rd May 11</td>
<td data-order="163500">$163,500/m</td>
<td data-order="1304377200">Tue 3rd May 11</td>
<td data-order="163500">$163,500/y</td>
</tr>
<tr>
<td data-search="Sakura Yamamoto">S. Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td data-order="1250632800">Wed 19th Aug 09</td>
<td data-order="139575">$139,575/m</td>
<td data-order="1250636400">Wed 19th Aug 09</td>
<td data-order="139575">$139,575/y</td>
</tr>
<tr>
<td data-search="Thor Walton">T. Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td data-order="1376172000">Sun 11th Aug 13</td>
<td data-order="98540">$98,540/m</td>
<td data-order="1376175600">Sun 11th Aug 13</td>
<td data-order="98540">$98,540/y</td>
</tr>
<tr>
<td data-search="Finn Camacho">F. Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td data-order="1246917600">Tue 7th Jul 09</td>
<td data-order="87500">$87,500/m</td>
<td data-order="1246921200">Tue 7th Jul 09</td>
<td data-order="87500">$87,500/y</td>
</tr>
<tr>
<td data-search="Serge Baldwin">S. Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td data-order="1333922400">Mon 9th Apr 12</td>
<td data-order="138575">$138,575/m</td>
<td data-order="1333926000">Mon 9th Apr 12</td>
<td data-order="138575">$138,575/y</td>
</tr>
<tr>
<td data-search="Zenaida Frank">Z. Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td data-order="1262559600">Mon 4th Jan 10</td>
<td data-order="125250">$125,250/m</td>
<td data-order="1262563200">Mon 4th Jan 10</td>
<td data-order="125250">$125,250/y</td>
</tr>
<tr>
<td data-search="Zorita Serrano">Z. Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td data-order="1338501600">Fri 1st Jun 12</td>
<td data-order="115000">$115,000/m</td>
<td data-order="1338505200">Fri 1st Jun 12</td>
<td data-order="115000">$115,000/y</td>
</tr>
<tr>
<td data-search="Jennifer Acosta">J. Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td data-order="1359673200">Fri 1st Feb 13</td>
<td data-order="75650">$75,650/m</td>
<td data-order="1359676800">Fri 1st Feb 13</td>
<td data-order="75650">$75,650/y</td>
</tr>
<tr>
<td data-search="Cara Stevens">C. Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td data-order="1323126000">Tue 6th Dec 11</td>
<td data-order="145600">$145,600/m</td>
<td data-order="1323129600">Tue 6th Dec 11</td>
<td data-order="145600">$145,600/y</td>
</tr>
<tr>
<td data-search="Hermione Butler">H. Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td data-order="1300662000">Mon 21st Mar 11</td>
<td data-order="356250">$356,250/m</td>
<td data-order="1300665600">Mon 21st Mar 11</td>
<td data-order="356250">$356,250/y</td>
</tr>
<tr>
<td data-search="Lael Greer">L. Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td data-order="1235689200">Fri 27th Feb 09</td>
<td data-order="103500">$103,500/m</td>
<td data-order="1235692800">Fri 27th Feb 09</td>
<td data-order="103500">$103,500/y</td>
</tr>
<tr>
<td data-search="Jonas Alexander">J. Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td data-order="1279058400">Wed 14th Jul 10</td>
<td data-order="86500">$86,500/m</td>
<td data-order="1279062000">Wed 14th Jul 10</td>
<td data-order="86500">$86,500/y</td>
</tr>
<tr>
<td data-search="Shad Decker">S. Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td data-order="1226530800">Thu 13th Nov 08</td>
<td data-order="183000">$183,000/m</td>
<td data-order="1226534400">Thu 13th Nov 08</td>
<td data-order="183000">$183,000/y</td>
</tr>
<tr>
<td data-search="Michael Bruce">M. Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td data-order="1309125600">Mon 27th Jun 11</td>
<td data-order="183000">$183,000/m</td>
<td data-order="1309129200">Mon 27th Jun 11</td>
<td data-order="183000">$183,000/y</td>
</tr>
<tr>
<td data-search="Donna Snider">D. Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td data-order="1295910000">Tue 25th Jan 11</td>
<td data-order="112000">$112,000/m</td>
<td data-order="1295913600">Tue 25th Jan 11</td>
<td data-order="112000">$112,000/y</td>
</tr>
</tbody>
</table>
@@ -659,14 +660,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -684,8 +686,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -698,7 +700,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

3
examples/advanced_init/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Advanced initialisation</span></h1>
<h1>DataTables example <span>Advanced initialisation</span></h1>
<div class="info">
<p>The configuration options offered by DataTables extend much further than the options shown in the

20
examples/advanced_init/language_file.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language file</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -33,15 +34,15 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Language file</span></h1>
<h1>DataTables example <span>Language file</span></h1>
<div class="info">
<p>As well as being able to pass language information to DataTables through the <a href=
"//datatables.net/reference/option/language"><code class="option" title=
"Initialisation option">language</code></a> initialisation option, you can also store the language
information in a file, which DataTables can load by Ajax using the <a href=
"DataTables 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=
"Initialisation option">language.url</code></a> option.</p>
"DataTables initialisation option">language.url<span>DT</span></code></a> option.</p>
<p>The following example shows DataTables reading a German language file.</p>
</div>
@@ -651,14 +652,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -676,8 +678,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -690,7 +692,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

19
examples/advanced_init/length_menu.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Page length options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -31,16 +32,17 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Page length options</span></h1>
<h1>DataTables example <span>Page length options</span></h1>
<div class="info">
<p>It is possible to easily customise the options shown in the length menu (by default at the top left
of the table) using the <a href="//datatables.net/reference/option/lengthMenu"><code class="option"
title="Initialisation option">lengthMenu</code></a> initialisation option.</p>
title="DataTables initialisation option">lengthMenu<span>DT</span></code></a> initialisation
option.</p>
<p>This parameter can take one of two forms:</p>
<ul>
<ul class="markdown">
<li>A 1D array of options which will be used for both the displayed option and the value, or</li>
<li>A 2D array in which the first array is used to define the value options and the second array
the displayed options (useful for language strings such as 'All').</li>
@@ -652,14 +654,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,8 +680,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -691,7 +694,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

22
examples/advanced_init/row_callback.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row created callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -40,20 +41,20 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row created callback</span></h1>
<h1>DataTables example <span>Row created callback</span></h1>
<div class="info">
<p>The following example shows how a callback function can be used to format a particular row at draw
time. For each row that is generated for display, the <a href=
"//datatables.net/reference/option/createdRow"><code class="option" title=
"Initialisation option">createdRow</code></a> function is called once and once only. It is passed the
create row node which can then be modified.</p>
"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>
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to
the container cell if the salary is greater than $4,000. Note that <a href=
"//datatables.net/reference/option/columns.createdCell"><code class="option" title=
"Initialisation option">columns.createdCell</code></a> could also be used to create exactly the same
effect.</p>
"DataTables initialisation option">columns.createdCell<span>DT</span></code></a> could also be used to
create exactly the same effect.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -666,14 +667,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -691,8 +693,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -705,7 +707,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

22
examples/advanced_init/row_grouping.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row grouping</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -66,7 +67,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row grouping</span></h1>
<h1>DataTables example <span>Row grouping</span></h1>
<div class="info">
<p>Although DataTables doesn't have row grouping built-in (picking one of the many methods available
@@ -76,10 +77,10 @@ $(document).ready(function() {
<p>In the example below the 'group' is the office location, which is based on the information in the
third column (which is set to hidden). The grouping indicator is added by the <a href=
"//datatables.net/reference/option/drawCallback"><code class="option" title=
"Initialisation option">drawCallback</code></a> function, which will parse through the rows which are
displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event
handler is added for the grouping rows to allow the grouping order to be restored as well as ordering
by any other column.</p>
"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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -718,14 +719,15 @@ tr.group:hover {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -743,8 +745,8 @@ tr.group:hover {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -757,7 +759,7 @@ tr.group:hover {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

22
examples/advanced_init/sort_direction_control.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Order direction sequence control</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -38,19 +39,19 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Order direction sequence control</span></h1>
<h1>DataTables example <span>Order direction sequence control</span></h1>
<div class="info">
<p>At times you may wish to change the default ordering direction sequence for columns (some or all of
them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of
the <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
"Initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also
allows you to limit the ordering to a single direction, or you could add complex behaviour to the
ordering interaction.</p>
"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>
<p>The example below shows:</p>
<ul>
<ul class="markdown">
<li>Column 1 - default ordering</li>
<li>Column 2 - default ordering</li>
<li>Column 3 - ascending ordering only</li>
@@ -675,14 +676,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -700,8 +702,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -714,7 +716,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

27
examples/ajax/custom_data_flat.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Flat array data source</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -40,19 +41,20 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Flat array data source</span></h1>
<h1>DataTables example <span>Flat array data source</span></h1>
<div class="info">
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
be change by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> initiation option.</p>
"DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
it can be used:</p>
<ul>
<ul class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
@@ -63,9 +65,9 @@ $(document).ready(function() {
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="Initialisation option">ajax.dataSrc</code></a> being used as an empty string. This
tells DataTables that the JSON loaded is a plain array, not an object with an array inside it as is the
default.</p>
"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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -226,14 +228,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -251,8 +254,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -265,7 +268,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

28
examples/ajax/custom_data_property.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom data source property</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -32,19 +33,20 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom data source property</span></h1>
<h1>DataTables example <span>Custom data source property</span></h1>
<div class="info">
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
be change by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> initiation option.</p>
"DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
it can be used:</p>
<ul>
<ul class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
@@ -55,9 +57,10 @@ $(document).ready(function() {
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="Initialisation option">ajax.dataSrc</code></a> being used as a string to get the data
from a different source property, in this case <code class="string" title="String">demo</code> but it
could be any value, included a nested property by using standard dotted Javascript object notation.</p>
"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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -210,14 +213,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -235,8 +239,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -249,7 +253,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

114
examples/ajax/data/orthogonal.txt
View File

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

25
examples/ajax/deep.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Nested object data (objects)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -38,16 +39,17 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Nested object data (objects)</span></h1>
<h1>DataTables example <span>Nested object data (objects)</span></h1>
<div class="info">
<p>DataTables has the ability to use data from almost data JSON data source through the use of the
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option. In its simplest case, it can be used to read
arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays
through the use of standard Javascript dotted object notation. Each dot (<code>.</code>) in the
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option represents another object level.</p>
"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>
<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
@@ -229,14 +231,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -254,8 +257,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -268,7 +271,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

16
examples/ajax/defer_render.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Deferred rendering for speed</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -30,13 +31,13 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Deferred rendering for speed</span></h1>
<h1>DataTables example <span>Deferred rendering for speed</span></h1>
<div class="info">
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs.
One method to do this is to make use of the built-in deferred rendering option in DataTables with the
<a href="//datatables.net/reference/option/deferRender"><code class="option" title=
"Initialisation option">deferRender</code></a> option.</p>
"DataTables initialisation option">deferRender<span>DT</span></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
@@ -198,14 +199,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -223,8 +225,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -237,7 +239,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

7
examples/ajax/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,14 +16,14 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax sourced data</span></h1>
<h1>DataTables example <span>Ajax sourced data</span></h1>
<div class="info">
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging
etc on the client-side. This is done through use of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option, which has a number of options to customise how the data
is retrieved from the server.</p>
"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>
<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with
client-side processing.</p>

42
examples/ajax/null_data_source.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Generated content for a column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,35 +40,35 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Generated content for a column</span></h1>
<h1>DataTables example <span>Generated content for a column</span></h1>
<div class="info">
<p>In some tables you might wish to have some content generated automatically. This can be done in a
number of ways:</p>
<ul>
<ul class="markdown">
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> for content that is dynamic (i.e. based upon the
row's data)</li>
"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.defaultContent"><code class="option" title=
"Initialisation option">columns.defaultContent</code></a> for static content (i.e. simple
strings)</li>
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> for static
content (i.e. simple strings)</li>
</ul>
<p>This examples shows the use of <a href=
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"Initialisation option">columns.defaultContent</code></a> to create a <em>button</em> element in the
last column of the table. A simple jQuery <code>click</code> event listener is used to watch for clicks
on the row, and when activated uses the <a href=
"DataTables 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=
"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>
"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>
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option"
title="Initialisation option">columns.data</code></a> option for the column has been set to
<code>null</code> to indicate that the column has no information that should be obtained data source
object.</p>
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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -227,14 +228,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -252,8 +254,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -266,7 +268,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

18
examples/ajax/objects.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax data source (objects)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -37,7 +38,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax data source (objects)</span></h1>
<h1>DataTables example <span>Ajax data source (objects)</span></h1>
<div class="info">
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for
@@ -48,8 +49,8 @@ $(document).ready(function() {
<p>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option which you use to tell DataTables which property
to use from the data source object for each column.</p>
"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>
<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>
@@ -221,14 +222,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -246,8 +248,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -260,7 +262,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

34
examples/ajax/objects_subarrays.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Nested object data (arrays)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -37,29 +38,29 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Nested object data (arrays)</span></h1>
<h1>DataTables example <span>Nested object data (arrays)</span></h1>
<div class="info">
<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by
DataTables through the <a href="//datatables.net/reference/option/columns.data"><code class="option"
title="Initialisation option">columns.data</code></a> option, which is particularly useful for working
with JSON feeds in an already defined format.</p>
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>
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option has the ability to read information not only
from objects, but also from arrays using the same dotted object syntax as for objects. In addition to
this, when working with an array data source <a href=
"DataTables 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=
"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 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=
"Initialisation option">columns.data</code></a> as a function).</p>
"DataTables initialisation option">columns.data<span>DT</span></code></a> as a function).</p>
<p>This example shows two different aspects of using <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> to read arrays:</p>
"DataTables initialisation option">columns.data<span>DT</span></code></a> to read arrays:</p>
<ul>
<ul class="markdown">
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which
are automatically concatenated together. This is done by using array bracket syntax, with the
characters between the brackets being used as the glue between elements (e.g. <code>name[,
@@ -242,14 +243,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -267,8 +269,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -281,7 +283,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Orthogonal data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -40,7 +41,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Orthogonal data</span></h1>
<h1>DataTables example <span>Orthogonal data</span></h1>
<div class="info">
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for
@@ -51,8 +52,8 @@ $(document).ready(function() {
<p>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option which you use to tell DataTables which property
to use from the data source object for each column.</p>
"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>
<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>
@@ -230,14 +231,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -255,8 +257,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -269,7 +271,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

28
examples/ajax/simple.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax data source (arrays)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -29,26 +30,28 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax data source (arrays)</span></h1>
<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
<div class="info">
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by
Ajax. This can be done, in its most simple form, by setting the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
"DataTables initialisation option">ajax<span>DT</span></code></a> option to the address of the JSON
data source.</p>
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option also allows for more advanced configuration such as
altering how the Ajax request is made. See the <a href=
"DataTables 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=
"Initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for
further information.</p>
"DataTables initialisation option">ajax<span>DT</span></code></a> documentation or the other Ajax
examples for DataTables for further information.</p>
<p>By default DataTables will assume that an array data source is to be used and will read the
information to be displayed in each column from the row's array using the column index, making working
with arrays very simple (note that this can be changed, or objects used may using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option, shown in other examples).</p>
"DataTables initialisation option">columns.data<span>DT</span></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>
@@ -212,14 +215,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -237,8 +241,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -251,7 +255,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

29
examples/api/add_row.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Add rows</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -45,19 +46,20 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Add rows</span></h1>
<h1>DataTables example <span>Add rows</span></h1>
<div class="info">
<p>New rows can be added to a DataTable very easily using the <a href=
"//datatables.net/reference/api/row.add()"><code class="api" title="API method">row.add()</code></a>
API method. Simply call the API function with the data that is to be used for the new row (be it an
array or object). Multiple rows can be added using the <a href=
"//datatables.net/reference/api/rows.add()"><code class="api" title="API method">rows.add()</code></a>
method (note the plural).</p>
"//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>
<p>Note that in order to see the new row in the table you must call the <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a> method,
which is easily done through the chaining that the DataTables API makes use of.</p>
"//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>
<p>This example shows a single row being added each time the button below is clicked upon.</p>
</div><button id="addRow">Add new row</button>
@@ -221,14 +223,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -246,8 +249,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li class="active"><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -258,7 +261,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

35
examples/api/api_in_init.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Using API in callbacks</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -36,24 +37,25 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Using API in callbacks</span></h1>
<h1>DataTables example <span>Using API in callbacks</span></h1>
<div class="info">
<p>There are times when you may wish to call API functions inside the DataTables callback functions
(for example <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"Initialisation option">initComplete</code></a>, <a href=
"DataTables initialisation option">initComplete<span>DT</span></code></a>, <a href=
"//datatables.net/reference/option/rowCallback"><code class="option" title=
"Initialisation option">rowCallback</code></a> etc). The complicating issue with this is that the
object hasn't fully initialised, so you can't assign the result to a variable and then use that
variable in the callback. However, all of DataTables' callback functions are executed in the scope of
the DataTable instance, so you can use the Javascript special variable <code>this</code> to access the
API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag"
title="HTML tag">table</code> node.</p>
"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>
<p>In this example you will be able to see that the <a href=
"//datatables.net/reference/api/%24()"><code class="api" title="API method">$()</code></a> method is
used to get all cell nodes in the table's body and then act on them (in this case adding a click
event). The action here is to apply a filter to the table with the value of what is in each cell.</p>
"//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>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
@@ -671,14 +673,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -696,8 +699,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -708,7 +711,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li class="active"><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

35
examples/api/counter_columns.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Index column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -42,7 +43,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Index column</span></h1>
<h1>DataTables example <span>Index column</span></h1>
<div class="info">
<p>A fairly common requirement for highly interactive tables which are displayed on the web is to have
@@ -51,16 +52,17 @@ $(document).ready(function() {
<p>This example shows how this can be achieved with DataTables, where the first column is the counter
column, and is updated when ordering or searching occurs. This is done by listening for the <a href=
"//datatables.net/reference/event/order"><code class="event" title="Event">order</code></a> and
<a href="//datatables.net/reference/event/search"><code class="event" title="Event">search</code></a>
events emitted by the table. When these events are detected the <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title=
"API method">column().nodes()</code></a> method is used to get the TD/TH nodes for the target column
and the <code>each()</code> helper function used to iterate over each, which have their contents
updated as needed. Note that the <code>filter</code> and <code>order</code> options are using in the
<a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method to get the nodes in the current order and with the currently
applied filter.</p>
"//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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -680,14 +682,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -705,8 +708,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -717,7 +720,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

23
examples/api/form.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Form inputs</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -38,7 +39,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Form inputs</span></h1>
<h1>DataTables example <span>Form inputs</span></h1>
<div class="info">
<p>In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the
@@ -48,10 +49,11 @@ $(document).ready(function() {
longer.</p>
<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title=
"API method">$()</code></a> method can be used to get nodes from the document regardless of paging,
ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api"
title="API method">$()</code></a> being used to get all <code class="tag" title="HTML tag">input</code>
elements from the table.</p>
"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>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>
@@ -1733,14 +1735,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -1758,8 +1761,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -1770,7 +1773,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

25
examples/api/highlight.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Highlighting rows and columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -49,7 +50,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Highlighting rows and columns</span></h1>
<h1>DataTables example <span>Highlighting rows and columns</span></h1>
<div class="info">
<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor
@@ -58,12 +59,13 @@ $(document).ready(function() {
<p>This example shows that in action on DataTable by making use of the <a href=
"//datatables.net/reference/api/cell().index()"><code class="api" title=
"API method">cell().index()</code></a> method to get the index of the column that is to be operated on,
and then the <a href="//datatables.net/reference/api/cells().nodes()"><code class="api" title=
"API method">cells().nodes()</code></a> and <a href=
"DataTables 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=
"API method">column().nodes()</code></a> methods to remove old classes and apply the new highlighted
class, respectively.</p>
"DataTables API method">column().nodes()<span>DT</span></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%">
@@ -686,14 +688,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -711,8 +714,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li class="active"><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -723,7 +726,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

9
examples/api/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- API</span></h1>
<h1>DataTables example <span>API</span></h1>
<div class="info">
<p>The real power of DataTables can be exploited through the use of the API that it presents. The
@@ -35,8 +36,8 @@
<h3><a href="./index.html">API</a></h3>
<ul class="toc">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -47,7 +48,7 @@
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
</div>

89
examples/api/multi_filter.html
View File

@@ -3,13 +3,20 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Individual column filtering (text inputs)</title>
<title>DataTables example - Individual column searching (text inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
@@ -27,13 +34,15 @@ $(document).ready(function() {
// DataTable
var table = $('#example').DataTable();
// Apply the filter
$("#example tfoot input").on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );
@@ -44,30 +53,31 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Individual column filtering (text inputs)</span></h1>
<h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
<div class="info">
<p>The filtering functionality that is provided by DataTables is very useful for quickly search through
<p>The searching functionality that is provided by DataTables is very useful for quickly search through
the information in the table - however the search is global, and you may wish to present controls to
filter on specific columns only.</p>
search on specific columns only.</p>
<p>DataTables has the ability to apply filtering to a specific column through the <a href=
<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=
"API method">column().search()</code></a> method (note that the name of the method is
<code>search</code> not <code>filter</code> since <a href=
"//datatables.net/reference/api/filter()"><code class="api" title="API method">filter()</code></a> is
used to apply a filter to a data set).</p>
"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>
<p>The column filters are cumulative, so you can apply multiple individual column filters, in addition
to the global filter, allowing complex filtering options to be presented to the user.</p>
<p>The column searches are cumulative, so you can apply multiple individual column searchs, in addition
to the global search, allowing complex searching options to be presented to the user.</p>
<p>This examples shows text elements being used with the <a href=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"API method">column().search()</code></a> method to add input controls in the footer of the table for
each column. Note that the <code>*index*:visible</code> option is used for the column selector to
ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method takes into account any hidden columns when selecting the column
to act upon.</p>
"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 <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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -573,13 +583,15 @@ $(document).ready(function() {
// DataTable
var table = $('#example').DataTable();
// Apply the filter
$(&quot;#example tfoot input&quot;).on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );</code>
@@ -601,7 +613,11 @@ $(document).ready(function() {
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
below:</p><code class="multiline brush: js;">tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
@@ -689,14 +705,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -714,9 +731,9 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li class="active"><a href="./multi_filter.html">Individual column filtering (text
<li class="active"><a href="./multi_filter.html">Individual column searching (text
inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -727,7 +744,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

46
examples/api/multi_filter_select.html
View File

@@ -3,8 +3,9 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Individual column filtering (select inputs)</title>
<title>DataTables example - Individual column searching (select inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@@ -25,8 +26,10 @@ $(document).ready(function() {
var select = $('<select><option value=""></option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
var val = $(this).val();
table.column( i )
.search( $(this).val() )
.search( val ? '^'+$(this).val()+'$' : val, true, false )
.draw();
} );
@@ -43,7 +46,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Individual column filtering (select inputs)</span></h1>
<h1>DataTables example <span>Individual column searching (select inputs)</span></h1>
<div class="info">
<p>This example is almost identical to text based individual column example and provides the same
@@ -53,14 +56,24 @@ $(document).ready(function() {
<p>After the table is initialised, the API is used to build the <code class="tag" title=
"HTML tag">select</code> inputs through the use of the <a href=
"//datatables.net/reference/api/column().data()"><code class="api" title=
"API method">column().data()</code></a> method to get the data for each column in turn. The helper
methods <a href="//datatables.net/reference/api/unique()"><code class="api" title=
"API method">unique()</code></a> and <a href="//datatables.net/reference/api/sort()"><code class="api"
title="API method">sort()</code></a> are also used to reduce the data for set input to unique and
ordered elements. Finally the <code>change</code> event from the <code class="tag" title=
"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=
"API method">column().search()</code></a> method.</p>
"DataTables API method">column().search()<span>DT</span></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> and <a href=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()<span>DT</span></code></a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -564,8 +577,10 @@ $(document).ready(function() {
var select = $('&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;')
.appendTo( $(this).empty() )
.on( 'change', function () {
var val = $(this).val();
table.column( i )
.search( $(this).val() )
.search( val ? '^'+$(this).val()+'$' : val, true, false )
.draw();
} );
@@ -681,14 +696,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -706,8 +722,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li class="active"><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li class="active"><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -718,7 +734,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

44
examples/api/regex.html
View File

@@ -3,8 +3,9 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Filtering API (regular expressions)</title>
<title>DataTables example - Search API (regular expressions)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@@ -53,41 +54,41 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Filtering API (regular expressions)</span></h1>
<h1>DataTables example <span>Search API (regular expressions)</span></h1>
<div class="info">
<p>Filtering a table is one of the most common user interactions with a DataTables table, and
<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 filter (<a href="//datatables.net/reference/api/search()"><code class="api" title=
"API method">search()</code></a>) and for each individual column (<a href=
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=
"API method">column().search()</code></a>).</p>
"DataTables API method">column().search()<span>DT</span></code></a>).</p>
<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api"
title="API method">draw()</code></a> method after performing the search, in order for the results to be
displayed.</p>
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>Each filter (global or column) can be marked as a regular expression (allowing you to create very
complex interactions) and as a smart filter or not. When smart filtering is enabled on a particular
filter, DataTables will modify the user input string to a complex regular expression which can make
filtering more intuitive.</p>
<p>Each search (global or column) can be marked as a regular expression (allowing you to create very
complex interactions) and as a smart search or not. When smart searching is enabled on a particular
search, DataTables will modify the user input string to a complex regular expression which can make
searching more intuitive.</p>
<p>This example allows you to "play" with the various filtering options that DataTables provides.</p>
<p>This example allows you to "play" with the various searching options that DataTables provides.</p>
</div>
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
<thead>
<tr>
<th>Target</th>
<th>Filter text</th>
<th>Search text</th>
<th>Treat as regex</th>
<th>Use smart filter</th>
<th>Use smart search</th>
</tr>
</thead>
<tbody>
<tr id="filter_global">
<td>Global filtering</td>
<td>Global search</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked=
@@ -766,14 +767,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -791,8 +793,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -803,7 +805,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li class="active"><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li class="active"><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

37
examples/api/row_details.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -14,7 +15,7 @@ td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
@@ -65,7 +66,7 @@ $(document).ready(function() {
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
@@ -88,7 +89,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Child rows (show extra / detailed information)</span></h1>
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
<div class="info">
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em>
@@ -96,14 +97,15 @@ $(document).ready(function() {
where you wish to convey more information about a row than there is space for in the host table.</p>
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
"api" title="API method">row().child</code></a> methods to firstly check if a row is already displayed,
and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
"API method">row().child.hide()</code></a>), otherwise show it (<a href=
"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=
"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>
"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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -178,7 +180,7 @@ $(document).ready(function() {
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
@@ -216,7 +218,7 @@ $(document).ready(function() {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}</code>
</div>
@@ -306,14 +308,15 @@ tr.details td.details-control {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -331,8 +334,8 @@ tr.details td.details-control {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li class="active"><a href="./row_details.html">Child rows (show extra / detailed
@@ -344,7 +347,7 @@ tr.details td.details-control {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

20
examples/api/select_row.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row selection (multiple rows)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -37,15 +38,15 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row selection (multiple rows)</span></h1>
<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
<div class="info">
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable.
This can be done by simply using a click event to add / remove a class on the table rows. The <a href=
"//datatables.net/reference/api/rows().data()"><code class="api" title=
"API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In
this case it is simply counting the number of selected rows, but much more complex interactions can
easily be developed.</p>
"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>
<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
@@ -664,14 +665,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -689,8 +691,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -701,7 +703,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

23
examples/api/select_single_row.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row selection and deletion (single row)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -43,7 +44,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row selection and deletion (single row)</span></h1>
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
<div class="info">
<p>This example shows a modification of the multiple row selection example, where just a single can now
@@ -52,10 +53,11 @@ $(document).ready(function() {
and applied to the row to be selected.</p>
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
"API method">row().remove()</code></a> method which will delete a row from a table, and the <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a> method
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging
(without the <code>false</code> parameter the paging would be reset to the first page).</p>
"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>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
@@ -680,14 +682,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -705,8 +708,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -718,7 +721,7 @@ $(document).ready(function() {
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

28
examples/api/show_hide.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Show / hide columns dynamically</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -42,20 +43,20 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Show / hide columns dynamically</span></h1>
<h1>DataTables example <span>Show / hide columns dynamically</span></h1>
<div class="info">
<p>This example shows how you can make use of the <a href=
"//datatables.net/reference/api/column().visible()"><code class="api" title=
"API method">column().visible()</code></a> API method to dynamically show and hide columns in a table.
Also included here is scrolling, just to show it enabled with this API method, although that is not
required for the API function to work.</p>
"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>
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href=
"//datatables.net/reference/api/columns()"><code class="api" title="API method">columns()</code></a>
method to select multiple columns and then using the <a href=
"//datatables.net/reference/api/columns().visible()"><code class="api" title=
"API method">columns().visible()</code></a> method to set their state.</p>
"//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>
<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
@@ -686,14 +687,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -711,8 +713,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -723,7 +725,7 @@ $(document).ready(function() {
<li class="active"><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

24
examples/api/tabs_and_scrolling.html
View File

@@ -3,11 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scrolling and jQuery UI tabs</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.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">
@@ -43,7 +44,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scrolling and jQuery UI tabs</span></h1>
<h1>DataTables example <span>Scrolling and jQuery UI tabs</span></h1>
<div class="info">
<p>This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed
@@ -54,13 +55,13 @@ $(document).ready(function() {
<p>This misalignment can be corrected by the <a href=
"//datatables.net/reference/api/columns.adjust()"><code class="api" title=
"API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has
dimensions).</p>
"DataTables API method">columns.adjust()<span>DT</span></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="API method">columns.adjust()</code></a>.</p>
"api" title="DataTables API method">columns.adjust()<span>DT</span></code></a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -602,7 +603,7 @@ $(document).ready(function() {
<li><a href=
"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
<li><a href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css</a></li>
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
</ul>
</div>
@@ -682,14 +683,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -707,8 +709,8 @@ $(document).ready(function() {
<h3><a href="./index.html">API</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
@@ -720,7 +722,7 @@ $(document).ready(function() {
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li class="active"><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI
tabs</a></li>
<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

24
examples/basic_init/alt_pagination.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Alternative pagination</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -29,18 +30,18 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Alternative pagination</span></h1>
<h1>DataTables example <span>Alternative pagination</span></h1>
<div class="info">
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page
numbers in-between) is fine for most situations, but there are cases where you may wish to customise
the options presented to the end user. This is done through DataTables' extensible pagination
mechanism, the <a href="//datatables.net/reference/option/pagingType"><code class="option" title=
"Initialisation option">pagingType</code></a> option.</p>
"DataTables initialisation option">pagingType<span>DT</span></code></a> option.</p>
<p>There are four built-in options for which pagination controls DataTables should show:</p>
<ul>
<ul class="markdown">
<li><code class="string" title="String">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>
@@ -52,9 +53,9 @@ $(document).ready(function() {
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation
options of DataTables; <a href="//datatables.net/reference/option/language.paginate.first"><code class=
"option" title="Initialisation option">language.paginate.first</code></a>, <a href=
"//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
"Initialisation option">language.paginate.previous</code></a> etc.</p>
"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>
<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
@@ -668,14 +669,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -693,8 +695,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -707,7 +709,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language - Comma decimal place</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -32,7 +33,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Language - Comma decimal place</span></h1>
<h1>DataTables example <span>Language - Comma decimal place</span></h1>
<div class="info">
<p>A dot (<code>.</code>) is used to mark the decimal place in Javascript, however, <a href=
@@ -43,16 +44,16 @@ $(document).ready(function() {
<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however,
DataTables' type detection and sorting methods can be instructed through the <a href=
"//datatables.net/reference/option/language.decimal"><code class="option" title=
"Initialisation option">language.decimal</code></a> option which character is used as the decimal place
in your numbers. This will be used to correctly adjust DataTables' type detection and sorting
algorithms to sort numbers in your table.</p>
"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>
<p>Any character can be passed in using the <a href=
"//datatables.net/reference/option/language.decimal"><code class="option" title=
"Initialisation option">language.decimal</code></a> option, although the decimal place character used
in a single table must be consistent (i.e. numbers with a dot decimal place and comma decimal place
cannot both appear in the same table). Different tables on the same page can use different decimal
characters if required.</p>
"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>
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the
final column.</p>
@@ -665,14 +666,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -690,8 +692,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -704,7 +706,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

20
examples/basic_init/complex_header.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Complex headers (rowspan and colspan)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -27,7 +28,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Complex headers (rowspan and colspan)</span></h1>
<h1>DataTables example <span>Complex headers (rowspan and colspan)</span></h1>
<div class="info">
<p>When using tables to display data, you will often wish to display column information in groups.
@@ -35,11 +36,11 @@ $(document).ready(function() {
assigning the required order listeners to the TH element suitable for that column.</p>
<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default
DataTables will use the bottom unique cell for the column to attach the irder listener, if more than
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=
"Initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top
cell if you prefer.</p>
"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>
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
</div>
@@ -651,14 +652,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -676,8 +678,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -690,7 +692,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

31
examples/basic_init/dom.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DOM positioning</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -29,25 +30,26 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- DOM positioning</span></h1>
<h1>DataTables example <span>DOM positioning</span></h1>
<div class="info">
<p>When customising DataTables for your own usage, you might find that the default position of the
feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes
inspiration from the CSS 3 Advanced Layout Module and provides the <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> initialisation parameter which can be set to indicate where you
which particular features to appear in the DOM. You can also specify <code>div</code> wrapping
containers (with an id and / or class) to provide complete layout flexibility.</p>
"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>
<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href=
"//datatables.net/reference/option/dom"><code class="option" title=
"Initialisation option">dom</code></a> option. For example the <code>l</code> option is used for the
<code>L</code>ength changing input option.</p>
"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>
<p>The built-in options available are:</p>
<ul>
<ul class="markdown">
<li><code>l</code> - <code>L</code>ength changing</li>
<li><code>f</code> - <code>F</code>iltering input</li>
<li><code>t</code> - The <code>T</code>able!</li>
@@ -103,8 +105,8 @@ $(document).ready(function() {
table for example).</p>
<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class=
"option" title="Initialisation option">dom</code></a> options can be added to DataTables through the
use of plug-ins.</p>
"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>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>
@@ -714,14 +716,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -739,8 +742,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -753,7 +756,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/basic_init/filter_only.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Feature enable / disable</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -31,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Feature enable / disable</span></h1>
<h1>DataTables example <span>Feature enable / disable</span></h1>
<div class="info">
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a
@@ -645,14 +646,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -670,8 +672,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -684,7 +686,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/basic_init/flexible_width.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Flexible table width</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -31,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Flexible table width</span></h1>
<h1>DataTables example <span>Flexible table width</span></h1>
<div class="info">
<p>Often you may want to have your table resize dynamically with the page. Typically this is done by
@@ -648,14 +649,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -673,8 +675,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -687,7 +689,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

16
examples/basic_init/hidden_columns.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Hidden columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,14 +40,14 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Hidden columns</span></h1>
<h1>DataTables example <span>Hidden columns</span></h1>
<div class="info">
<p>There are times when you might find it useful to display only a sub-set of the information that was
available in the original table. For example you might want to reduce the amount of data shown on
screen to make it clearer for the user. This is done through the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title=
"Initialisation option">columns.visible</code></a> column option.</p>
"DataTables initialisation option">columns.visible<span>DT</span></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
@@ -674,14 +675,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -699,8 +701,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -713,7 +715,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

3
examples/basic_init/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Basic initialisation</span></h1>
<h1>DataTables example <span>Basic initialisation</span></h1>
<div class="info">
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The

17
examples/basic_init/language.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -35,12 +36,13 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Language options</span></h1>
<h1>DataTables example <span>Language options</span></h1>
<div class="info">
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href=
"//datatables.net/reference/option/language"><code class="option" title=
"Initialisation option">language</code></a> object to the DataTable constructor.</p>
"DataTables initialisation option">language<span>DT</span></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>
@@ -655,14 +657,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -680,8 +683,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -694,7 +697,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

27
examples/basic_init/multi_col_sort.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multi-column ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,29 +40,30 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Multi-column ordering</span></h1>
<h1>DataTables example <span>Multi-column ordering</span></h1>
<div class="info">
<p>DataTables allows ordering by multiple columns at the same time, which can be activated in a number
of different ways:</p>
<ul>
<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=
"Initialisation option">columns.orderData</code></a> option.</li>
"DataTables initialisation option">columns.orderData<span>DT</span></code></a> option.</li>
<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option"
title="Initialisation option">columns.orderData</code></a> option to specify a multiple column
order by default (for example <code>[ [0,'asc'], [1,'asc'] ]</code>).</li>
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=
"API method">order()</code></a> API method.</li>
"DataTables API method">order()<span>DT</span></code></a> API method.</li>
</ul>
<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through
the <a href="//datatables.net/reference/option/orderMulti"><code class="option" title=
"Initialisation option">orderMulti</code></a> option.</p>
"DataTables initialisation option">orderMulti<span>DT</span></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
@@ -612,14 +614,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -637,8 +640,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -651,7 +654,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/basic_init/multiple_tables.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multiple tables</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -31,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Multiple tables</span></h1>
<h1>DataTables example <span>Multiple tables</span></h1>
<div class="info">
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done
@@ -366,14 +367,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -391,8 +393,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -405,7 +407,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

20
examples/basic_init/scroll_x.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - horizontal</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -35,15 +36,15 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - horizontal</span></h1>
<h1>DataTables example <span>Scroll - horizontal</span></h1>
<div class="info">
<p>DataTables has the ability to show tables with horizontal scrolling, which is very useful for when
you have a wide table, but want to constrain it to a limited horizontal display area. To enable
x-scrolling simply set the <a href="//datatables.net/reference/option/scrollX"><code class="option"
title="Initialisation option">scrollX</code></a> parameter to be whatever you want the container
wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the
container element).</p>
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>
<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
@@ -822,14 +823,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -847,8 +849,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -861,7 +863,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/basic_init/scroll_xy.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - horizontal and vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -36,7 +37,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - horizontal and vertical</span></h1>
<h1>DataTables example <span>Scroll - horizontal and vertical</span></h1>
<div class="info">
<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same
@@ -815,14 +816,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -840,8 +842,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -854,7 +856,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

28
examples/basic_init/scroll_y.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -31,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - vertical</span></h1>
<h1>DataTables example <span>Scroll - vertical</span></h1>
<div class="info">
<p>This example shows the DataTables table body scrolling in the vertical direction. This can generally
@@ -41,14 +42,16 @@ $(document).ready(function() {
<p>To enable y-scrolling simply set the <a href=
"//datatables.net/reference/option/scrollY"><code class="option" title=
"Initialisation option">scrollY</code></a> parameter to be whatever you want the container wrapper's
height to be (any CSS measurement is acceptable, or just a number which is treated as pixels).</p>
"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>
<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option"
title="Initialisation option">scrollCollapse</code></a> option is enabled in this example. This will
have the container match the height of the rows shown in the table if that height is smaller than that
given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
"Initialisation option">scrollY</code></a>.</p>
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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -657,14 +660,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -682,8 +686,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -696,7 +700,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

18
examples/basic_init/scroll_y_theme.html
View File

@@ -3,11 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - vertical with jQuery UI ThemeRoller</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.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">
@@ -33,7 +34,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Scroll - vertical with jQuery UI ThemeRoller</span></h1>
<h1>DataTables example <span>Scroll - vertical with jQuery UI ThemeRoller</span></h1>
<div class="info">
<p>This example is an extension of the vertical scrolling example, showing DataTables ability to be
@@ -570,7 +571,7 @@ $(document).ready(function() {
<li><a href=
"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
<li><a href=
"//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css">//cdn.datatables.net/plug-ins/505bef35b56/integration/jqueryui/dataTables.jqueryui.css</a></li>
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
</ul>
</div>
@@ -649,14 +650,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -674,8 +676,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -688,7 +690,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

55
examples/basic_init/state_save.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - State saving</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -17,8 +18,10 @@
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$('#example').dataTable( {
"stateSave": true
$(document).ready(function() {
$('#example').dataTable( {
stateSave: true
} );
} );
</script>
@@ -27,32 +30,33 @@ $('#example').dataTable( {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- State saving</span></h1>
<h1>DataTables example <span>State saving</span></h1>
<div class="info">
<p>DataTables has the option of being able to save the state of a table (its paging position, ordering
state etc) so that is can be restored when the user reloads a page, or comes back to the page after
visiting a sub-page. This state saving ability is enabled by the <a href=
"//datatables.net/reference/option/stateSave"><code class="option" title=
"Initialisation option">stateSave</code></a> option.</p>
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
<p>The built in state saving method uses the HTML5 <code>localStorage</code> API for efficient storage
of the data. Please note that this means that the built in state saving option <em>will not work with
IE6/7</em> as these browsers do not support this API. Alternative options of using cookies or saving
the state on the server through Ajax can be used through the <a href=
"//datatables.net/reference/option/stateSaveCallback"><code class="option" title=
"Initialisation option">stateSaveCallback</code></a> and <a href=
"//datatables.net/reference/option/stateLoadCallback"><code class="option" title=
"Initialisation option">stateLoadCallback</code></a> options.</p>
<p>The built in state saving method uses the HTML5 <code>localStorage</code> and
<code>sessionStorage</code> APIs for efficient storage of the data. Please note that this means that
the built in state saving option <strong>will not work with IE6/7</strong> as these browsers do not
support these APIs. Alternative options of using cookies or saving the state on the server through Ajax
can be used through the <a href="//datatables.net/reference/option/stateSaveCallback"><code class=
"option" title="DataTables initialisation option">stateSaveCallback<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>
<p>Additionally, note also that the duration for which the saved state is valid and can be used to
restore the table state can be set using the <a href=
"//datatables.net/reference/option/stateDuration"><code class="option" title=
"Initialisation option">stateDuration</code></a> initialisation parameter (2 hours by default).</p>
<p>The duration for which the saved state is valid and can be used to restore the table state can be
set using the <a href="//datatables.net/reference/option/stateDuration"><code class="option" title=
"DataTables initialisation option">stateDuration<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>
<p>The example below simply shows state saving enabled in DataTables with the <a href=
"//datatables.net/reference/option/stateSave"><code class="option" title=
"Initialisation option">stateSave</code></a> option.</p>
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -549,8 +553,10 @@ $('#example').dataTable( {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$('#example').dataTable( {
&quot;stateSave&quot;: true
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
stateSave: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
@@ -657,14 +663,15 @@ $('#example').dataTable( {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -682,8 +689,8 @@ $('#example').dataTable( {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -696,7 +703,7 @@ $('#example').dataTable( {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

31
examples/basic_init/table_sorting.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Default ordering (sorting)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -29,21 +30,22 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Default ordering (sorting)</span></h1>
<h1>DataTables example <span>Default ordering (sorting)</span></h1>
<div class="info">
<p>With DataTables you can alter the ordering characteristics of the table at initialisation time.
Using the <a href="//datatables.net/reference/option/order"><code class="option" title=
"Initialisation option">order</code></a> initialisation parameter, you can set the table to display the
data in exactly the order that you want.</p>
"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>
<p>The <a href="//datatables.net/reference/option/order"><code class="option" title=
"Initialisation option">order</code></a> parameter is an array of arrays where the first value of the
inner array is the column to order on, and the second is <code class="string" title=
"String">'asc'</code> (ascending ordering) or <code class="string" title="String">'desc'</code>
(descending ordering) as required. <a href="//datatables.net/reference/option/order"><code class=
"option" title="Initialisation option">order</code></a> is a 2D array to allow multi-column ordering to
be defined.</p>
"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 table below is ordered (descending) by the Age column.</p>
</div>
@@ -652,14 +654,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -677,8 +680,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -691,7 +694,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/basic_init/zero_configuration.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Zero configuration</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -29,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Zero configuration</span></h1>
<h1>DataTables example <span>Zero configuration</span></h1>
<div class="info">
<p>DataTables has most features enabled by default, so all you need to do to use it with your own
@@ -641,14 +642,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -666,8 +668,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -680,7 +682,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

27
examples/data_sources/ajax.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -31,25 +32,26 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ajax sourced data</span></h1>
<h1>DataTables example <span>Ajax sourced data</span></h1>
<div class="info">
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by
Ajax. This can be done, in its most simple form, by setting the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option to the address of the JSON data source.</p>
"DataTables initialisation option">ajax<span>DT</span></code></a> option to the address of the JSON
data source.</p>
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option also allows for more advanced configuration such as
altering how the Ajax request is made. See the <a href=
"DataTables 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=
"Initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a>
for further information.</p>
"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 example below shows DataTables loading data for a table from arrays as the data source (object
parameters can also be used through the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option ).</p>
"DataTables initialisation option">columns.data<span>DT</span></code></a> option ).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -199,14 +201,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -224,8 +227,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -238,7 +241,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/data_sources/dom.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML (DOM) sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -29,7 +30,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- HTML (DOM) sourced data</span></h1>
<h1>DataTables example <span>HTML (DOM) sourced data</span></h1>
<div class="info">
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table
@@ -645,14 +646,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -670,8 +672,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -684,7 +686,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

5
examples/data_sources/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,12 +16,12 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Data sources</span></h1>
<h1>DataTables example <span>Data sources</span></h1>
<div class="info">
<p>DataTables can obtain data from four different fundamental sources:</p>
<ul>
<ul class="markdown">
<li>HTML document (DOM)</li>
<li>Javascript (array / objects)</li>
<li>Ajax sourced data with client-side processing</li>

25
examples/data_sources/js_array.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Javascript sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -100,22 +101,23 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Javascript sourced data</span></h1>
<h1>DataTables example <span>Javascript sourced data</span></h1>
<div class="info">
<p>At times you will wish to be able to create a table from dynamic information passed directly to
DataTables, rather than having it read from the document. This is achieved using the <a href=
"//datatables.net/reference/option/data"><code class="option" title=
"Initialisation option">data</code></a> option in the initialisation object, passing in an array of
data to be used (like all other DataTables handled data, this can be arrays or objects using the
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option).</p>
"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>
<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>
</div>
<div id="demo">
<div id="demo"></div>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -309,14 +311,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -334,8 +337,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -348,7 +351,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

20
examples/data_sources/server_side.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Server-side processing</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -31,7 +32,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Server-side processing</span></h1>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
@@ -43,9 +44,9 @@ $(document).ready(function() {
<p>Server-side processing is enabled by setting the <a href=
"//datatables.net/reference/option/serverSide"><code class="option" title=
"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option.</p>
"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>
<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
@@ -201,14 +202,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -226,8 +228,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -240,7 +242,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

14
examples/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Examples index</span></h1>
<h1>DataTables example <span>Examples index</span></h1>
<div class="info">
<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands
@@ -85,14 +86,15 @@
<ul class="toc">
<li><a href="./styling/display.html">Base style</a></li>
<li><a href="./styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="./styling/row-border.html">Base style - row borders</a></li>
<li><a href="./styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="./styling/compact.html">Base style - compact</a></li>
<li><a href="./styling/hover.html">Base style - hover</a></li>
<li><a href="./styling/order-column.html">Base style - order-column</a></li>
<li><a href="./styling/row-border.html">Base style - row borders</a></li>
<li><a href="./styling/stripe.html">Base style - stripe</a></li>
<li><a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./styling/bootstrap.html">Bootstrap</a></li>
<li><a href="./styling/foundation.html">Foundation</a></li>
<li><a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -110,8 +112,8 @@
<h3><a href="./api/index.html">API</a></h3>
<ul class="toc">
<li><a href="./api/add_row.html">Add rows</a></li>
<li><a href="./api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./api/multi_filter_select.html">Individual column filtering (select
<li><a href="./api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="./api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="./api/row_details.html">Child rows (show extra / detailed
@@ -123,7 +125,7 @@
<li><a href="./api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="./api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="./api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - API plug-in methods</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -50,7 +51,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- API plug-in methods</span></h1>
<h1>DataTables example <span>API plug-in methods</span></h1>
<div class="info">
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add
@@ -63,7 +64,8 @@ $(document).ready(function() {
methods, this allows <code>sum()</code> to very easily give the sum for any selected column, and to
limit the sum to just the current page, filtered data or all pages. This is done using the options for
the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"API method">column()</code></a> method and the options for its selectors.</p>
"DataTables API method">column()<span>DT</span></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>
@@ -695,14 +697,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -720,8 +723,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -734,7 +737,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Live DOM ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -26,6 +27,14 @@ $.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
} );
}
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val() * 1;
} );
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
@@ -47,7 +56,7 @@ $(document).ready(function() {
$('#example').dataTable( {
"columns": [
null,
{ "orderDataType": "dom-text", "type": "numeric" },
{ "orderDataType": "dom-text-numeric" },
{ "orderDataType": "dom-text" },
{ "orderDataType": "dom-select" }
]
@@ -61,7 +70,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Live DOM ordering</span></h1>
<h1>DataTables example <span>Live DOM ordering</span></h1>
<div class="info">
<p>This example shows how you can use information available in the DOM to order columns. Typically
@@ -78,9 +87,10 @@ $(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="API method">order()</code></a> or
<a href="//datatables.net/reference/api/draw()"><code class="api" title="API method">draw()</code></a>
methods.</p>
"//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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -1648,6 +1658,14 @@ $.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
} );
}
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val() * 1;
} );
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
@@ -1669,7 +1687,7 @@ $(document).ready(function() {
$('#example').dataTable( {
&quot;columns&quot;: [
null,
{ &quot;orderDataType&quot;: &quot;dom-text&quot;, &quot;type&quot;: &quot;numeric&quot; },
{ &quot;orderDataType&quot;: &quot;dom-text-numeric&quot; },
{ &quot;orderDataType&quot;: &quot;dom-text&quot; },
{ &quot;orderDataType&quot;: &quot;dom-select&quot; }
]
@@ -1782,14 +1800,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -1807,8 +1826,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -1821,7 +1840,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Plug-ins</span></h1>
<h1>DataTables example <span>Plug-ins</span></h1>
<div class="info">
<p>While DataTables has a wide range of options and data type support built in, it can never cater for

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom filtering - range search</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -21,14 +22,14 @@
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = $('#min').val() * 1;
var max = $('#max').val() * 1;
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( min == '' && max == '' ) ||
( min == '' && age <= max ) ||
( min <= age && '' == max ) ||
( min <= age && age <= max ) )
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
@@ -52,7 +53,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom filtering - range search</span></h1>
<h1>DataTables example <span>Custom filtering - range search</span></h1>
<div class="info">
<p>There may be occasions when you wish to search data presented to the end user in your own manner,
@@ -573,14 +574,14 @@ $(document).ready(function() {
example:</p><code class="multiline brush: js;">/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = $('#min').val() * 1;
var max = $('#max').val() * 1;
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( min == '' &amp;&amp; max == '' ) ||
( min == '' &amp;&amp; age &lt;= max ) ||
( min &lt;= age &amp;&amp; '' == max ) ||
( min &lt;= age &amp;&amp; age &lt;= max ) )
if ( ( isNaN( min ) &amp;&amp; isNaN( max ) ) ||
( isNaN( min ) &amp;&amp; age &lt;= max ) ||
( min &lt;= age &amp;&amp; isNaN( max ) ) ||
( min &lt;= age &amp;&amp; age &lt;= max ) )
{
return true;
}
@@ -703,14 +704,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -728,8 +730,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -742,7 +744,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ordering plug-ins (with type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -20,12 +21,19 @@
$.fn.dataTable.ext.type.detect.unshift(
function ( d ) {
return /^[\-\d,]+$/.test( d ) ? 'numeric-comma' : null;
return d === 'Low' || d === 'Medium' || d === 'High' ?
'salary-grade' :
null;
}
);
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
@@ -40,7 +48,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ordering plug-ins (with type detection)</span></h1>
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
<div class="info">
<p>Although DataTables will automatically order data from a number of different data types using the
@@ -53,8 +61,7 @@ $(document).ready(function() {
about type detection and ordering plug-ins; creating them and their requirements, please refer to the
plug-in development documentation.</p>
<p>This example shows ordering with a comma for a decimal place, as is often used in parts of Europe
with automatic type detection.</p>
<p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
@@ -90,7 +97,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320.800,00</td>
<td>Low</td>
</tr>
<tr>
<td>Garrett Winters</td>
@@ -98,7 +105,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170.750,00</td>
<td>Low</td>
</tr>
<tr>
<td>Ashton Cox</td>
@@ -106,7 +113,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cedric Kelly</td>
@@ -114,7 +121,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433.060,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Airi Satou</td>
@@ -122,7 +129,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162.700,00</td>
<td>Low</td>
</tr>
<tr>
<td>Brielle Williamson</td>
@@ -130,7 +137,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372.000,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Herrod Chandler</td>
@@ -138,7 +145,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Rhona Davidson</td>
@@ -146,7 +153,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327.900,00</td>
<td>Low</td>
</tr>
<tr>
<td>Colleen Hurst</td>
@@ -154,7 +161,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sonya Frost</td>
@@ -162,7 +169,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jena Gaines</td>
@@ -170,7 +177,7 @@ $(document).ready(function() {
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90.560,00</td>
<td>Low</td>
</tr>
<tr>
<td>Quinn Flynn</td>
@@ -178,7 +185,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Charde Marshall</td>
@@ -186,7 +193,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470.600,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Haley Kennedy</td>
@@ -194,7 +201,7 @@ $(document).ready(function() {
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
@@ -202,7 +209,7 @@ $(document).ready(function() {
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Michael Silva</td>
@@ -210,7 +217,7 @@ $(document).ready(function() {
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Paul Byrd</td>
@@ -218,7 +225,7 @@ $(document).ready(function() {
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gloria Little</td>
@@ -226,7 +233,7 @@ $(document).ready(function() {
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bradley Greer</td>
@@ -234,7 +241,7 @@ $(document).ready(function() {
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Dai Rios</td>
@@ -242,7 +249,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
@@ -250,7 +257,7 @@ $(document).ready(function() {
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Yuri Berry</td>
@@ -258,7 +265,7 @@ $(document).ready(function() {
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Caesar Vance</td>
@@ -266,7 +273,7 @@ $(document).ready(function() {
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106.450,00</td>
<td>Low</td>
</tr>
<tr>
<td>Doris Wilder</td>
@@ -274,7 +281,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Angelica Ramos</td>
@@ -282,7 +289,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1.200.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gavin Joyce</td>
@@ -290,7 +297,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Chang</td>
@@ -298,7 +305,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357.650,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Brenden Wagner</td>
@@ -306,7 +313,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Fiona Green</td>
@@ -314,7 +321,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Shou Itou</td>
@@ -322,7 +329,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michelle House</td>
@@ -330,7 +337,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95.400,00</td>
<td>Low</td>
</tr>
<tr>
<td>Suki Burks</td>
@@ -338,7 +345,7 @@ $(document).ready(function() {
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
@@ -346,7 +353,7 @@ $(document).ready(function() {
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Gavin Cortez</td>
@@ -354,7 +361,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Martena Mccray</td>
@@ -362,7 +369,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324.050,00</td>
<td>Low</td>
</tr>
<tr>
<td>Unity Butler</td>
@@ -370,7 +377,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85.675,00</td>
<td>Low</td>
</tr>
<tr>
<td>Howard Hatfield</td>
@@ -378,7 +385,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hope Fuentes</td>
@@ -386,7 +393,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Vivian Harrell</td>
@@ -394,7 +401,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452.500,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Timothy Mooney</td>
@@ -402,7 +409,7 @@ $(document).ready(function() {
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136.200,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
@@ -410,7 +417,7 @@ $(document).ready(function() {
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Olivia Liang</td>
@@ -418,7 +425,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bruno Nash</td>
@@ -426,7 +433,7 @@ $(document).ready(function() {
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
@@ -434,7 +441,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Thor Walton</td>
@@ -442,7 +449,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98.540,00</td>
<td>Low</td>
</tr>
<tr>
<td>Finn Camacho</td>
@@ -450,7 +457,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Serge Baldwin</td>
@@ -458,7 +465,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zenaida Frank</td>
@@ -466,7 +473,7 @@ $(document).ready(function() {
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125.250,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zorita Serrano</td>
@@ -474,7 +481,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
@@ -482,7 +489,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75.650,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cara Stevens</td>
@@ -490,7 +497,7 @@ $(document).ready(function() {
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hermione Butler</td>
@@ -498,7 +505,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356.250,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Lael Greer</td>
@@ -506,7 +513,7 @@ $(document).ready(function() {
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jonas Alexander</td>
@@ -514,7 +521,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Shad Decker</td>
@@ -522,7 +529,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michael Bruce</td>
@@ -530,7 +537,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Donna Snider</td>
@@ -538,7 +545,7 @@ $(document).ready(function() {
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112.000,00</td>
<td>Low</td>
</tr>
</tbody>
</table>
@@ -556,12 +563,19 @@ $(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$.fn.dataTable.ext.type.detect.unshift(
function ( d ) {
return /^[\-\d,]+$/.test( d ) ? 'numeric-comma' : null;
return d === 'Low' || d === 'Medium' || d === 'High' ?
'salary-grade' :
null;
}
);
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
@@ -675,14 +689,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -700,8 +715,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -714,7 +729,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

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

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ordering plug-ins (no type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -18,15 +19,20 @@
<script type="text/javascript" language="javascript" class="init">
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [ {
"type": "numeric-comma",
"targets": 3
"type": "salary-grade",
"targets": -1
} ]
} );
} );
@@ -38,7 +44,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Ordering plug-ins (no type detection)</span></h1>
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
<div class="info">
<p>Although DataTables will order a number of data types using the built in methods, When dealing with
@@ -46,14 +52,13 @@ $(document).ready(function() {
ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class=
"option" title="Initialisation option">columns.type</code></a> parameter, in combination with a
ordering plug-in. The ordering plug-in can be be of any level of complexity (natural ordering for
example can be fairly complex while also very powerful), and is defined by attaching to the
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins;
"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 <code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins;
creating them and their requirements, please refer to the plug-in development documentation.</p>
<p>This example shows ordering with a comma for a decimal place, as is often used in parts of
Europe.</p>
<p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
@@ -89,7 +94,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320.800,00</td>
<td>Low</td>
</tr>
<tr>
<td>Garrett Winters</td>
@@ -97,7 +102,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170.750,00</td>
<td>Low</td>
</tr>
<tr>
<td>Ashton Cox</td>
@@ -105,7 +110,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cedric Kelly</td>
@@ -113,7 +118,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433.060,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Airi Satou</td>
@@ -121,7 +126,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162.700,00</td>
<td>Low</td>
</tr>
<tr>
<td>Brielle Williamson</td>
@@ -129,7 +134,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372.000,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Herrod Chandler</td>
@@ -137,7 +142,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Rhona Davidson</td>
@@ -145,7 +150,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327.900,00</td>
<td>Low</td>
</tr>
<tr>
<td>Colleen Hurst</td>
@@ -153,7 +158,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sonya Frost</td>
@@ -161,7 +166,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jena Gaines</td>
@@ -169,7 +174,7 @@ $(document).ready(function() {
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90.560,00</td>
<td>Low</td>
</tr>
<tr>
<td>Quinn Flynn</td>
@@ -177,7 +182,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Charde Marshall</td>
@@ -185,7 +190,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470.600,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Haley Kennedy</td>
@@ -193,7 +198,7 @@ $(document).ready(function() {
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
@@ -201,7 +206,7 @@ $(document).ready(function() {
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Michael Silva</td>
@@ -209,7 +214,7 @@ $(document).ready(function() {
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Paul Byrd</td>
@@ -217,7 +222,7 @@ $(document).ready(function() {
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gloria Little</td>
@@ -225,7 +230,7 @@ $(document).ready(function() {
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bradley Greer</td>
@@ -233,7 +238,7 @@ $(document).ready(function() {
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Dai Rios</td>
@@ -241,7 +246,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
@@ -249,7 +254,7 @@ $(document).ready(function() {
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Yuri Berry</td>
@@ -257,7 +262,7 @@ $(document).ready(function() {
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Caesar Vance</td>
@@ -265,7 +270,7 @@ $(document).ready(function() {
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106.450,00</td>
<td>Low</td>
</tr>
<tr>
<td>Doris Wilder</td>
@@ -273,7 +278,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Angelica Ramos</td>
@@ -281,7 +286,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1.200.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Gavin Joyce</td>
@@ -289,7 +294,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Chang</td>
@@ -297,7 +302,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357.650,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Brenden Wagner</td>
@@ -305,7 +310,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Fiona Green</td>
@@ -313,7 +318,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850.000,00</td>
<td>High</td>
</tr>
<tr>
<td>Shou Itou</td>
@@ -321,7 +326,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michelle House</td>
@@ -329,7 +334,7 @@ $(document).ready(function() {
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95.400,00</td>
<td>Low</td>
</tr>
<tr>
<td>Suki Burks</td>
@@ -337,7 +342,7 @@ $(document).ready(function() {
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
@@ -345,7 +350,7 @@ $(document).ready(function() {
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Gavin Cortez</td>
@@ -353,7 +358,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Martena Mccray</td>
@@ -361,7 +366,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324.050,00</td>
<td>Low</td>
</tr>
<tr>
<td>Unity Butler</td>
@@ -369,7 +374,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85.675,00</td>
<td>Low</td>
</tr>
<tr>
<td>Howard Hatfield</td>
@@ -377,7 +382,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hope Fuentes</td>
@@ -385,7 +390,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109.850,00</td>
<td>Low</td>
</tr>
<tr>
<td>Vivian Harrell</td>
@@ -393,7 +398,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452.500,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Timothy Mooney</td>
@@ -401,7 +406,7 @@ $(document).ready(function() {
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136.200,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
@@ -409,7 +414,7 @@ $(document).ready(function() {
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645.750,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Olivia Liang</td>
@@ -417,7 +422,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Bruno Nash</td>
@@ -425,7 +430,7 @@ $(document).ready(function() {
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
@@ -433,7 +438,7 @@ $(document).ready(function() {
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Thor Walton</td>
@@ -441,7 +446,7 @@ $(document).ready(function() {
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98.540,00</td>
<td>Low</td>
</tr>
<tr>
<td>Finn Camacho</td>
@@ -449,7 +454,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Serge Baldwin</td>
@@ -457,7 +462,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138.575,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zenaida Frank</td>
@@ -465,7 +470,7 @@ $(document).ready(function() {
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125.250,00</td>
<td>Low</td>
</tr>
<tr>
<td>Zorita Serrano</td>
@@ -473,7 +478,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
@@ -481,7 +486,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75.650,00</td>
<td>Low</td>
</tr>
<tr>
<td>Cara Stevens</td>
@@ -489,7 +494,7 @@ $(document).ready(function() {
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145.600,00</td>
<td>Low</td>
</tr>
<tr>
<td>Hermione Butler</td>
@@ -497,7 +502,7 @@ $(document).ready(function() {
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356.250,00</td>
<td>Medium</td>
</tr>
<tr>
<td>Lael Greer</td>
@@ -505,7 +510,7 @@ $(document).ready(function() {
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Jonas Alexander</td>
@@ -513,7 +518,7 @@ $(document).ready(function() {
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86.500,00</td>
<td>Low</td>
</tr>
<tr>
<td>Shad Decker</td>
@@ -521,7 +526,7 @@ $(document).ready(function() {
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Michael Bruce</td>
@@ -529,7 +534,7 @@ $(document).ready(function() {
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183.000,00</td>
<td>Low</td>
</tr>
<tr>
<td>Donna Snider</td>
@@ -537,7 +542,7 @@ $(document).ready(function() {
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112.000,00</td>
<td>Low</td>
</tr>
</tbody>
</table>
@@ -553,15 +558,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 brush: js;">$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
example:</p><code class="multiline brush: js;">$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
switch ( d ) {
case 'Low': return 1;
case 'Medium': return 2;
case 'High': return 3;
}
return 0;
};
$(document).ready(function() {
$('#example').dataTable( {
&quot;columnDefs&quot;: [ {
&quot;type&quot;: &quot;numeric-comma&quot;,
&quot;targets&quot;: 3
&quot;type&quot;: &quot;salary-grade&quot;,
&quot;targets&quot;: -1
} ]
} );
} );</code>
@@ -672,14 +682,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -697,8 +708,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -711,7 +722,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

64
examples/resources/demo.css
View File

@@ -21,7 +21,7 @@ body {
div.container {
width: 980px;
max-width: 980px;
margin: 0 auto;
}
@@ -30,10 +30,12 @@ h1 {
font-weight: 100;
letter-spacing: 1px;
font-size: 3em;
line-height: 1em;
}
h1 span {
font-size: 0.5em;
line-height: 1em;
}
a {
@@ -126,7 +128,7 @@ div.footer {
}
div.footer > div.liner {
width: 960px;
max-width: 960px;
margin: 0 auto;
}
@@ -184,6 +186,13 @@ code {
border-radius: 3px;
}
code > span {
border-left: 1px solid rgba( 0, 0, 0, 0.2 );
margin-left: 4px;
padding-left: 4px;
opacity: 0.5;
}
code.option {
color: #D14; /* red */
background-color: #fcf6f8;
@@ -196,7 +205,7 @@ code.path {
}
code.tag {
color: #cad119; /* yellow */
color: #a1a713; /* yellow */
background-color: #f7f8e6;
border: 1px solid #D6E9C6;
}
@@ -225,6 +234,12 @@ code.string {
border: 1px solid #f7e4c9;
}
code.field {
color: #ad1ee8; /* purple */
background-color: #f9f1fc;
border: 1px solid #ebc9f7;
}
code.multiline {
display: inline-block;
width: 95%;
@@ -232,6 +247,8 @@ code.multiline {
ul.tabs {
position: relative;
top: 1px;
height: 40px;
margin: 20px 20px 0 0;
}
@@ -240,7 +257,7 @@ ul.tabs {
ul.tabs li {
display: block;
float: left;
padding: 0 20px;
padding: 0 15px;
height: 40px;
font-size: 1.2em;
margin: 0 5px;
@@ -268,8 +285,12 @@ ul.tabs li.active:hover {
background-color: white;
}
div.tabs {
clear: both;
}
div.tabs>div {
padding: 0 20px;
padding: 0 15px;
border: 1px solid #ccc;
margin-top: 1px;
display: none;
@@ -287,3 +308,36 @@ div.column_half {
width: 49%;
padding-right: 1%;
}
@media only screen and (max-width : 979px) {
div.container,
div.footer {
padding: 0 1em;
}
}
@media
screen and (max-width : 767px),
screen and (max-width : 768px) and (orientation: portrait) {
div.info {
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
div.toc {
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
}
h1 span {
display: block;
}
}

2
examples/resources/demo.js
View File

@@ -12,7 +12,7 @@ $(document).ready( function () {
var info = $('div.info');
if ( info.height() < 115 ) {
info.css( 'height', '8em' );
info.css( 'min-height', '8em' );
}
var escapeHtml = function ( str ) {

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

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

76
examples/resources/syntax/shCore.js vendored
View File

@@ -768,6 +768,10 @@ function parseParams(str)
if ( a ) {
result['brush'] = a[1];
}
else if ( str && str.indexOf('multiline') !== -1 ) {
// Markdown code block without a language identifier
result['brush'] = 'text';
}
return result;
};
@@ -1985,4 +1989,76 @@ typeof(exports) != 'undefined' ? exports.SyntaxHighlighter = SyntaxHighlighter :
})();
;(function()
{
// CommonJS
SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
function Brush()
{
var funcs = 'abs avg case cast coalesce convert count current_timestamp ' +
'current_user day isnull left lower month nullif replace right ' +
'session_user space substring sum system_user upper user year';
var keywords = 'absolute action add after alter as asc at authorization begin bigint ' +
'binary bit by cascade char character check checkpoint close collate ' +
'column commit committed connect connection constraint contains continue ' +
'create cube current current_date current_time cursor database date ' +
'deallocate dec decimal declare default delete desc distinct double drop ' +
'dynamic else end end-exec escape except exec execute false fetch first ' +
'float for force foreign forward free from full function global goto grant ' +
'group grouping having hour ignore index inner insensitive insert instead ' +
'int integer intersect into is isolation key last level load local max min ' +
'minute modify move name national nchar next no numeric of off on only ' +
'open option order out output partial password precision prepare primary ' +
'prior privileges procedure public read real references relative repeatable ' +
'restrict return returns revoke rollback rollup rows rule schema scroll ' +
'second section select sequence serializable set size smallint static ' +
'statistics table temp temporary then time timestamp to top transaction ' +
'translation trigger true truncate uncommitted union unique update values ' +
'varchar varying view when where with work';
var operators = 'all and any between cross in join like not null or outer some';
this.regexList = [
{ regex: /--(.*)$/gm, css: 'comments' }, // one line comments
{ regex: /\/\*([^\*][\s\S]*?)?\*\//gm, css: 'comments' }, // multi line comments
{ regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
{ regex: SyntaxHighlighter.regexLib.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
{ regex: new RegExp(this.getKeywords(funcs), 'gmi'), css: 'color2' }, // functions
{ regex: new RegExp(this.getKeywords(operators), 'gmi'), css: 'color1' }, // operators and such
{ regex: new RegExp(this.getKeywords(keywords), 'gmi'), css: 'keyword' } // keyword
];
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['sql'];
SyntaxHighlighter.brushes.Sql = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();
;(function()
{
// CommonJS
SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
function Brush()
{
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['text', 'plain'];
SyntaxHighlighter.brushes.Plain = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();
SyntaxHighlighter.all();

20
examples/server_side/custom_vars.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom HTTP variables</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -38,16 +39,16 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Custom HTTP variables</span></h1>
<h1>DataTables example <span>Custom HTTP variables</span></h1>
<div class="info">
<p>It can often be useful to send extra information to the server when utilising DataTables'
server-side processing option. This is done by using the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option's <code>data</code> parameter which can be used in one
of two different ways:</p>
"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>
<ul>
<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>
<li><code>function</code> - A function which will manipulate the data object to send to the server,
@@ -215,14 +216,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -240,8 +242,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -254,7 +256,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

27
examples/server_side/defer_loading.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Deferred loading of data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -32,7 +33,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Deferred loading of data</span></h1>
<h1>DataTables example <span>Deferred loading of data</span></h1>
<div class="info">
<p>When using DataTables with server-side processing, the default behaviour is to have DataTables
@@ -43,15 +44,16 @@ $(document).ready(function() {
<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=
"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>
"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>
<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=
"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>
"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>
</div>"
<table id="example" class="display" cellspacing="0" width="100%">
@@ -285,14 +287,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -310,8 +313,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -324,7 +327,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

16
examples/server_side/ids.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Automatic addition of row ID attributes</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Automatic addition of row ID attributes</span></h1>
<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
<div class="info">
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on
@@ -50,7 +51,7 @@ $(document).ready(function() {
<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>
<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>
@@ -219,14 +220,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -244,8 +246,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -258,7 +260,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

9
examples/server_side/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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>
@@ -15,7 +16,7 @@
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Server-side processing</span></h1>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
@@ -27,9 +28,9 @@
<p>Server-side processing is enabled by setting the <a href=
"//datatables.net/reference/option/serverSide"><code class="option" title=
"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
source through the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option.</p>
"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>
<p>The examples in this section shows server-side processing in use and how it can be customised to
suit your needs.</p>

29
examples/server_side/jsonp.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - JSONP data source for remote domains</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -34,7 +35,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- JSONP data source for remote domains</span></h1>
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
<div class="info">
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of
@@ -42,18 +43,19 @@ $(document).ready(function() {
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="Initialisation option">ajax</code></a> initialisation option.</p>
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation
option.</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option"
title="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=
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=
"Initialisation option">ajax</code></a> option).</p>
"DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"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>
"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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -208,14 +210,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -233,8 +236,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -247,7 +250,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

17
examples/server_side/object_data.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Object data source</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -39,7 +40,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Object data source</span></h1>
<h1>DataTables example <span>Object data source</span></h1>
<div class="info">
<p>The default data format that DataTables expects for server-side processing is a 2D array of data
@@ -51,7 +52,8 @@ $(document).ready(function() {
<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=
"Initialisation option">columns.data</code></a> property given for each column.</p>
"DataTables initialisation option">columns.data<span>DT</span></code></a> property given for each
column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -211,14 +213,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -236,8 +239,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -250,7 +253,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

105
examples/server_side/pipeline.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Pipelining data to reduce Ajax calls for paging</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -24,8 +25,11 @@
$.fn.dataTable.pipeline = function ( opts ) {
// Configuration options
var conf = $.extend( {
pages: 5, // number of pages to cache
url: '' // script url
pages: 5, // number of pages to cache
url: '', // script url
data: null, // function or object with parameters to send to the server
// matching how `ajax.data` works in DataTables
method: 'GET' // Ajax HTTP method
}, opts );
// Private variables for storing the cache
@@ -37,10 +41,16 @@ $.fn.dataTable.pipeline = function ( opts ) {
return function ( request, drawCallback, settings ) {
var ajax = false;
var requestStart = request.start;
var drawStart = request.start;
var requestLength = request.length;
var requestEnd = requestStart + requestLength;
if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {
if ( settings.clearCache ) {
// API requested that the cache be cleared
ajax = true;
settings.clearCache = false;
}
else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {
// outside cached data - need to make a request
ajax = true;
}
@@ -71,7 +81,23 @@ $.fn.dataTable.pipeline = function ( opts ) {
request.start = requestStart;
request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables.
if ( $.isFunction ( conf.data ) ) {
// As a function it is executed with the data object as an arg
// for manipulation. If an object is returned, it is used as the
// data object to submit
var d = conf.data( request );
if ( d ) {
$.extend( request, d );
}
}
else if ( $.isPlainObject( conf.data ) ) {
// As an object, the data given extends the default
$.extend( request, conf.data );
}
settings.jqXHR = $.ajax( {
"type": conf.method,
"url": conf.url,
"data": request,
"dataType": "json",
@@ -79,8 +105,8 @@ $.fn.dataTable.pipeline = function ( opts ) {
"success": function ( json ) {
cacheLastJson = $.extend(true, {}, json);
if ( cacheLower != requestStart ) {
json.data.splice( 0, requestStart-cacheLower );
if ( cacheLower != drawStart ) {
json.data.splice( 0, drawStart-cacheLower );
}
json.data.splice( requestLength, json.data.length );
@@ -99,6 +125,14 @@ $.fn.dataTable.pipeline = function ( opts ) {
}
};
// Register an API method that will empty the pipelined data, forcing an Ajax
// fetch on the next draw (i.e. `table.clearPipeline().draw()`)
$.fn.dataTable.Api.register( 'clearPipeline()', function () {
return this.iterator( 'table', function ( settings ) {
settings.clearCache = true;
} );
} );
//
// DataTables initialisation
@@ -121,7 +155,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Pipelining data to reduce Ajax calls for paging</span></h1>
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
<div class="info">
<p>Sever-side processing can be quite hard on your server, since it makes an Ajax call to the server
@@ -133,8 +167,9 @@ $(document).ready(function() {
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=
"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>
"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>
<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,
@@ -182,8 +217,11 @@ $(document).ready(function() {
$.fn.dataTable.pipeline = function ( opts ) {
// Configuration options
var conf = $.extend( {
pages: 5, // number of pages to cache
url: '' // script url
pages: 5, // number of pages to cache
url: '', // script url
data: null, // function or object with parameters to send to the server
// matching how `ajax.data` works in DataTables
method: 'GET' // Ajax HTTP method
}, opts );
// Private variables for storing the cache
@@ -195,10 +233,16 @@ $.fn.dataTable.pipeline = function ( opts ) {
return function ( request, drawCallback, settings ) {
var ajax = false;
var requestStart = request.start;
var drawStart = request.start;
var requestLength = request.length;
var requestEnd = requestStart + requestLength;
if ( cacheLower &lt; 0 || requestStart &lt; cacheLower || requestEnd &gt; cacheUpper ) {
if ( settings.clearCache ) {
// API requested that the cache be cleared
ajax = true;
settings.clearCache = false;
}
else if ( cacheLower &lt; 0 || requestStart &lt; cacheLower || requestEnd &gt; cacheUpper ) {
// outside cached data - need to make a request
ajax = true;
}
@@ -229,7 +273,23 @@ $.fn.dataTable.pipeline = function ( opts ) {
request.start = requestStart;
request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables.
if ( $.isFunction ( conf.data ) ) {
// As a function it is executed with the data object as an arg
// for manipulation. If an object is returned, it is used as the
// data object to submit
var d = conf.data( request );
if ( d ) {
$.extend( request, d );
}
}
else if ( $.isPlainObject( conf.data ) ) {
// As an object, the data given extends the default
$.extend( request, conf.data );
}
settings.jqXHR = $.ajax( {
&quot;type&quot;: conf.method,
&quot;url&quot;: conf.url,
&quot;data&quot;: request,
&quot;dataType&quot;: &quot;json&quot;,
@@ -237,8 +297,8 @@ $.fn.dataTable.pipeline = function ( opts ) {
&quot;success&quot;: function ( json ) {
cacheLastJson = $.extend(true, {}, json);
if ( cacheLower != requestStart ) {
json.data.splice( 0, requestStart-cacheLower );
if ( cacheLower != drawStart ) {
json.data.splice( 0, drawStart-cacheLower );
}
json.data.splice( requestLength, json.data.length );
@@ -257,6 +317,14 @@ $.fn.dataTable.pipeline = function ( opts ) {
}
};
// Register an API method that will empty the pipelined data, forcing an Ajax
// fetch on the next draw (i.e. `table.clearPipeline().draw()`)
$.fn.dataTable.Api.register( 'clearPipeline()', function () {
return this.iterator( 'table', function ( settings ) {
settings.clearCache = true;
} );
} );
//
// DataTables initialisation
@@ -378,14 +446,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -403,8 +472,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -417,7 +486,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

29
examples/server_side/post.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - POST data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -43,24 +44,25 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- POST data</span></h1>
<h1>DataTables example <span>POST data</span></h1>
<div class="info">
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP
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="Initialisation option">ajax</code></a> initialisation option.</p>
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation
option.</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option"
title="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=
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=
"Initialisation option">ajax</code></a> option).</p>
"DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"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>
"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>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@@ -223,14 +225,15 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -248,8 +251,8 @@ $(document).ready(function() {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -262,7 +265,7 @@ $(document).ready(function() {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

38
examples/server_side/row_details.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row details</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
@@ -56,7 +57,7 @@ $(document).ready(function() {
var detailRows = [];
$('#example tbody').on( 'click', 'tr td:first-child', function () {
var tr = $(this).parents('tr');
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
@@ -92,7 +93,7 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Row details</span></h1>
<h1>DataTables example <span>Row details</span></h1>
<div class="info">
<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to
@@ -103,19 +104,19 @@ $(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=
"Initialisation option">columns.data</code></a> and <a href=
"DataTables initialisation option">columns.data<span>DT</span></code></a> and <a href=
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"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>
"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>
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
"api" title="API method">row().child</code></a> methods to firstly check if a row is already displayed,
and if so hide it, if not show it. 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. 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>
"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>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. 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
@@ -187,7 +188,7 @@ $(document).ready(function() {
var detailRows = [];
$('#example tbody').on( 'click', 'tr td:first-child', function () {
var tr = $(this).parents('tr');
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
@@ -329,14 +330,15 @@ tr.details td.details-control {
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
@@ -354,8 +356,8 @@ tr.details td.details-control {
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
@@ -368,7 +370,7 @@ tr.details td.details-control {
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>

2
examples/server_side/scripts/ids-arrays.php
View File

@@ -19,7 +19,7 @@
*/
// DB table to use
$table = 'datatables-demo';
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';

2
examples/server_side/scripts/ids-objects.php
View File

@@ -19,7 +19,7 @@
*/
// DB table to use
$table = 'datatables-demo';
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';

2
examples/server_side/scripts/jsonp.php
View File

@@ -19,7 +19,7 @@
*/
// DB table to use
$table = 'datatables-demo';
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';

33
examples/server_side/scripts/data.sql → examples/server_side/scripts/mysql.sql
View File

@@ -1,23 +1,24 @@
# DataTables server-side processing example database structure and dataTables
--
-- DataTables Ajax and server-side processing database (MySQL)
--
DROP TABLE IF EXISTS `datatables-demo`;
DROP TABLE IF EXISTS `datatables_demo`;
CREATE TABLE `datatables-demo` (
`id` int(10) NOT NULL auto_increment,
`first_name` varchar(250) NOT NULL default '',
`last_name` varchar(250) NOT NULL default '',
`position` varchar(250) NOT NULL default '',
`email` varchar(250) NOT NULL default '',
`office` varchar(250) NOT NULL default '',
`start_date` timestamp DEFAULT CURRENT_TIMESTAMP,
`age` int(8),
`salary` int(8),
`extn` int(8),
PRIMARY KEY (`id`)
CREATE TABLE `datatables_demo` (
`id` int(10) NOT NULL auto_increment,
`first_name` varchar(250) NOT NULL default '',
`last_name` varchar(250) NOT NULL default '',
`position` varchar(250) NOT NULL default '',
`email` varchar(250) NOT NULL default '',
`office` varchar(250) NOT NULL default '',
`start_date` timestamp DEFAULT CURRENT_TIMESTAMP,
`age` int(8),
`salary` int(8),
`extn` int(8),
PRIMARY KEY (`id`)
);
INSERT
INTO `datatables-demo`
INSERT INTO `datatables_demo`
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
VALUES
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh' ),

2
examples/server_side/scripts/objects.php
View File

@@ -5,7 +5,7 @@
*/
// DB table to use
$table = 'datatables-demo';
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';

2
examples/server_side/scripts/post.php
View File

@@ -19,7 +19,7 @@
*/
// DB table to use
$table = 'datatables-demo';
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';

79
examples/server_side/scripts/postgres.sql Normal file
View File

@@ -0,0 +1,79 @@
--
-- DataTables Ajax and server-side processing database (Postgres)
--
DROP TABLE IF EXISTS datatables_demo;
CREATE TABLE datatables_demo (
id serial,
first_name text NOT NULL default '',
last_name text NOT NULL default '',
position text NOT NULL default '',
email text NOT NULL default '',
office text NOT NULL default '',
start_date timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
age integer,
salary integer,
extn integer,
PRIMARY KEY (id)
);
INSERT INTO datatables_demo
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
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' );

2
examples/server_side/scripts/server_processing.php
View File

@@ -19,7 +19,7 @@
*/
// DB table to use
$table = 'datatables-demo';
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';

78
examples/server_side/scripts/sqlite.sql Normal file
View File

@@ -0,0 +1,78 @@
--
-- DataTables Ajax and server-side processing database (SQLite)
--
DROP TABLE IF EXISTS datatables_demo;
CREATE TABLE datatables_demo (
id integer primary key,
first_name text NOT NULL default '',
last_name text NOT NULL default '',
position text NOT NULL default '',
email text NOT NULL default '',
office text NOT NULL default '',
start_date timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
age integer,
salary integer,
extn integer
);
INSERT INTO datatables_demo
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
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' );

80
examples/server_side/scripts/sqlserver.sql Normal file
View File

@@ -0,0 +1,80 @@
--
-- DataTables Ajax and server-side processing database (SQL Server)
--
IF OBJECT_ID('dbo.datatables_demo', 'U') IS NOT NULL
DROP TABLE dbo.datatables_demo;
CREATE TABLE datatables_demo (
id int NOT NULL identity,
first_name varchar(250) NOT NULL default '',
last_name varchar(250) NOT NULL default '',
position varchar(250) NOT NULL default '',
email varchar(250) NOT NULL default '',
office varchar(250) NOT NULL default '',
start_date datetime DEFAULT GETDATE(),
age int,
salary int,
extn int,
PRIMARY KEY (id)
);
INSERT INTO datatables_demo
( id, first_name, last_name, age, position, salary, start_date, extn, email, office )
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' );

34
examples/server_side/scripts/ssp.class.php
View File

@@ -93,7 +93,7 @@ class SSP {
if ( isset($request['order']) && count($request['order']) ) {
$orderBy = array();
$dtColumns = SSP::pluck( $columns, 'dt' );
$dtColumns = self::pluck( $columns, 'dt' );
for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i++ ) {
// Convert the column index into the column data property
@@ -138,7 +138,7 @@ class SSP {
{
$globalSearch = array();
$columnSearch = array();
$dtColumns = SSP::pluck( $columns, 'dt' );
$dtColumns = self::pluck( $columns, 'dt' );
if ( isset($request['search']) && $request['search']['value'] != '' ) {
$str = $request['search']['value'];
@@ -149,7 +149,7 @@ class SSP {
$column = $columns[ $columnIdx ];
if ( $requestColumn['searchable'] == 'true' ) {
$binding = SSP::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$globalSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
@@ -165,7 +165,7 @@ class SSP {
if ( $requestColumn['searchable'] == 'true' &&
$str != '' ) {
$binding = SSP::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$columnSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
@@ -179,8 +179,8 @@ class SSP {
if ( count( $columnSearch ) ) {
$where = $where === '' ?
implode(' AND ', $globalSearch) :
$where .' AND '. implode(' AND ', $globalSearch);
implode(' AND ', $columnSearch) :
$where .' AND '. implode(' AND ', $columnSearch);
}
if ( $where !== '' ) {
@@ -208,16 +208,16 @@ class SSP {
static function simple ( $request, $sql_details, $table, $primaryKey, $columns )
{
$bindings = array();
$db = SSP::sql_connect( $sql_details );
$db = self::sql_connect( $sql_details );
// Build the SQL query string from the request
$limit = SSP::limit( $request, $columns );
$order = SSP::order( $request, $columns );
$where = SSP::filter( $request, $columns, $bindings );
$limit = self::limit( $request, $columns );
$order = self::order( $request, $columns );
$where = self::filter( $request, $columns, $bindings );
// Main query to actually get the data
$data = SSP::sql_exec( $db, $bindings,
"SELECT SQL_CALC_FOUND_ROWS `".implode("`, `", SSP::pluck($columns, 'db'))."`
$data = self::sql_exec( $db, $bindings,
"SELECT SQL_CALC_FOUND_ROWS `".implode("`, `", self::pluck($columns, 'db'))."`
FROM `$table`
$where
$order
@@ -225,13 +225,13 @@ class SSP {
);
// Data set length after filtering
$resFilterLength = SSP::sql_exec( $db,
$resFilterLength = self::sql_exec( $db,
"SELECT FOUND_ROWS()"
);
$recordsFiltered = $resFilterLength[0][0];
// Total data set length
$resTotalLength = SSP::sql_exec( $db,
$resTotalLength = self::sql_exec( $db,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`"
);
@@ -245,7 +245,7 @@ class SSP {
"draw" => intval( $request['draw'] ),
"recordsTotal" => intval( $recordsTotal ),
"recordsFiltered" => intval( $recordsFiltered ),
"data" => SSP::data_output( $columns, $data )
"data" => self::data_output( $columns, $data )
);
}
@@ -272,7 +272,7 @@ class SSP {
);
}
catch (PDOException $e) {
SSP::fatal(
self::fatal(
"An error occurred while connecting to the database. ".
"The error reported by the server was: ".$e->getMessage()
);
@@ -315,7 +315,7 @@ class SSP {
$stmt->execute();
}
catch (PDOException $e) {
SSP::fatal( "An SQL error occurred: ".$e->getMessage() );
self::fatal( "An SQL error occurred: ".$e->getMessage() );
}
// Return all

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