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

Compare commits

base: github:1.9.3
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

747 Commits
1.9.3 ... 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
Allan Jardine
2a83b65a33 New example: Comma decimal place 2014-02-17 10:22:48 +00:00
Allan Jardine
028a56051d DataTables 1.10.0-beta.2 2014-02-17 10:19:24 +00:00
Allan Jardine
9542dfaa7f Fix: Documentation typos from Colin Marks 2014-02-17 10:19:08 +00:00
Allan Jardine
6968422b42 Fix: Ajax callback function wasn't being called when server-side 
processing was enabled (ajax.reload() and ajax.url().load())
 2014-02-17 10:18:54 +00:00
Allan Jardine
c12b50daef Fix: A single space was being added to all cell classes on 
initialisation
 2014-02-17 10:18:42 +00:00
Allan Jardine
b36439b6b7 Fix: The externally exposed internal API methods were only exposed once 
a DataTable had been intiailised.
 2014-02-14 16:03:21 +00:00
Allan Jardine
9434d93956 Fix: Default cursor on paging disabled buttons 
- This fixes DataTables/DataTables #272
 2014-02-14 16:03:08 +00:00
Allan Jardine
8cb5163156 Update: Examples - use the files form the CDN for the integration 
examples
 2014-02-14 16:02:29 +00:00
Allan Jardine
1c9a1b94fd Dev: Editor integration with 1.10 example tables 2014-02-14 16:02:05 +00:00
Allan Jardine
0f49d95f99 Dev: Update demo css and js for Editor 1.10 integration 2014-02-14 16:01:51 +00:00
Allan Jardine
7f9f954d99 New: eq() API method to reduce an API instance to just a single context 
and result set for the plural methods.

Fix: Row details events were itterating over non-DataTables rows
creating a Javascript error

Fix: Example - Server-side processing row details example updated to be
able to restore the details row on a redraw.

Update: Documentation - Most examples which used `flatten()` are more
correct to use the new `eq()` method, so they have been updated.

- This set of changes is based on the discussion in thread 19377. While
  working on the fix, I realised that the use of flatten() is too broad,
  so the new `eq()` function is introduced. It is similar to the jQuery
  eq() method in that it reduces the instance to just the selected
  index, although in DataTables this is both the context and the result
  set. Its a small addition, but I think it will provide to be very
  useful
 2014-02-11 11:04:50 +00:00
Allan Jardine
71849cc321 Site: Typo fixes from tangerine 2014-02-11 11:04:08 +00:00
Allan Jardine
afdf67075d New: language.decimal option. This option can be used to tell 
DataTables which character is used as a decimal place in the table's
data, so that number which are formatted using characters other than a
dot as the decimal place can be correctly detected and sorted.

- A large part of the world uses the comma as a decimal place, so it
  makes sense to have this option built-in directly to DataTables,
  rather than needing to use plu-in sorting types as before:
  http://en.wikipedia.org/wiki/Decimal_mark

- However, the decimal place character cannot be detected automatically
  since there are far to many ambiguities. As such, a new
  `language.decimal` option is defined which is passed through to the
  type detection functions. The type detection functions can then use
  that character to alter their detection functions to transform numbers
  into the dot formatted equivilent for parsing in Javascript.

- The numeric sorting methods have been bundled together in the function
  `_addNumericSort` which is called when a character is given for the
  decimal mark, adding the sorting functions required specifically for
  that mark. This means that any character at all can be added, while
  keeping the table's sort performance as it was.

- Code size in increased a little for this new feature, but a lot of
  work has been done to keep it to a minimum (while still optimising for
  the most common use case of a dot decimal place), and this is a good
  feature to have in DataTables' core code.

- All required documentation added and updated.

- Special thanks to Tobias Bäthge for suggesting and sponsoring this
  feature.
 2014-02-10 17:07:22 +00:00
Allan Jardine
d0c1c56e53 Fix: Example for range filtering was attaching to the wrong parameter - 
should be `$.fn.dataTable.ext.search`
 2014-02-10 17:06:57 +00:00
Allan Jardine
b007bbff00 New: Add thin space and narrow no-break space as supported thounsands 
separators for formatted numbers
 2014-02-10 17:06:41 +00:00
Allan Jardine
2665e8459d Dev: require() bash function now in the include file 2014-02-10 17:05:48 +00:00
Allan Jardine
6c3337e300 Site: DataTables 1.10.0-beta.1 blog post 2014-02-10 17:05:35 +00:00
Allan Jardine
87e0d43844 Fix: Column visiblity was using $().remove() to remove elements from the 
DOM which results in any events attached being detached by jQuery. Need
to use `detach()`

- Thanks to sebgoe in thread 19360
 2014-02-05 14:02:23 +00:00
Allan Jardine
b29fa07501 Fix: Possible column misalignment when scrolling is enabled 
- This is caused due to different content in the displayed header and
  the size forcing header in the body scrolling table. The browsers can
  lay the two tables out differently even although the widths applied
  are identical, due to the different content.

- The fix is to keep the content in the scroll body header, but hide it
  by wrapping in a div which has height 0 and overflow hidden

- See thread 19311 for more information
 2014-02-05 10:32:33 +00:00
Allan Jardine
2c4cc4fd1b New: Built in filtering will throttle calls to the server when using 
server-side processing

- A popular plug-in for DataTables is the `fnSetFilteringDelay` plug-in,
  which provides a bit of a buffer when typing into the filter input so
  you don't make an Ajax request for every key stroke - i.e. don't DDoS
  your own server!

- Since we have _fnThrottle built in now for the scrolling, we can also
  use it to provide this buffering functionality for server-side
  processing filtering in the core. A couple of small changes for
  _fnThrottle were required to get the callback context correct and ot
  call it not immediately, but only after the delay
 2014-02-05 10:32:21 +00:00
Allan Jardine
83f30cec8f Dev: Moving on to 1.10.0-beta.2.dev 2014-02-05 10:32:09 +00:00
Allan Jardine
36f2c2a7d6 Update: Readme for 1.10.0-beta.1 release 2014-02-04 11:06:14 +00:00
Allan Jardine
481dbc4e1f Update: Readme with the beta release url 2014-02-04 10:55:30 +00:00
Allan Jardine
b41927de61 Examples: Add latest example files from the src repo 2014-02-04 10:54:36 +00:00
Allan Jardine
7cea7a64b4 DataTables 1.10.0-beta.1 2014-02-04 10:44:37 +00:00
Allan Jardine
635f35a63b Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-02-04 10:44:23 +00:00
Allan Jardine
88c7044373 Site: Fix links 2014-02-04 10:44:10 +00:00
Allan Jardine
2d7517808a Dev fix: Fix error on example index pages 2014-02-04 10:43:44 +00:00
Allan Jardine
b670b5956b Update: jQuery 1.11.0 
- Include jQuery in the repo build
 2014-02-04 10:43:31 +00:00
Allan Jardine
eda09a9087 Dev fix: IE7 is throwing an error when using $().removeAttr() and 
$().attr() for the aria sorting information
 2014-02-04 10:43:17 +00:00
Allan Jardine
63cfae90a2 Site: Fix markdown cite option interfearing with HTMl 2014-02-04 10:43:06 +00:00
Allan Jardine
d65130ec4f Dev fix: row().node() should return null or the row element 
- It wasn't with the registerPural API method because the function was
  returning undefined, which tells the wrapper to use the Api instance
 2014-02-03 14:08:24 +00:00
Allan Jardine
2d3c29a9d5 New: Add no-footer class to the wrapper element when the table has no 
footer

Update: Update CSS to display the table border properly when there is no
footer when scrolling

Dev: Update the _fnAddOptionsHtml function to be smaller in code size.
Identical functionality, just smaller code
 2014-01-31 14:15:51 +00:00
Allan Jardine
9486f3ea02 Update: CSS - remove margin at the bottom ofhte table - it was causing 
problems with the extensions which clone the table node. Rather the
margin is applied to the controls at the bottom of the table.
 2014-01-31 13:27:55 +00:00
Allan Jardine
5449eaebf3 Dev: Demo JS can now run with DataTables 1.9 2014-01-31 13:27:42 +00:00
Allan Jardine
d50902791c Update: Bower - naming consistency with the extensions - datatables 2014-01-31 13:27:27 +00:00
Allan Jardine
095d83e8c3 Dev fix: When x-scrolling, column widths were being overridden by the 
fact that the table width attribute has been removed, but was being
applied to the table anyway, as 0px - causing the table to be as narrow
as possible. On the plus size, the columns kept their alignment with
such a misconfiguration! However, now the `width` option for columns is
correctly applied in x-scrolling tables.
 2014-01-31 13:26:34 +00:00
Allan Jardine
fd261b1dd7 Site: Fix 404 errors 2014-01-31 13:26:22 +00:00
Allan Jardine
61e23fb2fb Blog: 2014-01-24 - JS Bin updates 2014-01-31 13:25:55 +00:00
Allan Jardine
cea15987d3 Dev fix: Set the legacy.ajax option to null by default so you can tell 
DataTables to specifially send the SSP params in the old or new format
 2014-01-31 13:25:30 +00:00
Allan Jardine
1033d785e3 ColVis: Add required information for ColVis 2014-01-31 13:25:04 +00:00
Allan Jardine
3eeb09a06d Dev fix: Add ai to the list of Hungarian comapt options 2014-01-31 13:24:50 +00:00
Allan Jardine
ee4ee545d1 Dev fix: The table() method was truncating the exisiting object, it 
should have been operating on a new object
 2014-01-31 13:24:27 +00:00
Allan Jardine
e57b905431 Dev fix: Don't throw an error if passing in falsy information for the 
settings object getter
 2014-01-31 13:24:07 +00:00
Allan Jardine
47c82c52a7 New: Expose $.fn.dataTable.camelToHungarian as a static function which 
can be used by plug-ins
 2014-01-31 13:23:52 +00:00
Allan Jardine
e83eacff6d Dev: Update the column objects to store an index of the column so we 
don't need to look it up with inArray. Also the header renderer does not
pass in the column index now (the column.idx property can be used). This
is to allow operations such as ColReorder to reorder teh columns and
still have the renderers update correctly
 2014-01-31 13:23:35 +00:00
Allan Jardine
0e974f27e6 Dev: Add the ability to get a settings object from an API instance 2014-01-31 13:22:42 +00:00
Allan Jardine
d4bbef72ba New: AMD support - return the $.fn.dataTable object from the factory 
function
 2014-01-22 10:14:07 +00:00
Allan Jardine
ac0e965c09 Dev: Tidy up SSP scripts so the db include for test env. is done only 
once
 2014-01-21 08:20:03 +00:00
Allan Jardine
9a462a5fe4 Dev fix: Child row appending was broken due to need to use .dt namespace 2014-01-21 08:19:39 +00:00
Allan Jardine
8f630f46ed Examples: Use Raleway thin font when Helvetical Neue Ultra Light isn't 
available for the h1 example header

- Raleway thin is an open source font from
  https://www.theleagueofmoveabletype.com
 2014-01-21 08:19:17 +00:00
Allan Jardine
246eb55849 Site: Updates based on feedback from tangerine 2014-01-17 16:45:14 +00:00
Allan Jardine
5267910596 Update: Modify the jQuery requires header to be 1.7 since we use 
$().on()
 2014-01-17 16:44:53 +00:00
Allan Jardine
3e242a4b26 Dev: Trivial typo 2014-01-17 16:44:39 +00:00
Allan Jardine
df95820f84 Dev fix: Remove jQuery alias that was added in e6c076f. 
- The correct way to use a different alias is changing the jQuery
  instance used in the factory builder
 2014-01-17 08:51:06 +00:00
Allan Jardine
30f3abee21 Dev: Use jQuery to set the colspan / rowspan attributes 
- This makes DT compatible with jscript
 2014-01-17 08:50:53 +00:00
Allan Jardine
a854421f27 Dev fix: Correct error in aliasing the new ext.search to the old 
afnFiltering interface
 2014-01-16 11:30:51 +00:00
Allan Jardine
6fbd3ba8e6 New: Add the ability to read size information from HTML elements for columns 
- Column width is always a particularly difficult one to get quite
  right. In this case, the fix is to have DataTables read column width
  information from the `width` or `style` attributes of a column header
  cell, if that information is present. If it is, it is treated as
  sWidth is (although user supplied sWidth can override). That is it say
  that it will be applied to the column width calculation table.

- The remaining gap is if a developer assigns a width using css classes.
  We can't get that information, so we fall into the old problem.

- This change comes about from the discussion in
  http://datatables.net/forums/discussion/19089 and the fiddle here:
  http://jsfiddle.net/EysLd/1/

- What is happening in the test case is that the calculation table is
  being created, but it is then stripped of widths due to this commit:
  https://github.com/DataTables/DataTables/commit/6a9e324 . That was to
  allow DataTables column headers to have their applied size removed, so
  a new size could be calculated. Only sWidth would override that - now
  the width and style attributes will as well
 2014-01-15 16:19:03 +00:00
Allan Jardine
c76bdb3294 Update readme links 2014-01-15 12:06:27 +00:00
Allan Jardine
fe7d64e0ef Dev: API fixes for IE8- 
- IE8- requires that Function.prototype.apply be used with an array or
  arguments object as the second parameter - it being "array-like" isn't
  good enough.

- This fixes DataTables/DataTables #262
 2014-01-15 09:36:02 +00:00
Allan Jardine
96af1f5cf3 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-01-14 15:51:06 +00:00
Allan Jardine
4c68d5881e Site: Disable comments on manual index page 2014-01-14 15:50:55 +00:00
Allan Jardine
2eb688d05f Site: Update for orthogonal data manual page 
- Added new orthogonal data example
- Updated columns.data and columns.render documentation
- Reordering the manual a little
- Add note to the old orthogonal data blog post to direct people to the
  new manual page
 2014-01-14 15:49:54 +00:00
Allan Jardine
ef974cb255 Dev: Trivial fix to use local variable for aoColumns 2014-01-14 15:49:41 +00:00
Allan Jardine
d60ddf211c Dev fix: Adding _fnCalculateEnd as a stub to the oApi object for 
plug-ins

- A lot of plug-ins use _fnCalculateEnd and although all that is needed
  in the upgrade is to remove it, since the value is calculated
  automatically now, it will likely cause confusion and hassle. So I've
  added this stub to prevent those errors.
 2014-01-14 15:49:03 +00:00
Allan Jardine
734607635a Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-01-14 15:47:45 +00:00
Allan Jardine
3bd9858e59 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-01-14 15:47:33 +00:00
Allan Jardine
323e40e729 Site: Add documentation for tech notes 1-5. 2014-01-14 15:47:22 +00:00
Allan Jardine
2891978fd1 Fix: Numbers incorrectly detected as dates in Chrome 
- Chrome (V8) will incorrectly detect '$245.12' and similar as dates,
  since V8 will strip unknown characters from a string given to
  Date.parse and then attempt to parse the rest of the string - in the
  example above: Dec, 245:
    https://code.google.com/p/v8/source/browse/trunk/src/dateparser-inl.h#72

- The fix implemented to to check for a leading a-zA-Z, number or +-.
  Although this isn't a perfect match for what Chrome does, it, I think,
  a good enough effort to chatch nearly all particular use cases.

- Additionaly, V8 will try to parse a single number passed into
  Date.parse - 1-12 are months, 32+ are years. As such, the numeric type
  detection much be a highter priority than the date detection, since
  Chrome might incorrectly use a column as a date. It would sort
  correctly, but it isn't "correct".

- The take away from this is that Date.parse cannot be used for date
  format validation on its own...
 2014-01-05 11:18:42 +00:00
Allan Jardine
cd0139927e Dev fix: sInputFilter class wan't being applied when using the _INPUT_ 
macro

Fixes DataTables/DataTables issue #260
 2014-01-05 11:18:31 +00:00
Allan Jardine
0b2c32c98f Merge branch 'master' of github.com:DataTables/DataTablesSrc 2014-01-05 11:18:18 +00:00
Allan Jardine
b3bd3cbda7 Site: Add documentation for tech notes 1-5. 2014-01-05 11:18:05 +00:00
Allan Jardine
4a65fb054a Update: isDataTable() static method will now accept jQuery objects and 
selectors as a parameter to check if it is a dataTable.

`tables()` static method rewritten for size
 2014-01-05 11:17:53 +00:00
Allan Jardine
1ab67a880f Fix: When in server-side processing mode, the processing display was 
being removed too early on click to sort column.

- Fixed DataTables/DataTables 259
 2014-01-03 09:56:57 +00:00
Allan Jardine
292d021217 Dev update: Better fix for flatten() 
- Smaller code and works with a mix of scalars and arrays
 2013-12-28 17:05:36 +00:00
Allan Jardine
e5d8a40fc1 Dev fix: The flatten() method should only flatten 2D arrays, and not 
1D arrays.

- The method implemented isn't actually 100% perfect - if you mix arrays
  and scalars, then the behaviour is undefined. But that shouldn't
  happen in DataTables. Will look into it further, though
 2013-12-28 17:05:11 +00:00
Allan Jardine
e699f8b510 Dev fix: ext.order is an object not an array 
Dev fix: `ext.order` wasn't being aliased back to afnSortData correctly
 2013-12-28 11:22:49 +00:00
Allan Jardine
dc0fffa316 Dev: Remove debug 2013-12-28 11:22:37 +00:00
Allan Jardine
4cb532ad95 Fix: DT_RowClass wasn't being updated when modified in the data source. 
- This is actually a little more complex than it might first appear
  since any classes which have been added by DT_RowClass need to be
  removed. We can't just bindly remove all classes, so we need to track
  that classes have been added in a private variable.
 2013-12-28 11:12:05 +00:00
Allan Jardine
4933ccf02e Site: Styling documentation for the currently provided three CSS 
framework integrations:
        - Bootstrap
        - Foundation
	- jQuery UI
 2013-12-28 11:11:54 +00:00
Allan Jardine
8866a3f77c Update jQuery UI styling references 
- The jQueryUI option is depricated in 1.10 and will be removed in 1.11
  to be replaced by style integration files int he same way that
  Bootstrap and Foundation use. This helps to reduce the size of the
  core for a feature that is no longer used that often, while also
  ensureing that DataTables remains modular and supports many styling
  libraries.

- As a result of this change, I want developers to be able to implement
  1.10 without needing to use a depricated option, so this highlights
  the newly added jQuery styling integration files from the plug-ins
  repo.
 2013-12-27 22:44:00 +00:00
Allan Jardine
ab13fcfcfd Dev fix: Add renderer as an initialisation parameter 
- The core logic was already present, it just wasn't in the defaults or
  available to be set in the init object
 2013-12-27 22:43:44 +00:00
Allan Jardine
f3a7f909bb Dev fix: Background row colour was only being used if the display or 
stripe class was added.
 2013-12-20 12:01:27 +00:00
Allan Jardine
1fffb2f5d1 Dev fix: Fix error with stylesheet whereby the last row didn't have a 
border
 2013-12-20 12:00:47 +00:00
Allan Jardine
af287d50a2 Dev fix: The columning classes should be applied to the columns the user 
has selected for sorting, not the data sorted columns (although they are
usually the same)

- https://datatables.net/forums/discussion/18714
 2013-12-19 14:24:37 +00:00
Allan Jardine
7477cee42d Dev fix: Need to get the media path before setting the linclude library 
paths
 2013-12-19 14:04:37 +00:00
Allan Jardine
cece4c7c18 Fix: Add jQuery to the anon wrapper function, so a different version can 
be passed in if needed

- Based on the discussion in
  http://datatables.net/forums/discussion/18792
 2013-12-19 14:04:25 +00:00
Allan Jardine
75d9800522 Site: Correct documentation for ajax and small updates for site 2013-12-19 14:04:14 +00:00
Allan Jardine
b2b85d13cb Site: Updates to documentation for publication on the new site 2013-12-19 14:03:36 +00:00
Allan Jardine
43400684a4 Site: Updates based on my work for the DataTables site. Mostly minor 
changes to styling, naming or docs fixes
 2013-12-19 14:03:24 +00:00
Allan Jardine
1a51c7afa1 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2013-12-19 14:03:12 +00:00
Allan Jardine
46571cfd0a Site: Updating custom markdown to have class for styling, and demo 
styling update
 2013-12-19 14:02:59 +00:00
Allan Jardine
57970f1412 Site: Updating examples to be more like the new sites styling 2013-12-19 14:02:46 +00:00
Allan Jardine
c4e10c3de6 Syntax: Remove debug and add nice Source Code Pro font 
Markdown - Allow inline code comment of `dt-tag etc
 2013-12-19 14:02:33 +00:00
Allan Jardine
3508868042 Examples: Update syntax highlighter 2013-12-19 14:02:20 +00:00
Allan Jardine
d7f487ad10 Update copyright license for SpryMedia Ltd 2013-12-19 14:01:19 +00:00
Allan Jardine
cf2dceee41 Git ignore min CSS files 2013-12-12 09:32:37 +00:00
Allan Jardine
ceccaa5413 License: Placing the examples under MIT license as well 
- This simplifies the built repo which is placed entirely under the MIT
  license
 2013-12-12 09:30:39 +00:00
Allan Jardine
802a600944 Merge branch 'master' of github.com:DataTables/DataTables 
Conflicts:
	composer.json
	media/src/DataTables.js
 2013-12-12 09:27:54 +00:00
Allan Jardine
e69f02444c Merge branch '1_10_wip' 
Conflicts:
	component.json
 2013-12-12 09:25:54 +00:00
Allan Jardine
2948bfa022 Licensing: DataTables is now available under the MIT license 
- The previous combination of GPLv2 and BSD 3 point were confusing to
  may users, and of limited use. The MIT license is appropriate for
  DataTables core software.
 2013-12-11 17:24:30 +00:00
Allan Jardine
177b254879 Examples: Add order column example 2013-12-11 17:21:41 +00:00
Allan Jardine
282f56e9bb License: Update to be MIT license 2013-12-11 17:20:42 +00:00
Allan Jardine
c95dd530b7 Dev: Add new _fnDataSource function to get the data source and simplify 
some logic conditions
 2013-12-11 17:20:31 +00:00
Allan Jardine
9e3a51200a Examples: Server-side processing - updates to the SSP class to have a 
simple() static method which makes it very easy to make a server-side
processing request.

- In the examples the SQL statements are all basically the same, so
  having this method to wrap them into a single function cal absolutely
  makes sense.

- Also added a `formatter` option to the columns array which will format
  the data as needed using a closure function.
 2013-12-11 12:04:58 +00:00
Allan Jardine
c6d8545319 Api: ajax.url().load() should also have a resetPaging option 
- ajax.reload() and ajax.url().load() now have the same options
 2013-12-11 10:57:25 +00:00
Allan Jardine
1daaf4e473 Dev fix: Show "Loading..." message when using ajax option not just 
sAjaxSource
 2013-12-11 09:32:28 +00:00
Allan Jardine
c20681668a New: no-footer class automatically added to the table when no tfoot 
- It appears that ti is impossible to know in CSS if a table doesn't
  have a tfoot element reliably and cross browser, so I've added a class
  which is added to the table automatically if the table has no footer
  or the fotoer is empty to complete the styling of the table.

- Fixed error when there are no cells in an empty TR row in the footer.
 2013-12-10 17:54:53 +00:00
Allan Jardine
7a171b14c2 Dev fix: row().child() checks for undefined now since an empty string 
would be a valid input for a details row. Not a useful one, but
none-the-less a valid on.
 2013-12-10 17:31:46 +00:00
Allan Jardine
c85bcab903 New: Add postfix fixed ordering option 
- With the change to camelCase, it is easier to extend the usageof
  optiosn now, and in this case I've allowed the `orderFixed` (formally
  `aaSortingFixed` parameter to be passed in as an object as well as an
  array. As an object the `pre` and `post` parameters are used to
  specify prefix and / or postfix ordering. Useful for gouping.
 2013-12-10 17:31:35 +00:00
Allan Jardine
dd1e7600ac Dev fix: Destroy wasn't working when using deferred rendering 
- The _pluck() function that was being used to get the tr elements
  didn't remove nulls, while jQuery doesn't like removing a class from!

- Thanks to `RagingTroll` in the forums for spotting this:
  http://datatables.net/forums/discussion/18651
 2013-12-09 13:05:30 +00:00
Allan Jardine
18c53eaed5 Dev fix: When using _fnExtend to extend with an object, need to check if 
the property being expanded is an object or not. If not, then set it to
be an empty object which will be extended. Only really effected the
`ajax` property
 2013-12-09 12:52:06 +00:00
Allan Jardine
7e67778c51 Dev: Change to how the init object is copied for multiple tables 
Based on the discussion in the forms (
http://datatables.net/forums/discussion/18456 ) the fix from 8935b8a
wasn't good enough. What was happening was that the _save_data function
was doing a deep copy of all arrays (minus the data array) so the
default sort was stil applied.

The fix is to reinstate the _fnExtend function which does a jQuery like
deep extend on objects and a shallow extend on arrays. That is extended
slightly to allow array references to be broken on initialisation, to
resolve the issue 8935b8a attempted to (sorting array would be used for
two tables for example), by an optional parameter. This should resolve
the issue correctly this time!
 2013-12-05 12:01:44 +00:00
Allan Jardine
8f356ab917 Dev fix: When no ordering was aplied to the table, the next order would 
throw an error
 2013-12-05 12:01:33 +00:00
Allan Jardine
1a317a07bf Dev: Update syntax core with /*! for closure to keep the licenses in 
place
 2013-12-04 17:11:21 +00:00
Allan Jardine
703ee53c47 Dev fix: API - destroy() was giving a JS error on scrolling tables 
- http://datatables.net/forums/discussion/18584
 2013-12-04 17:10:59 +00:00
Allan Jardine
c8a69545e0 Dev - fix examples: Data source examples had a couple of data source 
errors
 2013-11-29 12:21:19 +00:00
Allan Jardine
d0a0ef8ad1 Dev fix: $.fn.dataTable and $.fn.DataTable should both have the same properties available 
- This fixes DataTables/DataTables issue #241.

- Most of the properties attached are objects, so we want the references
  to them, rather than a copy, so a simple assignment is all that is
  needed. Strings etc will continue to work as well.
 2013-11-29 11:59:43 +00:00
Allan Jardine
d4a1028a1d Dev fix - Full backwards compatiblity with fnServerParams with array 
syntax paraneter names

- Data added using fnServerParams with array syntax had different
  behaviour in 1.10 from 1.9. In 1.9 jQuery would create an array for
  us, but in 1.10 before we create an object first, we need to create
  that array ourselves. So the following code had different behaviour:

		"sAjaxSource": "data/arrays.txt",
		"fnServerParams": function ( d ) {
			d.push(
				{name: 'somekey[]', value: 'somevalue1'},
				{name: 'somekey[]', value: 'somevalue2'}
			);
		}

In 1.10 it would have sent `somekey[] = somevalue2` but 1.9 would have
sent both as part of an array.

To maintain full compatiblity with 1.9 we need to convert this syntax to
an array - this commit does that.

I was concerned about using parameters in the brackets, but jQuery only
searches for `[]` when performing this conversion. We could use $.param
and then decode the created query string, which would be absolutely 100%
comaptible, but would involve additional code and I think this method
provides that 100% compatiblity from reading the jQuery code), and its
shorter.
 2013-11-29 11:36:03 +00:00
Allan Jardine
19f5d9a157 Dev fix - example: Use camelCase in the examples - 18448 2013-11-25 16:57:39 +00:00
Allan Jardine
89c3ded42a Dev fix: Examples - Index column example needs to use namespaced events 2013-11-25 09:24:08 +00:00
Allan Jardine
208b3ba6a1 CSS: Add border-spacing: 0 to the stylesheets 
- This is the CSS version of the cellspacing attribute on the table in HTML. It will work in all browsers except IE6/7. IE8+ and the others are all fine. So for the moment most of my examples will continue carrying the cellspacing attribute, but this is useful to have in the core css
 2013-11-25 09:23:57 +00:00
Allan Jardine
667ee39fdb Dev fix: DataTables/DataTables #250 
- Need to namespace custom DataTables events in 1.10
 2013-11-25 09:23:35 +00:00
Allan Jardine
4549646891 Dev fix: Sort indicator items weren't being redrawn 
- Confusion aorund the `order` and `sort` events which resulted in the
  sort icons not being updated
 2013-11-21 13:46:17 +00:00
Allan Jardine
7a32f2db93 API: Column selector - add support for visible indexes counting from the right 
- The ability to use negative numbers as a column selector for the
  column data index was added recently, but that didn't include the
  ability to work with negative numbers with the :visible pesudo
  selector. This commit adds that ability so you can do:
  `table.column("-1:visible")` to always get the right most visible
  column
 2013-11-19 13:55:08 +00:00
Allan Jardine
32e27fcc2f Api: Column selector - jQuery selector as a string, an name selector 
with :name postfix.

- Previously you could use a jQuery selector for columns by using the
  :jq postfix, and names were matched otherwise. This is reversed now
  for consistency with the rows and cells selectors which treat strings
  as jQuery selectors without the :jq postfix.
 2013-11-19 13:54:53 +00:00
Allan Jardine
e82068e7b3 Dev fix - incorrect fix for the API extend method before. Was looking 
its own reference
 2013-11-19 13:54:41 +00:00
Allan Jardine
6740193eed Dev fix: The API chaining was a little broken if the inner function 
returned undefined, null etc.

- The base issue was in the instanceof check which has a priority error,
  it was:
    ! obj instanceof _Api
  which is the same as:
   (! obj) instanceof _Api
  which is rubbish.

  We want:
    ! (obj instanceof _Api)
  but there is of course a wrapper function, so that needs ot be taken
  into account as well. The new logic does just that.
 2013-11-19 13:54:14 +00:00
Allan Jardine
8919616833 Docs: row() and rows() API documentation 2013-11-19 13:54:02 +00:00
Allan Jardine
8dcdb94b15 API - invalidate() methods - add an "auto" option that can be passed 
rather than jsut an empty string as auto
 2013-11-19 13:53:48 +00:00
Allan Jardine
48fd750bd8 Fix: Initialisating multiple DataTables with a single call was broken 
- Because of the manipulation of the initalisation object initialisation
  of multiple tables with a single jQuery call (i.e.
  `$('.dataTable').dataTable();`) was broken since the second table
  would see the modified init object. Need to take a coopy of the object
  before entering that state.

- This could probably do with a bit of a clean up sometime...
 2013-11-19 13:53:36 +00:00
Allan Jardine
ba2fb9f315 Fix - examples: Same id twice on the page breaking things 2013-11-19 13:53:25 +00:00
Allan Jardine
8a5712b7e9 Update - init options: Rename displayLength to pageLength for consistency 
- The displayLength option is poorly named, particularly with the new
  API refering to it as the page length (page.len()) so, using the new
  translation option to allow backwards compatiblity while using new
  parameter names, I've updated this parameter's name and its
  documentation.
 2013-11-18 13:43:58 +00:00
Allan Jardine
7119dfa50c API: Selectors - 'filter' selector modifier renamed to be 'search' 
- Renaming in keeping with the new terminology
- Updating example which uses it (main documentation still to be
  written)
- Backwards compatible with a bit of logic to check if the old version
  is being passed in
 2013-11-18 13:43:46 +00:00
Allan Jardine
d47da33826 Old API: Mark $ method as deprecated 2013-11-18 13:43:34 +00:00
Allan Jardine
a423c0f457 API - dev: Remove the plugin() methods from the new API 
- Decided that it would be better to provide the new API by having
  plug-ins extend it directly, rather than providing their own API.
  Using the plugin() method it was possible to get a plug-in insta,ce
  for example TableTools, but the way it should work is that TableTools
  would provide a tabletools() API method, registering it as an
  extension to the DataTables API objects. Further more, TableTools
  should provide methods such as row().select() etc, extending the
  current API rather than doing its own thing which the plugin() methods
  prompted.

- No backwards compatiblity issues here as the plugin() code hasn't
  shipped as a release.
 2013-11-18 11:46:39 +00:00
Allan Jardine
cf8f008a4d Dev - examples: Update the example code to take account of the event 
changes from: ae0951b, 694f129 and 1f561e3
 2013-11-18 11:46:27 +00:00
Allan Jardine
635a027057 Dev: Remove the static construct method that had been added as part of 1.10 
- I added a static DataTable.on() method previously in the 1.10
  development for a single event called `construct` which would tell us
  when a table was constructed. But I've realise that since the events
  that DataTables' triggers bubble up through the document, that effect
  can already be achieved:

- Use:
  - $(document).on( 'init.dt', function ( e, settings ) { } );

- Rather than:
  - $.fn.dataTable.on( 'construct', function ( settings ) { } );

- No backwards compatiblity issues as the DataTable.on code was never
  shipped, its dev code only
 2013-11-18 11:46:15 +00:00
Allan Jardine
0f18491cf1 New: Warning on generic Ajax error (404 etc) 
- Previously DataTables would only show an error message if there was a
  JSON parsing error. However, if there was any other kind of error,
  such as a 404, it would just silently swallow the error. THink its
  best to show an error and a tech note.
 2013-11-18 11:46:04 +00:00
Allan Jardine
6dcc69ee54 New: DataTables events are now all bound to the .dt namespace 
- This is a breaking backwards incompatible change - please be aware of
  this!

- DataTables fires custom events such as `draw` etc, but these events
  were in no way identifyable as eminating from DataTables rather than
  some other component, which can cause confusion and difficulty
  resolving bugs.

- As such, all DataTables events are now fired with the `dt` namespace -
  this means if you are currently using events, you must update your
  code to also use the .dt namespace. If you are already using
  namespaces, that's great, you can continue to do so as jQuery allows
  multiple namespaces, but you must still use the .dt namespace.

- This is a breaking change because the old behaviour was incorrect -
  i.e. this was a bug to be fixed, hence why we haven't gone through a
  deprecation cycle. The old events weren't well documented (only in the
  JSDoc generated docs and a few of my forum posts), whereas in 1.10
  they will form a key part of the documentation. As such, now is the
  time to get this right. This will be documented clearly in the upgrade
  notes.

- Discussion on this topic here:
  https://github.com/DataTables/DataTables/issues/245
 2013-11-18 11:45:41 +00:00
Allan Jardine
ed4afe6178 Api: Column selector - add the ability to select columns counting from 
the right by passing in a negative number
 2013-11-14 17:21:48 +00:00
Allan Jardine
48931bbb18 Api - columns: Corrections found durating documentation: 
- columns().cache() should check for the parameter 'search' for naming
  consistency

- Plural error on column().nodes()

- Change column.index() fromIndex/toIndex to fromData/toData - its an
  index be it data or visible, so the old method was meaningless
 2013-11-14 17:08:24 +00:00
Allan Jardine
debea960c6 Api fix - cache() method should look for 'search' as the passed in 
parameter
 2013-11-14 17:08:10 +00:00
Allan Jardine
5c9d54e6f5 Api: table().header() and table().footer() methods for naming consistency 
- The columns() methods have header() and footer() children to get the
  header and footer cells for the columns. For naming consistency the
  table() methods should be named likewise
 2013-11-14 17:07:57 +00:00
Allan Jardine
b956a69271 Fix - API: Errors in plurals and signular forms of method naming 2013-11-13 16:22:04 +00:00
Allan Jardine
7cf5f904d8 New: Api methods - to$, toJQuery and join 
- to$ - Convert the result set to a jQuery object. Compliment to the
  toArray method. This is mainly useful when working with the node() and
  nodes() methods.

- toJQuery - Alias of to$

- join - Array join method
 2013-11-13 16:21:52 +00:00
Allan Jardine
da8358ce48 Updated: Update examples and documentation for the change in committed 
in cdc6399 to make naming more consistent
 2013-11-12 19:18:51 +00:00
Allan Jardine
e1f0fd2dee Updated: Naming consistency for searching and ordering 
- With the new API the filter() and sort() methods already have meaning
  (the array methods built into Javascript) so the methods for filtering
  and sorting in the API are called search() and order() respectively.
  However, the intialisation parameters and events in DataTables use a
  mix of filter, search, sort and order in their terminology so this
  commit harmonises on just search and order, updating where
  appropriate.

- There are a number of incompatible changes if you are already using
  the new options in 1.10, but no incompatible changes to the latest
  release (1.9.4). 1.10 changes:
    - Server-side processing, the new parameters sent have been updated
      to refelect the new terminology
    - The Ext object likewise has been updated

- Default with the old options and padding int he old options will still
  work as before, compatiblity functions have been added to provide
  mapping. If both are provided the new parameter value will take
  president.

- The change is primarily around `sort` since that was reasonably
  consistent in its terminology for the initlaisation parameters before.
 2013-11-12 19:18:40 +00:00
Allan Jardine
46c5884853 Examples: Update footer callback with use of column().footer() 2013-11-12 19:18:29 +00:00
Allan Jardine
c8d2ebedc1 Merge branch '1_10_wip' of github.com:DataTables/DataTablesSrc into 1_10_wip 2013-11-12 19:18:18 +00:00
Allan Jardine
8c2c65c9dd New: Cached footer cells can now have colspan properties, allowing 
column index referencing of the cells.

- Previously a colspan in a footer cell would cause index misalignment -
  for example if you had a table of 6 columns with two in the footer
  (one colspan=5) the fotoer cells would be assigned to the first two
  columns in the table, breaking column index order. Now a cell can be
  used over multiple columns. This allows column().footer() to always
  reflect the cell that belongs to that column (possibly sharing it with
  other columns).

- Note that the footer will only use cells from the first row in the
  footer. If there is more than one row, use table().foot() to access
  the TFoot element and then manipulate it as needed.
 2013-11-12 19:18:06 +00:00
Allan Jardine
ad973fec36 Fix - docs: Error in examples for xhr event 2013-11-12 19:17:54 +00:00
Allan Jardine
d389c6d348 Docs: Event docs in the new XML format for the web-site 2013-11-12 19:17:31 +00:00
Allan Jardine
a287b560b8 New: Add built-in support for percentage numbers 2013-11-12 19:17:18 +00:00
Allan Jardine
45f9be18ed Docs: Complete the XML docs for the top level DataTables options 2013-11-12 19:16:40 +00:00
Allan Jardine
87832058d4 Docs: More documentation of the options 2013-11-12 19:16:28 +00:00
Allan Jardine
90599e45a6 Docs: Further documentation of the options DataTables has available 2013-11-12 19:16:15 +00:00
Allan Jardine
9eb7164152 Fix: On pages which use *{box-sizing:border-box} scrolling would break 
- The fix here is to set the box sizing for the table and its cells to
  be content-box sizing to allow the column width calculations to occur
  correctly - 17932
 2013-10-24 13:20:13 +01:00
Allan Jardine
e10bedb750 Update readme license text to be clear what copyright information must remain 2013-10-24 13:19:16 +01:00
Allan Jardine
fd550de897 Update file header to use minifier friendly copyright header 
- JSDoc comments still exist, but the information is to some degree
  duplicated.

- Copyright header matches what is used in the minified script now
 2013-10-19 19:01:34 +01:00
Allan Jardine
3f86f1f17e Merge pull request #234 from jdufresne/master 
Support minifier license comment convetion
 2013-10-19 10:53:42 -07:00
Jon Dufresne
4f476215ac Support minifier license comment convetion. 
Many JS minifiers use the convention that comments starting with '/*!'
are preserverd as license comments. To help build tools do this easily
with DataTables, it should use this convention. This ensures the
license comment is preserved when using these tools.

From https://github.com/yui/yuicompressor/blob/master/README.md
C-style comments starting with /*! are preserved. This is useful with
comments containing copyright/license information.

From https://github.com/yui/yuglify
We need to support the /*! license comment blocks when minifying, so
we added a preprocessor to the code to pull them from the source, then
place them back when the minification is complete.
 2013-10-19 07:54:49 -07:00
Allan Jardine
9cca9c8265 Merge pull request #231 from nifr/patch-1 
[EASY PICK] Fixed package name in composer.json
 2013-10-17 03:00:00 -07:00
Allan Jardine
5ae9ec16c6 Examples: Add HTML5 data-* attribute example showing DataTables 1.10's 
ability to use data attributes as a data source
 2013-10-17 10:57:32 +01:00
Allan Jardine
14cce80a1b Merge branch '1_10_wip' of github.com:DataTables/DataTables into 1_10_wip 2013-10-17 10:57:13 +01:00
Allan Jardine
6b7761100f Packaging: Change composer.json descrptor name to use lower case 
- Packagist requires that packages use only lowercase letters in their
  name (although the composer spec says nothing about this), so in order
  to make DataTables usable with packagist we need to change the name
  slightly.
 2013-10-17 10:56:50 +01:00
Allan Jardine
fd91aba00c Examples: Add HTML5 data-* attribute example 
- DataTables 1.10 has the ability to source data for filtering and
  sorting from HTML5 data-* attributes. This example shows that ability
 2013-10-16 15:33:34 +01:00
Allan Jardine
09e58487cb Dev: Fix typo in readme file 2013-10-16 14:29:53 +01:00
Allan Jardine
510388f95f Merge branch '1_10_wip' of github.com:DataTables/DataTables into 1_10_wip 2013-10-16 14:28:28 +01:00
Allan Jardine
8c1aca83c6 Remove old Readme file, now replaced with md file with updated content 2013-10-16 14:27:44 +01:00
Allan Jardine
04a8c57f3d Add contributing file and update readme to be a markdown file with 
updated content.
 2013-10-16 14:24:42 +01:00
Allan Jardine
7bec74c02f New - examples: Examples updated and restyled for DataTables 1.10 
- Additional information and better layout for examples. See the src
  repo for more information.
 2013-10-16 12:13:30 +01:00
Allan Jardine
62aef83013 Examples - Add initialisation code, HTML and other information to 
display

- In the examples we want to show the following information to help
  developers to get to grips with DataTables more readily:
    - Init javascript code
    - HTML used for the table
    - Additional CSS used
    - Ajax loaded data
    - List of the libraries files loaded in the example

- All but the last point is complete, a bit of styling and information
  text.
 2013-10-16 12:03:14 +01:00
Allan Jardine
6c10109119 Dev: Update JShint file for JShint 2.1 and apply fixes from errirs it 
spotted
 2013-10-15 15:31:45 +01:00
Allan Jardine
c916bb05fe New: search() and column[s]().search() API methods now have a 'get' 
option

- By passing in no parameters to the search API methods we can get the
  current search value - for example:
      $('#example').DataTable().search();

- This is to round of the API as the order() method already has a get
  option as to the paging information
 2013-10-15 15:31:35 +01:00
Allan Jardine
ecd36146e9 Examples - update server-side processing examples for new data 
New: Server-side processing scripts rewritten to use PDO and use a class
with static functions for code sharing between all examples.
 2013-10-15 14:40:19 +01:00
Allan Jardine
c9c8e65708 Updated - server-side processing support for camelCase variables 
- As part of the 1.10 move to camelCase the server-side processing
  return now accepts camelCase variables as well as the old 1.9
  hungarian notation.
 2013-10-14 17:33:54 +01:00
Allan Jardine
a70f109ac4 Dev - code regoranisation for new methods 
- Variables and functions which are to be private in DataTables, but
  available across all files have a single leading underscore.

- Variables and functions which are to be private in a single file have
  two underscores (but no self executing function to restrict scope as
  that will just take extra space).

- Externally exposed functions and JSHint globals list updated
 2013-10-14 14:06:09 +01:00
Allan Jardine
fa5b99a586 Update exposed functions list 2013-10-14 14:06:00 +01:00
Allan Jardine
686b9c9b72 Size: Refactor _fnBrowserDetect slightly to reduce size a small amount 2013-10-11 17:31:33 +01:00
Allan Jardine
a9035942d0 New - API: plugin(), plugin.register() and plugin.deregister() methods 
- When working with plug-ins such as TableTools, there is no clearly
  defined way at the moment to get at the plug-in instance, with each
  doing it its own way (TableTools as a static function, while Scroller
  attaches itself to the settings object and KeyTable is its own
  intialiser, amoung others...) so I'm introducing these methods to
  unify this.

- plugin() is used by DataTables users to get their plugin instance, for
  example `table.plugin('tabletools')` would get the TableTools
  instance allowing full access to its API.

- plugin.register() and plugin.deregister() are called by the plug-ins
  when they attach themselves to a DataTable. The 'extras' will all need
  to be updated to use this new method.
 2013-10-11 17:19:10 +01:00
Allan Jardine
846c4d9c60 New - API: Static on() method, which listens for static events from DataTables 
- Some plug-ins would benefit from be able to automatically initialise
  when a DataTables is constructed, to this end, a construct for static
  events is added here, with the static function $.fn.dataTable.on()
  listening for events. Currently only the `construct` method is
  available, although others could potentially be added in future if
  they are useful. As such, the code driving it is intentionally simple
  for this cas,e but the API abstract enough to allow future expansion.

- There is no `off()` method, as I'm not sure it would be that useful.
  Could be added in future if needed!
 2013-10-11 16:09:30 +01:00
Allan Jardine
4e05760b20 New: Add callback function to the ajax.url().load() and ajax.reload() 
methods
 2013-10-11 16:09:19 +01:00
Allan Jardine
8f975060d8 New: Server-side processing parameters update 
- The server-side processing parameters used by DataTables 1.9 are very
  ugly, and rather arkward to work with, so in keeping with the
  camcelCase approach of 1.10 and its general monderisation, when using
  the `ajax` option to set the ajax url for data, DataTables server-side
  processing will now use a much more modern method of telling the
  server what data is required - specifically using arrays and objects
  in neatly formatted data.

- The old 1.9 method is invoked if sAjaxSource is used to set the ajax
  url, or if $.fn.dataTable.ext.legacy.ajax is set to true. As such,
  this change should be fully backwards compatible since `ajax` is a new
  option in 1.10.

- This new ability adds 334 bytes to the min file, primarily, because
  the old method is retained (using just the new method would actually
  reduce the size slightly).
 2013-10-11 15:39:54 +01:00
Allan Jardine
9d642814cc Size - refactor Ajax server-side processing parameter builder 2013-10-11 14:22:10 +01:00
Allan Jardine
3e0637f910 Dev: Fix type in last commit 2013-10-11 14:22:00 +01:00
Allan Jardine
c3a2ad6f40 ize - refactor _fnInitialise for size. Only about 60 bytes saved 2013-10-11 14:21:49 +01:00
Allan Jardine
5c0cdd86cd Size - refactor sizing functions to reduce file size and modernise code 
- The _fnCalculateColumnWidths is probably the oldest function in
  DataTables which has mostly reamined as it was 5 years ago! However,
  its time to trim it down a bit and optimise now. This rewrite has all
  the same actions, but results in a minified file which is about 700
  bytes smaller than before.
 2013-10-11 14:21:38 +01:00
Allan Jardine
920b7671fb Dev fix - Broke non-scrolling tables with the scrolling refactor 2013-10-11 09:48:22 +01:00
Allan Jardine
70a3f88d8d Dev - tidy up changes 2013-10-10 17:47:11 +01:00
Allan Jardine
b178ab69a2 Removed - bAutoCss and refactor scrolling functions for size 
- The bAutoCss parameter is not one that I've ever actually seen used,
  so I've dropped it out here to reduce complexity. It was only useful
  for making the scrollbars always visible on the table, which can just
  as easily be done with `div.dataTables_scrollBody { overflow: scroll
  !important }` since that will take a heigher priority that the
  DataTables appled style.

- The moster _fnFeatureHtmlTable and _fnScrollDraw functions have been
  refactors, saving around 1.5K in size (in the minified file)
 2013-10-10 17:46:59 +01:00
Allan Jardine
fb2f40a455 Removed: bScrollInfinite and iScrollLoadGap 
- The infinite scrolling feature of DataTables is inadequate as a
  solution for the problem it is trying to solve as it introduces a
  number of compatiblity issues with the rest of the API parimarily
  due to the fact that it "tricks" the rest of DataTables into drawing
  just a small proportion of the table, leaving the elements which are
  currently in place. This means that DataTables doesn't realise that
  the table has additional rows at the top of the table, thus breaking
  numerous interactions with the API and confusing developers. As such,
  its a poor feature that is just taking up space and could be done much
  better externally.

- I will write an infinite loading feature for DataTables in future for
  users that do what to use this ability - there is nothing stopping a
  simple scroll event being attached to the scrolling element and
  calling the rows.add() function. This is exactly what the new plug-in
  will do.

- Scroller is a much better solution for defined length tables.
 2013-10-10 17:46:48 +01:00
Allan Jardine
c31d3a1447 Dev: Refactor the filtering HTML creation function - save 138 bytes on 
file size
 2013-10-10 17:46:36 +01:00
Allan Jardine
3795134856 New: Default Ajax source property updated to be data 
- In keeping with the camelCase name changes for DataTables 1.10, the
  default Ajax data source object property name has been updated from
  `aaData` to just `data`. Note that this is a fulyl backwards
  compatible change - if aaData is present in the data, it will be used.
 2013-10-10 17:46:26 +01:00
Allan Jardine
fe1a5a630a Dev examples - Update ajax examples for new data and improved 
descriptions
 2013-10-10 17:46:15 +01:00
Allan Jardine
c470d7bfda New: sFilterInput and sLengthSelect class options for the <select> and 
<input> controls used by DataTables for length change and filtering
respectively.

- Bootstrap 3 requires a styling class be set directly on the element,
  so in order to correctly support Bootstrap 3, which we want to do, we
  need to have the ability to set these classes. This commit adds that
  ability
 2013-10-09 14:57:45 +01:00
Allan Jardine
bef8374eed Dev fix: Sorting a filtered table was broken 
- Because of the decoupling of the filtering and sorting, the filtering
  was missing that the indexes of the displayed data will have changed
  after a sort. So need to do a full filter when just sorted
 2013-10-09 14:57:34 +01:00
Allan Jardine
8debb87477 Dev examples - update bootstrap and foundation examples for example 
styling

- Note that I've included the bootstrap and Foundation integration files
  in the resources folder. In future these files will be on the CDN, but
  that isn't up and running yet...
 2013-10-09 14:57:23 +01:00
Allan Jardine
a11eb6d696 Dev fix: Error in full pagination type - missing first and last 
buttons
 2013-10-09 14:56:24 +01:00
Allan Jardine
6bd699b537 Dev fix: iDataSort and aDataSort conflicting on camelCase 
- Simple fix is to check if it is a number or not
 2013-10-09 14:56:12 +01:00
Allan Jardine
8573d5955c Update - init: scrollX can be set as true 
- scrollX was often the source of frustration when setting it to
  anything other than "100%", which is was in the demos and
  documentation but it makes it easy to see that you could set it to be
  50% or anything else. That usually broke the developer's layout. So
  now you can just use scrollX: true, to enable horizontal scrolling.
  The demos have been updated for this.
 2013-10-09 14:56:01 +01:00
Allan Jardine
888c4374e8 CSS: Automatically clear the DataTable wrapper element 
- A numebr of support requests are about why the layout immediately
  after a DataTable looks wrong, and its usually because of the floats
  used by info / paging, so we self clear the wrapper around the
  DataTable controls
 2013-10-09 14:55:24 +01:00
Allan Jardine
cdae9014de Dev - build process - examples 
- Updating the build process to introduce the example builder to convert
  the XML example files into HTML files. This process is performed for a
  number of reasons:

  - Much more maintainable - links automatically updated
  - Add / remove examples easier
  - Modify page styling easier
  - Examples can be directly integrated into web-site since they are
    transformed by template
  - Common data sharing

- Note that the work on the new example build process is not complete in
  this commit, there are still a few things to do! css, media paths and
  completing the templates.
 2013-10-09 14:55:01 +01:00
Nicolai Fröhlich
df6ea5007f Fixed package name in composer.json (packagist/composer require a lowercase name) 
With the former package name being DataTables/DataTables it is not possible to add this library to [packagist](http://packagist.org) which makes this file useless in it's current state.

Please note the [error message](http://img42.imageshack.us/img42/1079/ywi9.png)  when trying to [submit the package](https://packagist.org/packages/submit) to packagist.

"The package name DataTables/DataTables is invalid, it should not contain uppercase characters. We suggest using data-tables/data-tables instead."
 2013-10-02 11:13:58 +02:00
Allan Jardine
76ae8661c8 Dev: JSON API - store and return the original JSON object 
- Rather than creating a new JSON object from the XHR, use the one that
  was returned by the server. This is useful if you manipulate the data
  since you want to just keep using the same object.
 2013-09-23 11:45:23 +01:00
Allan Jardine
7c1d27ae5f Dev fix: HTML-5 attr detection could provide undefined functions 
- The HTML5 attribute detection for sorting, filtering etc was breaking
  if you didn't provide a filtering _and_ sorting attributes since they
  created an undefined get data function, which causes DataTables to
  complain. Fix is to just check for a null value.
 2013-09-23 11:45:14 +01:00
Allan Jardine
5a3401ee5b Fix: Add support for the input, paste and cut events in the filter input 
- IE10 has a little `x` to clear text boxes which fires the `input`
  event, so we need to monitor for that in the filtering input.

- While I'm here, I've also added support for the paste and cut events
  to change the filtering when they fire. Via keyboard the fire on
  keyup, but not if you use the mouse. They do now.

- Not that it us possible to have multiple events fire (keyup + paste
  for example). The logic of checking for a change of input counters
  this.

- Thhis fixes DataTables/DataTables issue #227.
 2013-09-23 11:45:06 +01:00
Allan Jardine
4e5cad9640 Size: The default formatNumber method has been reduced in size. 
- Exactly the same functionality, but now uses a regex to perform the
  same operation
 2013-09-23 11:44:58 +01:00
Allan Jardine
e61e402e37 Performance: On destroy, don't select tbody elements for event removal 
- Based on thread 17024 - if you have a large table with a lot of
  elements in the tbody, the find('*') selector was of course selecting
  them all. That results in poor performance. DataTables doesn't add any
  events to the children in the tbody, so we can filter out those
  elemetns and keep the element list ot  a sensible size.
 2013-08-23 10:11:42 +01:00
Allan Jardine
4d6081c3d2 Performance - HTML decode uses DOM directly rather than jQuery to speed things up 
- Based on the discussion in forum thread 16961 and the results from
  http://jsperf.com/html-decode I've updated how the HTML decode for
  filtering is done to bypass jQuery and use DOM methods directly. It is
  more code but it is also much faster.
 2013-08-22 09:30:02 +01:00
Allan Jardine
74a78b2010 Accessibility: Add live region attribute to table info, remove from table 
- Based on feedback from Rich Caloggero in forum thread 13421 the ARIA
  live region DataTables was adding to the TBODY element of the table
  have been moved to the table information element, so screen readers
  don't go mad announcing the new informaiton in the table on every
  change, but rather just read the summary.
 2013-08-20 15:58:38 +01:00
Allan Jardine
5ca931c23b Fix: null handling for type detection and filtering methods 
- The built in filtering formatters and type detection need to be able
  to handle just about any data being passed into them. They were
  tripping up with null data being passed in before.
 2013-08-20 15:01:51 +01:00
Allan Jardine
a798d53d17 Merge branch '1_10_wip' of github.com:DataTables/DataTablesSrc into 1_10_wip 2013-08-20 15:01:34 +01:00
Allan Jardine
e6840bd2cf New: Pagination language options (i18n) have _PAGE_ and _PAGES_ options 
- Based on the discussion in forum thread 16938 DataTables now has the
  ability to use _PAGE_ and _PAGES_ in addition to the exisiting
  _START_, _END_, _MAX_ and _TOTAL_ options in the information language
  strings. This allows the developer to show paging information rather
  than record based information in the information element.
 2013-08-20 15:01:25 +01:00
Allan Jardine
425eb38c5b Dev fix: API page.info().page should use 0 as the start index not 1 
- Math.floor should be used to have page indexes starting at 0 rather
  than 1, since page(n) uses 0 based indexing.
 2013-08-20 15:01:17 +01:00
Allan Jardine
e1f4a8fa9e Use named module for AMD include 
Based on DataTables/DataTables/issues/214 this commit uses the optional id parameter for the AMD define function to give DataTables a 'name' for easy referencing.
 2013-08-20 15:01:10 +01:00
Allan Jardine
d5eb393df9 New: DataTables tables resize automatically with window (and width="100%" attr) 
- DataTables tables previously did not automatically adjust their sizing
  when the window width was changed, which let to a lot of additional
  calls to fnAdjustColumnSizing in peoples code (and support questions
  in the forums). This commit add adjustment to the sizing automatically
  for tables width have width="100%" as an attribute (we can't use CSS
  since we can't know if it is relative or absolute sizing) - extending
  what went before. This has full compatiblity with scrolling and
  non-scrolling tables. A throttle is used to not bring IE to its
  knees...
 2013-08-14 12:15:18 +01:00
Allan Jardine
b00180b71e Dev fix: fnAdjustColumnSizing was reseting paging 
- The shim layer call to api.draw() was telling the API to reset the
  paging, but it should have been holding it static (as it now does by
  passing false in to draw()).
 2013-08-14 09:07:15 +01:00
Allan Jardine
c05d26fcb9 Dev fix: Spell _unique correctly in ext! 2013-08-09 12:06:43 +01:00
Allan Jardine
cbeaadcba8 Dev fix: Additional to the content-box fix form the other day - use 
jQuery since browser specific styles can override the W3C option. jQuery
deals with it for us.
 2013-08-08 14:51:51 +01:00
Allan Jardine
dd805f6623 New: CSS - Add .selected option to CSS for selected rows 
- It is quite common to have a row selection styling in DataTables, so
  it makes sense to built this ability directly into the core CSS. It
  doesn't add too much extra weight, but it would be a huge pain for
  developers to do themselves and also it means I can reuse it in
  TableTools / Editor.
 2013-08-06 17:18:56 +01:00
Allan Jardine
4c317c910a New - event - column-sizing - fired when the column sizing chages 
- This event allows plug-ins (specifically FixedColumns in this this
  case is what I'm thinking of, but others such as FixedHeader could
  also benefit) to alter their layout when the column sizing is changed
  (for example by a window resize).
 2013-08-06 10:26:05 +01:00
Allan Jardine
ac7fb22620 New: New event - column-sizing - fired when 2013-08-06 10:25:57 +01:00
Allan Jardine
f817e9a0be Dev fix: State saving was breaking on sort 
- My fix a while back for detecting if a column was no longer available
  in a table was duff, since it used $.map which flattens its array
  return, but sorting needs a 2D array.

- Fixed by doing our own itteration
 2013-08-06 09:08:10 +01:00
Allan Jardine
6447373eb6 Dev fix: Update filter formatters to deal with null / undefined data 2013-08-05 15:40:50 +01:00
Allan Jardine
38e12beac9 Fix: Arrays in settings object shared between instances 
- Because of the way _fnExtend() was deep copying objects, but shallow
  copying (i.e. references) arrays, the arrays used in the settings
  object were actually being shared between all instances of DataTables
  on a page.

- This is most noticable in the column filtering, whereby if you apply
  a filter to the column of one table, it is applied to all tables!

- The fix is to dump _fnExtend and replace it with a typical jQuery
  extend. However, one special consideration is made for the data being
  passed it - we absolutely do want that reference to be retained (that
  + the fact that extend is slow on large arrays/objects) so it is
  dumped into a temp variable which is then assigned back to the cloned
  object.

- This fixed DataTables/DataTables issue #213
 2013-08-05 09:04:23 +01:00
Allan Jardine
a242a848d5 Fix: Individual column sorting was not distinct for multiple tables 
- The `settings.aoPreSearchCols` array was being shared between every
  table on the table (test using a simple:
    $.fn.dataTableSettings[0].aoColumns ===
    $.fn.dataTableSettings[1].aoColumns
  ) which meant that a column filter aplpied to one table would be
  applied to all others.

- Fix is to deep copy the search model when adding a columns

- Fixes DataTables/DataTables issue #213
 2013-08-04 10:16:28 +01:00
Allan Jardine
3f79e6cce4 Fix: box-sizing: border-box would cause column misalignment when scrolling 
- It is far from uncommon to do `* { box-sizing: border-box; }` at the
  top of your CSS these days, including in frameworks, but this could
  cause DataTables a little bit of a problem when scrolling both
  horizontally and vertically since the padding it adds to the header
  linear element to allow it to scroll over the vertical scrollbar would
  be folded into the width of the div linear, rather than added to it.

- Fix is to simply set the box-sizing for the linear. I've decided to do
  this in Javascript rather than CSS since it is going to be needed
  regardless of the CSS being used.
 2013-08-04 09:26:02 +01:00
Allan Jardine
f9ac4c64e2 New: Currency, formatted numbers and HTML numbers sort types built in 
- This commit sees the number of built in type detection and sorting
  functions increase to cover the most common cases of use of plug-ins
  for DataTables (witht he exception of dates, for which a new first
  class plug-in will be created). Specifically, DataTables now has built
  in support for:
  - Dates (Date.parse())
  - Numeric sorting
  - Formatted numbers sorting (including currency and thousands
    seperators)
  - Numbers wrapped in HTML (link tags for example)
  - Formatted numbers in HTML
  - HTML

Although the numeric sorting plug-ins could have been collapsed down to
just two plug-ins (rather than 4) I decided to do it this way to allow
type based filter formatters to be used with the formatted number types
to allow search for "100,000" or "100000" to match the same data. This
is not built in, but it is possible (and might be in future).

- The goal with these additional functions is to enhance the abilities
  of DataTables out of the box to cover the most common cases for data
  usage - DataTables is all about making data in tables more accessable
  after all! The size cost is ~300 bytes for these additional functions
 2013-08-03 08:08:38 +01:00
Allan Jardine
59c6b530f3 Fix: A default for mData would not have been applied 
- Fix for DataTables/DataTables issue #212
 2013-08-03 08:06:54 +01:00
Allan Jardine
382482f8e9 Update: If there is no sorting methods for the column type, use string 
- In the case of filtering, if there is no filtering extension for the
  column type, then the basic string based filter formatting is
  performed (i.e. string is always the fallback - there can't be an
  error because a function isn't there).

- This commit matches that behaviour in sorting. If you define a column
  type as something for which there is no column sorting function, then
  the string type will be used rather than resulting in a javascript
  error.
 2013-07-30 19:06:44 +01:00
Allan Jardine
42170f6498 Dev styling - darken the paging button border slightly 2013-07-30 19:06:38 +01:00
Allan Jardine
c95f8c88d6 Size: Remove _fnColumnOrdering and replace with a _pluck call 2013-07-30 19:06:32 +01:00
Allan Jardine
16dea34d8c Update: Rewrite of column type detection 
- Automatic column type detection was a real weak point of v1.9- - it
  did basically work, but if you then updated a row that didn't match
  the current data type it would always end up as a string. A good
  example of this is the ambiguous date "06-06-13" (is it dd-mm-yy or
  mm-dd-yy?). If it was detected as dd-mm-yy and then you add '05-20-13'
  to the column (or update an exisiting cell), the type would not match
  the exisiting value that thus failover to a string.

- Type detection is now more rigorous, but still optimised (since it
  has the potential to take up a significant amount of time). When a row
  is added or updated, or a cell is updated, the exisiting type is
  removed from the target column(s) and then, before sorting or
  filtering, the _fnColumnTypes function checks to see if any column
  needs to be type detected and do so if needed. This approach allows
  multiple rows to be added (for example) before the draw is performed and
  the type actually needs to be calculated.

- In future I'd like to have a 'data-ready' type event which will tell
  DataTables, and any of its components that something wants to work with
  the data in the table and it should prep the data. The counterpart would be
  a 'data-invalid' flag which would be set on update, add etc so it knows
  when an update is needed.
 2013-07-30 19:06:25 +01:00
Allan Jardine
d9ce185f35 Dev fix: oApi backwards compatiblity issue 
- The oApi option wasn't being attached correctly to either the settings
  object or the instance, so plug-ins were breaking. This adds the alias
  back in.
 2013-07-26 15:55:40 +01:00
Allan Jardine
175240613b Dev fix: Fix dependency for bower 2013-07-25 22:19:41 +01:00
Allan Jardine
5e0e5ea5e4 Dev fix: Single column sort when not shift clicking the column 
- If you were multi-column sorting, and didn't have shift depressed and
  click on the first column in the sorting priority, the multi-column
  sort would be retained. Non-shift click on any of the other columns
  would reduce to a single column sort, so match here
 2013-07-24 15:09:37 +01:00
Allan Jardine
b7c6c98031 API: Update to extension API for camelCase support and tidy up 
- This is a fairly far reaching commit in that the DataTables.ext object
  is updated to primarily use camelCase, just like the rest of the 1.10
  API. The old notation is still available for compatiblity, but
  deprecated.

- While working in this area, I've made a number of updates:

  - .model.ext has been removed - that was redundant and not useful.
    DataTables.ext is where the plug-ins for DataTables will live and
    will be correctly publically documented as such.

  - Type based actions (detection, sorting and filter) now live in a
    `type` namespace to make it clear that they are type based.

  - Internal references to .ext updated to use the new parameters. We
    could use the old ones since they are fully backwards compatible,
    but I'd rather set the standard by using the modern ones.

  - JSDoc comments for .ext updated

  - Extension examples updated
 2013-07-24 14:51:01 +01:00
Allan Jardine
379a746034 Dev styling: Lighten selected paging button colour 
- Reversed the hover and active paging colours as the black was rather
  heavy by default
 2013-07-24 14:50:51 +01:00
Allan Jardine
36f720ca60 Dev fix: Volumne visiblity with scrolling enabled would misalign columns 
- When creating the new visiblity methods, I forgot to have the table do
  a scroll draw to have the columns align correctly for the header and
  body. This commit fixes that.

- Also update the column visiblity example to use jQuery events rather
  than DOM0 events.
 2013-07-23 10:47:54 +01:00
Allan Jardine
c822eefc4e Update: When Ajax loading data, now automatically ajust column sizing 
- Previously you'd need to use initComplete and columns.adjust() to take
  account of the data that was loaded by Ajax. Now this will be done
  automatically. It does mean a few more clock cycles, but I think
  that's a tradeoff that is worth it.
 2013-07-23 10:17:43 +01:00
Allan Jardine
c750514e98 API: Static methods updated for DataTables 1.10 camelCase 
- Alias the static methods to camelCase and hungarian varients:
  - versionCheck()
  - tables()
  - isDataTable()

- Small updates in styling of the static functions
 2013-07-23 10:17:32 +01:00
Allan Jardine
78e4d32e30 New: cache() methods for rows and cells. 
- I'd previously added columns().cache() which gets the cached
  information about filtering or sorting, but this rounds the API off,
  extending that also to rows and cells:

  - rows().cache()
  - row().cache()
  - cells().cache()
  - cell().cache()
 2013-07-22 17:58:08 +01:00
Allan Jardine
b75147b994 Dev: Sync to 5e444c7e09126c87965e69873fc5152fd097014b - the build script 
was having a few sync issues
 2013-07-22 17:57:14 +01:00
Allan Jardine
de1ec231cd Dev: Fix issue whereby you couldn't order with a click on a column after using order() API 
Fix: I've removed the third entry in the aaSorting array, as the issue
was that after using order() that entry wasn't present. It was a bit
confusing as well, so it is now replaced with a property (_idx on the
aaSorting entries) which indicates the current sorting index (in
asSorting) - and this property is optional. If not given, it is looked
up or 0.
 2013-07-22 16:04:01 +01:00
Allan Jardine
572e0ca9b9 Build: Usage for the make script 2013-07-22 15:28:06 +01:00
Allan Jardine
381f60858e Build: Package desciptors now held in a common location and built as 
part of the build process.
 2013-07-21 09:10:37 +01:00
Allan Jardine
182eadf213 API: Column selector now allows {integer}:visible 
- This is an alias of `{integer}:visIdx` which should be a little easier
  to remember.
 2013-07-20 10:50:35 +01:00
Allan Jardine
2023aafd99 Dev: Update CSS file with the updated formatted used in the source repo 2013-07-20 10:46:30 +01:00
Allan Jardine
e8c3a0b96a Dev: New .datatables-commit-sync which is going to be used by the 
build and commit scripts to keep the src and build repos in sync.

Dev: Update the dataTables main file to the latest build which was
accedentally committed. Just a couple of little dev fixes - no API
changes.
 2013-07-19 15:17:26 +01:00
Allan Jardine
3ed88a9c87 Repo: Starting the split of the src and build repos. 
- DataTables/DataTables is now going to be a build mirror of
  DataTables/DataTableSrc which will host the source core. Scripts will
  be used to build the generated files as there will be a number of
  these now (examples, JS, CSS, web-site documentation etc).
 2013-06-27 21:22:56 +01:00
Allan Jardine
cade2f9158 Merge pull request #205 from theUniC/master 
Added media/unit_testing to the "ignore" key
 2013-06-27 12:58:21 -07:00
Christian
be50e446cd Updated component.json to add the folder media/unit_testing to the 'ignore' key 2013-06-27 18:27:29 +02:00
Allan Jardine
e84b102815 Dev: Fix error in fnDeleteRow shim 2013-06-25 11:39:47 +01:00
Allan Jardine
07f0a51ca8 Dev: Fix error in the mapping update 2013-06-25 11:39:31 +01:00
Allan Jardine
b7bbe0e1ff Merge branch '1_10_wip' of github.com:DataTables/DataTables into 1_10_wip 2013-06-25 10:09:33 +01:00
Allan Jardine
65efee3554 Docs - The new XML container for the examples has been updated to have the content of the <info> tag as markdown rather than XML / XHTML. I think this will probably be easier long term. 2013-06-25 09:56:00 +01:00
Allan Jardine
338b5e81cf New: columns().nodes() and column().nodes() methods 
- Previously there was columns().cells() and column().cells(), but these
  were removed in f0a73ce due to the changes for the new top level
  cell() and cells() selector methods.

- This commit effectively re-instates those functions but under the
  `nodes()` name, matching the row and cell selection options. This is
  for completeness in the API.
 2013-06-25 08:27:49 +01:00
Allan Jardine
4e04d1e977 Build latest changes 2013-06-24 22:15:42 +01:00
Allan Jardine
85a845aed2 Dev: Remove asDataSearch - its gone now 2013-06-24 22:02:27 +01:00
Allan Jardine
c1eeed8e1a Dev - refactoring _fnMap to improve compression. Saves about 500 bytes 2013-06-24 11:32:50 +01:00
Allan Jardine
cddcafc92d Dev fix: Wasn't correctly creating the element to insert a header row 2013-06-22 15:58:58 +01:00
Allan Jardine
fd10532f94 Dev: Altering how sort classes are applied to be a draw callback 
- Previously the sort classes were being applied at the end of the
  _fnSort function, with a callback for when using deferred rendering
  and server-side processing (that was a performance hit for deferred
  rendering thinging about it, since it hapened twice).

- Now a single callback is used so sorting classes are applied only
  after the draw is done.
 2013-06-22 14:08:53 +01:00
Allan Jardine
01444af1a6 New: Header renderers 
- Rendering functions can now be provided for the header cells in the
  table, which will format HTML in the cells (note only the cells that
  are identified as the 'control' cell for the column have the renderer
  applied) and apply any classes needed (thus the renderers should
  listen for the 'sort' event).

- This is done to provide integration options for other frameworks and
  advanced styling controls. For example, FontAwesome could now easily
  be used to style a header with sorting icons sourced from the font.

- jQuery UI header rendering has been seperated out into its own
  renderer which is activated by the bJQueryUI initialisation option.
  This, along with the whole of DataTables' jQuery UI ThemeRoller
  support will be moved into a plug-in in 1.11 (it is very tempting make
  that change now, but one major version for the decprecated option is
  correct I think). This is the last part of the jQuery UI integration
  that needed to be decoupled from the DataTables core - it can now all
  be provided by plug-ins.

- This fixed issue #153

- Renderers still be to documented.
 2013-06-22 11:12:40 +01:00
Allan Jardine
81a76059ae Dev: Refactor _fnBuildHead to be a good deal tidier and smaller 
- Saves about ~300 bytes on the min file.
 2013-06-21 11:37:20 +01:00
Allan Jardine
95be4568eb New: Support for box-sizing: border-box; 
- Setting `box-sizing: border-box;` for table cells would cause
  DataTables to incorrectly calculate the size of the element when
  applying the scrolling draw. This is because jQuery's $().width()
  always returns the content width (taking into account box-sizing).

- One possible fix was to detect the box model used and switch between
  width() and outerWidth(), but a much better fix is to use
  $().css('width') as this does take into account the box-model and
  allows DataTables to draw the scrolling table columns correctly,
  regardless of the box model. It should actually also improve
  performance, since jQuery doesn't need to look the box model up
  itself.

- This fixes issue #157
 2013-06-21 09:45:29 +01:00
Allan Jardine
370a1e7f7a New / update: The data option, when used as a function, is given and 
can return only objects now.

- The new `ajax` option for 1.10 did previously allow both arrays of
  objects with name value pairs and objects, however, this change
  removes the option of using arrays of objects to try and simplify
  things. One of the most common questions in the forums is about name
  value pair objects, so this sidesteps that.

- The big benefit of doing this is that the data passed into `data()` is
  now very easy to manipulate. Rather than needing to loop over the
  array, you can just modify the parameter you want.

- It also allows an object to be passed back from the function,
  manipulated as desired. For example it is now super easy to nest the
  DataTables parameters in a sub-object:

	$('#example').dataTable( {
		'processing': true,
		'serverSide': true,
		'ajax': {
			'url': '../server_side/scripts/server_processing.php',
			'data': function ( data ) {
				return { 'myprop': data };
			}
		}
	} );

  This fixed issue #124.

- The parameters submitted to the server and those expected back are
  currently left as is. They will be updated to be camelCase at some
  point, but not yet sure if that will be for 1.10 or 1.11.
 2013-06-21 09:26:51 +01:00
Allan Jardine
76e572985d Build latest changes 2013-06-21 07:38:46 +01:00
Allan Jardine
a194116c42 Dev: Fix display class for the sort column. 
- Styles weren't being correctly applied becuase the selector was
  `table.dataTable.display.stripe` rather than just
  `table.dataTable.display` for the "correction" styles when multiple
  styles are enabled.
 2013-06-20 10:08:40 +01:00
Allan Jardine
bda2d25b5f Internal: Change the application of global filtering methodology 
- Reducing the complexity of how the global filter is applied in
  DataTables by removing the `asDataSearch` internal settings array
  which held information about each row's filtering data. This is now
  held on a per row basis in `_sFilterRow` which is built only when the
  data is invalidated. This should result in a small performance
  improvement as well as simplifying and reducing the code.

- Filtering is now implemented by simply checking the built regex
  against the `_sFilterRow` parameter for the display array (with a
  reset to master, as there was before, if needed)

- This also fixes an indexing issue that was present in the filtering in
  1.10.dev only
 2013-06-20 08:52:52 +01:00
Allan Jardine
1a880b9f46 Dev: All the latest changes now built 2013-06-19 17:34:49 +01:00
Allan Jardine
3827b96b7d New: jQuery UI integration now has the sorting_* classes applied to it 
for the header cells (matching the standard case, in addition to the
ui-state-default class for styling).

- This allows the developer to add styling information based on the
  sorting state of the cell.

- This fixed issue #17
 2013-06-19 17:32:24 +01:00
Allan Jardine
3d8a0d2f30 New: Add sHeaderTH class option to the classes to match the sFooterTH 
option

- This fixes issue 175
 2013-06-19 17:11:21 +01:00
Allan Jardine
3d1d64bc4e Dev fix: Call number formatter in the correct scope 2013-06-19 16:46:22 +01:00
Allan Jardine
0d8282c61a Dev fix: _pluck should check that what is is accessing exists 
- When using _pluck with deferred rendering, there were a number of
  errors due to the nTr element being undefined (that's what deferred
  rendering is all about of course). So the logic to check that pluck
  can pluck from a source object needs ot be added.
 2013-06-19 16:44:38 +01:00
Allan Jardine
0142172027 Dev fix: The sort classes were being applied regardless of sort and 
`sortClasses`
 2013-06-19 16:43:12 +01:00
Allan Jardine
d2755c4037 New - init option: classes option can be used to modify the classes 
object

- Previously to modify the class names that DataTables uses for its
  components you has to use $.fn.dataTable.ext.oStdClasses. Now you can
  use the `classes` initialisation option which will extend the classes
  object of the DataTable.

- This fixes issue #180.
 2013-06-17 12:05:07 +01:00
Allan Jardine
5cecbb5528 New: Automatic detection of HTML5 data-* attributes for orthogonal data 
- Building on the new ability of DataTables to work with element
  attributes as data sources for sorting and filtering, this commit adds
  auto-detection of the attributes 'data-sort' and 'data-filter' in DOM
  sourced tables.

- The first row in the table is used for this auto-detection and the
  built mData object assigned only when it is found to be the default
  for the column (i.e. the column index). So any custom value is
  retained and thus if you want to use a custom value you need to build
  the attribute querying object manually (I think the majority of uses
  will not need this!).
 2013-06-17 11:35:06 +01:00
Allan Jardine
0f2cc15217 New: HTML5 data attribute support. data-* attributes can now be used to 
source orthogonal data for filtering, sorting and type detection data.

- In HTML5 the data-* attributes can be used to add semantic data to an
  HTML page, which a user will not see, but the scripts on the page can
  interact with. DataTables now has the ability to use these attributes
  (actually any attribute can be used) as a data source. Previously DOM
  sourced tables always used just the content of the cells for all data
  interaction, but this can provide advanced controls in just the same
  way that Javascript / Ajax sourced data can do orthogonal data in
  DataTables.

- A typical use case is to provide numeric sorting information for
  complex formatted dates that the browser doesn't understand with
  Date.prase().
 2013-06-16 09:49:18 +01:00
Allan Jardine
b353431cbe Dev: Documentation update to indicate more clearly that dataSrc can be 
used as a transform function
 2013-06-16 09:48:48 +01:00
Allan Jardine
3edd19ed9d Dev: Reduce code footprint for the Ajax get function 2013-06-15 09:53:39 +01:00
Allan Jardine
11591f4894 New - CSS: Add 'display' class to the options list. 
- 'display' is a short cut for using the classes: 'hover stripe
  row-border sort-column'
 2013-06-15 09:22:16 +01:00
Allan Jardine
fe390220cf Dev: Completing the work on the new SCSS stylesheet for DataTables 
- The SCSS stylesheet is now feature complete, and the
  jquery.dataTables.css file found in the repo is now directly generated
  from that SCSS file. The SCSS online compiler will run the stylesheet:
  http://sass-lang.com/try.html .
 2013-06-15 08:27:18 +01:00
Allan Jardine
3cabe9a6db New: Styling features can be added by CSS class. 
New: SCSS base stylesheet with variables for colours
New: Pagination styling

- DataTables now has the ability to selectively enable different style
  types by applying different class names to the host table. The options
  supported are:
    - hover - show a hover effect over rows
    - stripe - show odd/even row stripes
    - row-border - show a vertical border between rows
    - cell-border - show a border around all four sides of a row (only
      one of row-border or cell-border should be used)
    - sort-column - highlighting of the sorting column.

 I will be adding another class along the lines of `display` which will
 enable 'hover, stripe, row-border and sort-column' (although this is
 not yet implemented).

 The reason for doing this is to encorage developers to style their
 DataTables more their own way, but making it easier to enable the
 features they want.

- To that end, the DataTables stylesheet will be generated from a SCSS
  template in future. The SCSS template is included in this comment
  (although the generated stylesheet is not yet committed). This allows
  colours to be changed which a trivial amount of effort, while still
  being able to get row highlighting etc, thanks to SCSS's colour
  functions.

- Pagination styles have been updated to fit in with the new styling of
  the DataTable.
 2013-06-14 12:25:35 +01:00
Allan Jardine
0fb58706d1 Update to jQuery 1.10.x 2013-06-14 09:22:16 +01:00
Allan Jardine
3ab5af5ff5 New: Rewrite of how pagination is handled to make it hugely more 
flexible and simple to actually use.

New: Two additional built-in pagination types: 'simple_numbers' and
'full'.

Update: 'two_buttons' type pagination (previous default) renamed to
'simple'.

New: Default pagination type is now 'simple_numbers'.

New: Introducing renderers to DataTables (something that will play an
important part moving forward).

New: Simplified pagination button classes to simply:
 * "sPageButton": "paginate_button"
 * "sPageButtonActive": "current"
 * "sPageButtonDisabled": "disabled"

- The basis for this commit is a restructuring of how pagination
  plug-ins work in DataTables, whereby the pagination plug-in simply
  returns an array of button types which should be shown. These are then
  actually displayed by the renderer. This seperates the logic for which
  buttons to show from the display logic, making it much easier, both to
  customise which buttons will be shown, and for integration plug-ins to
  customise the display of the buttons (since they don't need to
  replicate the button calculation logic). This change allows us to
  introduce two new built-in pagination types to DataTables with minimal
  size cost. Indeed, this change as a whole reduces the compressed
  DataTables size by 2.5K (additional functionality, simpler and smaller
  - what's not to like!?).

- Pagination button classes in DataTables were a mess before, with
  different classes used for the two built in types, with the additional
  complexity of only one of the defined class options being used, rather
  than concatinating the classes based on the type. This was bonkers and
  a barrier to new users styling the form as they wanted. Reducing to
  just three class options, and having the active and disabled options
  added to the base class makes it MUCH simpiler. This could hit
  backwards compatiblity for those who had styled the mad old style, but
  it would have been crazy to keep it while writing the rest.
 2013-06-09 20:16:50 +01:00
Allan Jardine
e36609713c Fix issue #200 - images: sort_asc_disabled image was the wrong colour 2013-06-01 10:07:30 +01:00
Allan Jardine
a070ccc2b3 Build - latest changes 2013-05-29 09:13:49 +01:00
Allan Jardine
16bb9b0516 Dev fix #190 - When rows have been invalidated, a full filter is required 
- If a row has been invalidated, then we need to perform a full
  re-filter, so we need to pass this invalidation information back up
  from the invalidation checker to the filtering functions.
 2013-05-29 09:12:27 +01:00
Allan Jardine
748f8634cd Dev: All the latest changes built into the main file 2013-05-26 19:52:23 +01:00
Allan Jardine
86fd198fdd Fix - thread #14114: State saved table breaks if columns reduced 
- If the number of columns in the table were reduced, then the column
  filter state that was saved would be incorrect since it would define
  more columns that there were. Equally sorting could potentially be
  done on a column that no longer exists.

- There were a few work around in the code already to try and address
  this a bit, bit not satisfactorily as seen by thread 14114. The real
  issue was that the columns were being detected after the state was
  being loaded - ideally we want to load state after the columns had
  been detected and throw away the state saved if the columns did not
  match since the table might be entirly different.

- This is done by a little bit of reordering in the constructor, and
  actually simplifies the code a bit.
 2013-05-26 19:48:11 +01:00
Allan Jardine
ab7e797965 Dev fix: Loading from an initial draw position was broken 
- I had inadvertantly broken the ability to set an initial draw position
  using `displayStart` or state saving with the small refactoring of
  _fnDraw and fnDisplayEnd. fnDisplayEnd must be called with
  settings._iDisplayStart set, which is now done simply by changing the
  order of calling a little.
 2013-05-26 19:44:21 +01:00
Allan Jardine
b7915d7cf6 New: Initialisation option - sortMulti. Allow / disallow multi-coloumn sorting 
- Multi-coloumn sorting might not be a feature that everyone wants, so
  the ability to disable it is added in this commit.

- This fixes issue #13.
 2013-05-26 10:55:07 +01:00
Allan Jardine
20949ae51a New: HTML5 data-* attributes for the TR can be set using DT_RowData 
property

- Extending the funtionality of DT_RowId and DT_RowClass, this commit
  adds DT_RowData which utalises jQuery's `$().data()` method to set
  HTML5 data-* attributes, which can be useful for additional meta data.

- This is some what complimentary to using objects as the data source
  where you could just use row().data() to get the data, but this is
  effectively an orthogonal way of getting the data and might be useful
  for existing Javascript libraries.

- It should be noted that the data-sort and data-filter work I'll be
  doing for v1.10 shortly will not interact with this method, that will
  be DOM sourced data only, while this is Ajax / Javascript based only.
  However, if you do want to use data from this source for filtering /
  sorting, its easy to do with `data` - `data: 'DT_RowData.sort'` for
  example.

- This fixes issue #45.
 2013-05-26 10:40:29 +01:00
Allan Jardine
2be56a63fc Dev: Include row details API file 
- Had split the row details out into its own file a little while back,
  since it is 100% self contained now, but hadn't committed the file!
  Here is it now.
 2013-05-26 09:59:15 +01:00
Allan Jardine
4f1d05b65f Dev: Removing trailing white-space 
- Non-functional change - just to tidy up the code styling a bit
 2013-05-26 09:58:32 +01:00
Allan Jardine
cb3174c29e Fix: Remove dataTable class from the host table on destroy 
- Fixes issue #188
 2013-05-26 09:25:53 +01:00
Allan Jardine
7f1dfc2b38 Update: Provide link to technical note explaining errors for DT logged 
errors

- A lot of posts in the forum are questions such as "what does the
  invalid JSON response" error mean, or "how to fix the unknown
  requested parameter error". To address these, rather than having them
  answered individually in the forum, I'm going to write a series of
  technical notes for DataTables (getting started, how to use columns
  etc) and as part of those, each error that DataTables can fire off
  will have a technical note explaining in deatil what the error means.

- Example:
   DataTables warning: table id=example - Invalid JSON response. For
   more information about this error, please see
   http://datatables.net/tn/1

- This commit puts the required logic in place. The technical notes
  don't exist yet, but they will soon. They will be:

1 - Invalid JSON response
2 - Non-table node initialisation ({this.nodeName})
3 - Cannot reinitialise DataTable
4 - Requested unknown parameter {param} for row {idx}
5 - Unknown paging action: {action}
6 - Possible column misalignment
		- The table cannot fit into the current element which
		  will cause column

- This also has the advantage that the errors in the DataTables code can
  be a little smaller. Around 500 bytes saved.

- This fixes issue #173
 2013-05-26 09:15:21 +01:00
Allan Jardine
1b8f4608ac Update: Allow targets (aTargets as it was formally known) to be a 
non-array element

- If found to be something other than an array, it will treat it as if
  it were an array with a single element in it, of the value given.
 2013-05-26 09:05:35 +01:00
Allan Jardine
34f86db782 Build update - all the latest changes, compiled into the source file. 2013-05-25 08:21:55 +01:00
Allan Jardine
f9179058df Update: Deprecate old API. update api() method. 
- With the new API that is being introduced in v1.10, the old API
  (fnUpdate, fnAddData etc) is being deprecated and retired. It is now a
  shim layer calling through the new API, rather than duplicating the
  logic of the calls, but is still provided for backwards compatiblity.

- It is _strongly_ recommended that you start to use the new API from
  this point in - very certainly for new projects.

- The api() method, is not deprecated, it is new in 1.10 and provides a
  way to get access to a DataTables API instance from the jQuery host
  object, if the table is initlaised with `dataTable()` (rather than
  `DataTable()` which does give you the API instance. It has a single
  option which is used by the old API's shim layer to allow it to use
  the iApiIndex option to get the context to be used.
 2013-05-25 08:17:13 +01:00
Allan Jardine
22f350becd Dev fix: Fix name conflict and adding of TR elements 
- There were two functions called _fnGetRowData, which were conflicting

- The $().map doesn't execute with the scope of the element, need to
  pass the element through to the get data function correctly.
 2013-05-25 08:15:35 +01:00
Allan Jardine
f7c92e1270 Dev fix: rows.add() API was trying to get the row index from the wrong 
parameter.

- Simple fix, just had the array index in the wrong location.
 2013-05-25 08:14:21 +01:00
Allan Jardine
0b0fc5fe04 Dev fix: Fix new filtering API which was incorrectly assinging undefined 
values to the filtering operators
 2013-05-25 08:13:11 +01:00
Allan Jardine
73d36854e3 Dev fix: Fix flatten, which was returning an array rather than an API 
instance
 2013-05-25 08:12:44 +01:00
Allan Jardine
dd36646723 Dev fix: Fix case where trying to select row index 0 
- row(0) was failing due to a logic error in the selector, which was
  ignoring the 0, or rather, treating it like an empty selector.
 2013-05-25 08:11:46 +01:00
Allan Jardine
bea47e6470 New: columns and cell index() API methods 
- The row()/rows() methods have index methods, so it makes sense that
  the column(s) and cell(s) methods also have index methods to get the
  raw information out of the table. Rather than shying away from the
  indexes in 1.10, as has been done with the pervious versions of
  DataTables, 1.10 will embrase them as first class citizens.

- New methods:
  - columns().index()
  - column().index()
  - cells().index()
  - cell().index()
 2013-05-24 07:57:41 +01:00
Allan Jardine
01cc744b00 New: new data() method 
- It is possible at the moment to use rows().data() to get the data for
  the table, you can use rows().data( { order: 'index' } ); to get the
  data in index order - I suspect a reasonably common use when working
  with the data set (at least, I use it that way!) and its a but clumsy
  to write that way, particularly compared to the old fnGetData method.
  So the new data() method is a short cut for `rows().data( { order:
  'index' } ).flatten()` to get the data set for the host table(s).
 2013-05-23 21:58:44 +01:00
Allan Jardine
8e583a51b3 New: cells() and cell() API methods now accept a cell selector and options 
- For consistency and completeness, the cell() and cells() methods now
  accept their own cell selector option (rather than just rows and
  columns) which is a jQuery selector, or no selector at all for all
  cells. Additionally it allows an options object to be passed in, to
  allow configuraiton of the order of data etc.

- The cells() method now has these calling options:
  - cells() - all cells
  - cells( opts ) - option configuration
  - cells( selector ) - cell selector
  - cells( selector, opts ) - cell selector + options
  - cells( rowSelector, columnSelector ) - row + column selector
  - cells( rowSelector, columnSelector, opts ) - row + column selector +
    opttions

- The cell() method as the same signature.
 2013-05-23 19:07:30 +01:00
Allan Jardine
a30468a1f4 API: rows.add() and row.add() return a rows() (or row()) extended object 
with newly added rows

- Looking at fnAddData, and about to replace it, I realised that
  fnAddData returned the indexes of the newly added row while the new
  methods didn't. It makes sense for row.add() to return a row()
  extended object with the newly added rows so row().node() etc can be
  used. Also the indexes are in the inst, so that information is also
  available. Likewise is done for its plural counterpart.

- Did consider creating an `augment` static method for the API, and
  might yet do this, but this is the only place to use it at the moment.
  Possibly it might be useful for plug-ins, but before adding, lets see
  how the new API is used.
 2013-05-22 12:16:19 +01:00
Allan Jardine
fddc869390 API: Promote row().index() to work for plurals as well 
- With the new plural option for registering API methods, there is no
  harm in adding rows().index() to get the indexes of the selected rows.
 2013-05-20 08:55:42 +01:00
Allan Jardine
0ab8eb7ed0 Internal: Small enhancement to registerPlural to correctly deal with 
same instance returns.
 2013-05-20 08:45:12 +01:00
Allan Jardine
f5286dc130 Internal: Create registerPlural method to provide an easy way of working 
with plurality

- There are four groupings of plural / singular methods in the new API:
  table(s), row(s), column(s) and cell(s). We need to provide similar
  methods for each, often leading to code duplication. To help reduce
  this code duplication I've created a new `registerPlural` method which
  allows both the singular and plural to be derived from a single
  function automatically. The plural form is given and wrapped up by a
  container function which extracts a singular return.

- Note that not all singular methods can use this approach, for example
  row().data() provides extra functionality over rows().data() in that
  it can be used as a setter as well as getter.
 2013-05-20 08:37:19 +01:00
Allan Jardine
103e997db8 New: column() API methods for working with a single column 
- To round off the API, this commit adds a column() method, for working
  with a single column, as with row/rows, cell/cells and table/tables.

- New methods:
  - column() - Column selector
  - column().data() - Get column data
  - column().header() - Get the column header cell
  - column().visible( set ) - Get / set the column visiblity
  - column().order( dir ) - Order the table by this column

- Note that I haven't implemented column().search() yet as I'm sure
  there must be a better way of dealing with the singular functions...
  Need to look at the four groups a bit more before this (and then the
  API :-) ) is finalised
 2013-05-19 15:53:54 +01:00
Allan Jardine
1b4688cdf3 API: Consistency of data return for columns().data() 
- The columns().data() method was flattening the returned array. While
  possibly okay on its own, that doesn't match the behaviour of how
  rows().data() works, where each row is an entry in the array, rather
  than the array being flattened. As such I've changed columns().data()
  to work work in the say way, for each column you select, you get an
  entry in the api instance - an array with the data for the that
  column.

- To allow for hte fact that some may want to work with the flattened
  data, I've added a `flatten()` method to the instance base, which is
  basically a shortcut call to `reduce`.
 2013-05-19 09:54:46 +01:00
Allan Jardine
f0a73ce595 Dev: Removing row and column .cells() methods 
- Now that we have the cells() / cell() methods, with the ability to
  select based on column and row, and the ability to get the whole row
  or column cells, the TD get methods on row / rows / columns were
  redundant and I think should be removed for berevity. It could also
  get confusing with the chaining since there are nested and top level
  methods with the same name.

- Removed:
  - rows().cells()
  - row().cells()
  - columns().cells()
 2013-05-19 08:49:43 +01:00
Allan Jardine
1894b96a42 New: cell set data API method 
- New API call:
  - cell().data( set ) - Ability to set data for a single cell. Will
    invalidate the whole row.
 2013-05-19 08:47:33 +01:00
Allan Jardine
1590f41525 New: cell invalidation methods 
- New API methods:
  - cell().invalidate() - Invalidate a single cell
  - cells().invalidate() - Invalidate multiple cells

- Note that the invalidation is actually row based, rather than cell
  based - i.e. the whole row is invalidated. This may change in future
  versions of DataTables, but I'm concerned that it would add a lot of
  code for little enhancement.
 2013-05-19 08:43:45 +01:00
Allan Jardine
643930c33d Merge pull request #196 from timtucker/patch-38 
Remove index from map call in pluck
 2013-05-18 11:00:12 -07:00
Allan Jardine
623b24329a New: New cell based API methods 
- New API methods:
  - cells( rowSelector, columnSelector, opts ) - Cell selector
  - cells( ... ).nodes() - Get the nodes for the selected cells
  - cells( ... ).data() - Get the data for the selected cells
  - cell( rowSelector, columnSelector, opts ) - Single cell selector
  - cell( ... ).node() - Get the cell node
  - cell( ... ).data() - Get the cell data

- There was a bug in `_selector_first` whereby it wasn't correctly
  reducing the set - was gatting away with it before, because it was
  reducing to a single element array, which has a toString() method
  which allowed it to appear to work for integers.
 2013-05-18 18:56:04 +01:00
Allan Jardine
903d1219f3 New: table() API methods 
- New API methods:
  - table() - select a single table
  - table().node() - get the table node for the table

- To be honest, these methods are not likely to be used particuarly
  often, so I think they are fairly low priority, but they could provide
  useful, and it is a public way to get the table node.
 2013-05-18 17:39:03 +01:00
Tim Tucker
a74348f56a Remove index from map call in pluck 
Pluck isn't using the index, so it's safe to remove the ", i" from the function call passed to map.  Not much, but at least a few fewer bytes.
 2013-05-18 09:19:34 -03:00
Allan Jardine
d7b12bd83b New: Invalidation and data set methods. 
- New API methods:
  - rows().invalidate() - Invalidate the matched rows
  - row().invalidate() - Invalidate the matched row
  - row().data( set ) - Set the data to use for the matched row

- This involves building upon the invalidation work done in the last few
  commits and creating an invalidation function. This new function will
  mark the cached data as invalid for re-reading by the sort and
  filtering methods (this will need to be abstracted into modules in
  1.11, but there is no infrastructure for that yet - that's what 1.11
  is all about). Additionally the invalidation method will update either
  the data held by DataTables (read from the DOM), or update the DOM if
  the data source was not the DOM. A flag allows an override to state
  the direction, although I think that generally speaking you might not
  want to use the override (you might nuke parts of your data source
  object if you read from the dom for example).
 2013-05-18 11:49:48 +01:00
Allan Jardine
fbc28624ac Internal: Filtering invalidation 
- Like sorting, for the new API we need to be able to invalidate data
  held for filtering in a fairly simple manner (it could be done before,
  but it was messy, see fnUpdate - you need to call the methods in the
  parent function, rather than just invalidating). This commit adds that
  ability to DataTables.

- Performance improvements:
  - The big one is that filtering data is only obtained and formatted
    when invalidated, rather than every full filter now.

  - Regular expressions for newline and HTML matching are variables,
    rather than redefined on every call.

  - DIV for reading text version of an HTML formatted string is a
    variable, rather than being recreated on every call.

- Type based formatters have been moved into the extension API ('string'
  and 'html'). They can be overridden there if wanted. Allows
  simplication of the call for the formatter.

- Fixes issue #158 as part of the refactoring.

- Smaller by 22 bytes (compressed)... Likely once invalidation is fully
  implemented that will be swallowed up...
 2013-05-17 12:00:19 +01:00
Allan Jardine
6a6eed2db3 Internal: Refactor sorting classes for size and efficiency 
- Refactoring _fnSortingClasses to be more efficient in how it operates
  and to compress better. This is done by looping first over the
  elements to have their classes removed, and then looping over only
  those to have them added. Previous all columns were operated upon.
  Also using _pluck and that fact that all cells fromt he tbody are
  stored makes the code much smaller, more readable and compressable.
  Only 0.5KiB saved in the refactor, but every little helps...

- Restored column sorting classes functionality that had been disabled
  earlier in the 1.10 development sequence.
 2013-05-17 09:48:21 +01:00
Allan Jardine
9f1cae4528 Internal: Refactor sort listener 
- Think this code was in DataTables 1.0 and has been relatively
  untouched! A refactor allows it to be more readable and smaller when
  compressed (about 450 bytes saved)
 2013-05-16 18:13:37 +01:00
Allan Jardine
682aa73d56 Internal: Refactor ARIA sorting attributes 
- How the Aria sorting attributes were controlled, was ugly! Was in bad
  need of a refactor, which has now had. About 150 bytes (compressed)
  saved.
 2013-05-16 17:37:34 +01:00
Allan Jardine
4913226456 Internal: Refactoring the sort functions for invalidation 
- invalidation is going to play an important part in the new API, with
  the ability to invalid the cached data for sorting, filtering, display
  etc so we need to be able tos upport this in the core.

- In fairness the sorting didn't actually need invalidation because it
  would always get data on every sort, which is bad for performance -
  proper invalidation and caching will resolve this. Which is what has
  been implemented here.

- I had expected (hoped) to be able to save a bit of space in the
  refactor, but only aorund 100 bytes (compressed) saved, which will
  probably be lost when the invalidation is fully implemented in the
  API. Still, better performance, tidier code, and no extra space...

Fix: Sorting classes now show multi column sorting when a column is
defined to sort over multiple columns (sortData). Previously it would
only show the first column.
 2013-05-16 17:16:04 +01:00
Allan Jardine
67d19ac9e4 Dev: Fix issue with the last commit which introduced an error witht he 
classes calculated for display
 2013-05-16 17:15:14 +01:00
Allan Jardine
b12ffb1dab New: row.add() and rows.add() methods for the new API 
- Two new methods for the new API to allow new data (rows) to be added
  to the table.

  - row.add() - Add a single row to the table. object, array, jQuery
    object or TR node can be passed in.

  - rows.add() - Add one or more rows to the table from a source array.
    An array or jQuery object must be passed in, containing objects,
    arrays, or TR nodes (or any combination thereof).

- Should be noted that this is iterated over all tables in the current
  API context, so care should be taken when adding a node to multiple
  tables, since it will be moved between them. Equally, when adding
  data, the original object reference is retained, so changing it in one
  table will change it in all!

- These two methods effectively replace fnAddData from the old API.
  fnAddData had a few issues with distingusihing a multiple row add and
  a single row add, since arrays could be used for both (indeed, it
  simply couldn't cope with something like using a single integer as
  reference for a data object, which can now be done in 1.10). The two
  new methods sidestep this problem by providing one method for multiple
  row add, and another for single row add - the developer needs to know
  that the plural has meaning here!
 2013-05-16 10:26:08 +01:00
Allan Jardine
5548d09ecd Merge branch 'patch-35' of https://github.com/timtucker/DataTables into 1_10_wip 2013-05-15 15:09:23 +01:00
Allan Jardine
89b2404511 New: columns().order() method for the new API 
- I think it makes intuative sense to be able to tell the table to order
  on the columns given by the selector, which is exactly what this
  method does.
 2013-05-15 12:02:57 +01:00
Tim Tucker
aa70a483d4 Make fewer calls to $.inArray when assigning sort classes 
Only call once each to check to see sort ascending / sort descending is is active.  (And only check for the descending class if we didn't find the ascending class)

Should also lead to smaller minified code.
 2013-05-15 07:58:25 -03:00
Allan Jardine
d9119fc3cb New: destroy() method for the new API 
- Addition of a destroy method for the new API, effectively replacing
  fnDestroy from the old API.

- The functionality is identical to fnDestroy, but it has been
  refactored to make better use of jQuery and allow for better
  compression (should be 1/4 - 1/2 KiB saved)
 2013-05-15 11:34:40 +01:00
Allan Jardine
c211a74079 Dev: Tidy up new settings() method, doesn't actually need an iterator 2013-05-14 08:52:50 +01:00
Allan Jardine
d051a17926 New: $, clear, settings, on, one and off methods for new API 
- $ - perform a jQuery selector on the nodes in the table (matching the
  $ method from the old API).

- clear - clear the table completely (replaces fnClearTable).

- settings - get an array of the settings objects for the tables used in
  the API instance.

- on - jQuery event listener proxy. Use for table specific events
  ('draw', 'xhr' etc).

- one - jQuery event listener proxy (single event).

- off - jQuery event unlistener proxy.
 2013-05-14 08:47:06 +01:00
Allan Jardine
30c6a45067 Dev: Refector _fnGetDataMaster and _fnClearTable to be shorter and clearer 2013-05-14 08:46:21 +01:00
Allan Jardine
bd804fdcb8 New: child row API methods for showing / hiding child rows 
- Showing and hiding details about a row in a child row is very useful
  and proven to be a popular part of DataTables. This commit provides
  that ability in the new API and extends it. It also fully modularises
  the child rows aspects, so it could be removed from the core without
  effecting any other aspects (it may be moved into a seperate file in
  future).

- This will effectively replace fnOpen, fnClose and fnIsOpen

- Added methods:
  - row( selector, opts ).child()
  - row( selector, opts ).child( str, class )
  - row( selector, opts ).child( str, class ).show()
  - row( selector, opts ).child( str, class ).hide()
  - row( selector, opts ).child.show()
  - row( selector, opts ).child.hide()
  - row( selector, opts ).child.isShown()

- Note that unlike the old API you need to specify the data first, and
  then use the show() method to show the child row. This allows the
  details rows to be configured before they are actually shown.

- Additionally multiple child rows can be attached to a parent (pass
  `str` (from above) as an array to use this feature. API plug-ins could
  use this ability to show fully nested tables.

- Not just a string can be passed in now, but also a TR node which will
  actually be used (rather than put into a nested row), any other type
  of node (which will be inserted into a wrapper row/cell) or a jQuery
  object.
 2013-05-07 17:56:07 +01:00
Allan Jardine
ed34f7972d New: row() methods - operate on a single row. 
- The rows() method allows operations on multiple rows with a single
  call, this new singualr option, `row()` performs operations on a
  single row, allowing fine grain control and easy access to certain
  aspects. For example. `rows().data()` will return an array of data
  objects, even if there is only one row as a result of the selector,
  while `row().data()` will return the data object directly.

- Impletemented thus far:

  - row()
  - row().node()
  - row().cells()
  - row().data() - get only as of yet
  - row().index()
  - row().remove()
 2013-05-06 07:14:43 +01:00
Allan Jardine
955eb2cd99 Internal: Update the the filtering input control to update itself on filter 
- Previously it was the domain of the filtering caller to update the
  global filtering input element (fnFilter or the keypress handler
  specifically), but in keeping with the drive towards modularity, it
  should be the control itself that updates when needed.

- This is done by listening for the `filter` event from the table and
  updating the display as needed. It is a touch less efficent since the
  same value might be written as what is already there, but it reduces
  code size and complexity.
 2013-04-29 07:58:53 +01:00
Allan Jardine
d7058eb45d New: search() and columns().search() API methods 
- Ability to filter the table through the new API.

- This effectively replaces the fnFilter method of the old API.

- Note that one capability which has been removed from the old API is the
  ability to not show the new filter on the filtering input elements. I
  can't see any use for that feature to be honest, so it has been
  dropped. The filtering inputs always show the global filter state now.

- Additionally, note that we've been forced to call this `search` here
  rather than `filter` since there is a `filter` method for the API
  collection instance. This might be revisted before release.
 2013-04-29 07:51:41 +01:00
Allan Jardine
2b0a321dd2 New: rows().remove() API method 
- Remove (delete) selected rows from the table.

- This effectively replaces the fnDeleteRow API method of the old API.
 2013-04-29 07:50:43 +01:00
Allan Jardine
a767c05f1d New: column.index() API method for translating column indexes 
- The fnVisibleToColumnIndex and fnColumnIndexToVisible plug-in API
  methods for the old API were very useful for transforming the visible
  column index to the actual index, and the return. This adds that
  capability to the new API.
 2013-04-28 18:31:15 +01:00
Allan Jardine
7b6ebd63de New: columns.adjust() API method. 
- Recalculate the "ideal" column sizes for the table. Might want this
  after a column visiblity change for example

- Replaces the fnAdjustColumnSizing method.
 2013-04-28 10:23:43 +01:00
Allan Jardine
bbb423ee75 New: API method columns().visible() - get / set column visiblity 
- This effectively replaces the old fnSetColumnVis method (a shim will
  be put in place along with the shim for the rest of the old API). It
  has added get abilities, and the option, like the rest of the new API
  to work on multiple tables / columns with a single call depending on
  the context and selector.
 2013-04-28 10:14:04 +01:00
Allan Jardine
8e1bf972d4 New: columns().data() API method - get the data for the selected columns 2013-04-28 09:05:03 +01:00
Allan Jardine
68ea9af828 New - rows().cells(), columns.cells() API methods. 
- row options for column selector

- Selectors (table, rows and columns) now held in a single file, sharing
  structure. A more unified API is used, with row options also being
  allow for columns, through the use of the second parameter for the
  columns() method, which will effect how a column function can act upon
  rows (for example, the order of the rows when getting data or nodes).

- Dev: tables() is no longer an iterator - using an `iterator()` method
  with options which are suitable for the different types of iteration
  the API needs.
 2013-04-28 08:53:05 +01:00
Allan Jardine
638a1f6225 Fix #186 - Examples - fix typo 2013-04-23 17:15:29 +01:00
Allan Jardine
b1b4b58a9a Internal - remove _fnGetTrNodes 
- Not used anywhere outside the old API, which is going to be shimed to
  the new one, so we can simply drop it.
 2013-04-23 10:21:48 +01:00
Allan Jardine
01bc1f728d Internal - store cell reference | remove _fnGetTdNodes 
- We use the cell nodes form the table body in a number of places, and
  increasing with the new API, so rather than just storing a reference
  to the hidden cells, we should just store a reference to all cells and
  use them, cleaning up a number of other areas - in particular
  _fnGetTdNodes which is no longer needed

- Should do something similar for _fnGetTrNodes

- Disabled sort classes for the moment as that can be rewritten to be
  more efficient. It did use _fnGetTdNodes, but doesn't need to now.

- API fnSetColumnVis and fnUpdate will be broken at the moment, until
  merged into the new API.
 2013-04-23 09:50:59 +01:00
Allan Jardine
bb75f22233 Dev fix - Inverted logic for the information string 2013-04-23 09:50:23 +01:00
Allan Jardine
31b521291c Merge branches 'master' and '1_10_wip' into 1_10_wip 2013-04-23 09:36:40 +01:00
Allan Jardine
a3b90fd0cc New: API methods rows().nodes(), rows().data() and columns().header() 
- rows().nodes() - Get the TR nodes for the selected rows
- rows().data() - Get the data for the selected rows
- columns().header() - Get the header cells for the selected columns

- This also introduces the `iterator` method to the API instance, which
  can be used to loop over selected columns / rows, for the context
  (tables), returning a flat array / API instance.
 2013-04-23 08:49:06 +01:00
Allan Jardine
c53806feee Fix #184 - examples - typo in y scrolling example 2013-04-23 06:56:58 +01:00
Allan Jardine
b3509a84e8 Fix #183 - examples - typo in sDom example 2013-04-23 06:55:49 +01:00
Allan Jardine
6a5415fe34 Fix #182 - examples - typo in multiple tables example 2013-04-23 06:54:22 +01:00
Allan Jardine
fcc7d4a78d Internal - refactor of table information control 2013-04-22 18:56:20 +01:00
Allan Jardine
be611d0db8 Update: Header for the minified file has been reduced to save a bit of space 2013-04-22 18:55:50 +01:00
Allan Jardine
cdd82a9d0e Internal - refactor processing display 
- Simple refactor into the more mordern 'style', only saves about 100
  bytes, but the code looks much cleaner.
 2013-04-22 09:09:14 +01:00
Allan Jardine
414abff7e6 Dev - fix attributes for empty row weren't being applied 2013-04-22 09:08:49 +01:00
Allan Jardine
73e265218e Internal - Small refector of fnDraw 
- Use variable aliases to allow better compression
- Replace body append code with jQuery code. Much simpiler, and only
  a very small performance hit (around 1mS for a draw of 100 records).
 2013-04-22 08:58:28 +01:00
Allan Jardine
63d9f3f21e Internal - Refactor 
- Remove the settings._iDisplayEnd parameter finally, using only
  fnDisplayEnd() is needed, and the end point is calculated on-the-fly
  when needed (which is not often and it is not expensive). This also
  means that the internal method `_fnCalculateEnd` can be dropped
  completely.

- Refactoring the empty cell in _fnDraw
 2013-04-21 20:02:23 +01:00
Allan Jardine
09761bfdef New - Rows and Columns selectors 
- columns() and rows() introduced with their selector components. They
  don't have any additional funtionality at this time other than just
  being able to selector rows and columns (returning arrays of indexes),
  but the principle is now in place, and the additional functions can be
  fleshed out.

- Moving to use a work in process branch, as some aspects of DataTables
  may break as this work continues, and certainly the files etc are all
  in flux
 2013-04-21 16:37:38 +01:00
Allan Jardine
a077d24e6a Internal - Small change to the new order() method to remove redundant code 2013-04-20 12:04:18 +01:00
Allan Jardine
2e278b0285 New: Ordering functions for the new API: 
- order() and order.listener() added (to replace fnSort and
  fnSortListener) from the old API.

- Note that the name `order` is selected to not conflict with the `sort`
  method of the API object, which can be used to order the sort data
  held in the collection.

- The `sort()` method is expanded over the abilities of fnSort to allow
  multiple different forms of input (column + direction, 1D array, list
  of 1D arrays or a 2D array).
 2013-04-20 12:00:16 +01:00
Allan Jardine
aa76a6baf5 New: Add ability to do a static redraw to the new API 
- draw() and ajax.reload() can now have `false` passed as their first
  (and currently only) parameter, which instructs DataTables to do a
  'static' redraw (i.e. not to reset the pagination).
 2013-04-20 11:12:08 +01:00
Allan Jardine
edfbf7491d Internal - altering how a draw is called 
- Previously the master sort and filter functions would perform a draw,
  but this was a bit redundant, complex and didn't allow multiple
  changes to be queued up before a new draw was performed. The new API
  will allow this ability, so we need to allow it in the core as well.
  You can now do a sort, and it will be performed internally, but not
  actually drawn until the redraw function is called. This makes a full
  redraw much simpiler, and has the benefit that a standing redraw is
  now relatively trivial since it is all performed in a single place.
 2013-04-20 10:18:52 +01:00
Allan Jardine
e014d9272f New: ajax API methods: 
- Introducing several methods which will control the ajax aspects of
  DataTables through the API:

  - ajax.json() - get the last JSON returned from the server
  - ajax.reload() - reload from JSON source
  - ajax.url( [url] ) - get / set the Ajax URL
  - ajax.url( url ).load() - load data from new URL after a set

- Note that this effectively replaces the old fnReloadAjax plug-in which
  was quite popular.

- Not yet fully tested - further work required.
 2013-04-20 09:10:46 +01:00
Allan Jardine
15588d9e41 New - api methods: page(), page.info(), page.len(), draw() 
- Paging control methods for the new API:
  - page() / page(n) - Get / set the current page
  - page.info() - Get information about the table's paging state
  - page.len() / page.len(n) - Get / set the page length

- Rewrite of core.page.js and core.length.js to be more space efficient.
  The functionality is identical to before, but now compresses much
  better (796 byte saving). The new paging API methods add only 614
  bytes (compressed), so overall a saving of 182 bytes, with the new
  functionality added by the new API.

- Start of draw methods for new API:
  - draw() - Draw the table. Need this to test the new paging methods
    since page() etc do not do a redraw themselves, you must call draw()
    when you are ready for the table to be redrawn now.
 2013-04-18 07:49:38 +01:00
Allan Jardine
fa7122392d New: tables() and tables().nodes() methods for the new API: 
- tables() is a table selector and iterator that most other API methods
  will likely use.

- tables().nodes() gets the selected HTML table nodes.

- Documentation of these functions is rather incomplete. Not yet sure
  how to fully document them. Currently thinking of having seperate
  documentation, a bit like jQuery, which can be a lot more involved,
  rather than building it fromt he doc comments which might get rather
  long (they already are!).
 2013-04-17 14:35:15 +01:00
Allan Jardine
e9176bee48 New: First commit for the new Api. 
- This commit introduces the new Api core, a 'class' which is a data
  helper and DataTable control interface. Methods of this class are
  designed to be chainable (although it is not manditory - some can
  return boolean values if needed).

- The core data helper functions are present in this comment, although
  not yet fully documented. That will come as the Api stablises and I'm
  happy with the structure.

- There are no table control methods yet - coming soon.
 2013-04-16 16:38:53 +01:00
Allan Jardine
b1d88c1c91 Performance: Read the style.width property for the restore width and 
apply that.

- This is much faster than the previous method of using $(this).width()
  since there is no longer an invalidation and getComputedStyle
  calculation. It just uses the value that is available in style.width,
  which might very well be empty (if the style attribute is used with a
  width property defined is it not empty).

- This also improves accuracy since it is the original that is restored,
  and not the calculated size.

- See http://datatables.net/forums/discussion/14811 for the discussion
  for this change.

- Thanks to `krzycho` for the discussion and suggestions.
 2013-04-06 09:44:52 +01:00
Allan Jardine
ad0e08585f Performance: Width of scrollbars isn't going to change on a single page 
between table's being reinitialised, so calculating the scrollbar width
every time is a real hit on performance since it needs to manipulate the
DOM. This change ensures that the calculation is performed only once.
 2013-04-06 09:36:44 +01:00
Allan Jardine
182998a7c5 Fix: Remove pointer cursor from cells which cannot be sorted - 14826 2013-03-29 07:27:47 +00:00
Allan Jardine
a0ee82fe4b New: Foundation styling example. 
- Likely this willl be moved into a 'themes' directroy along with jQuery
  UI and Bootstrap in future, but stashing it here for now.
 2013-03-27 09:28:49 +00:00
Allan Jardine
5a0c1f5ac6 Fix #168 - fnInitComplete should give json as second parameter as well 
- When server-side processing is enabled, fnInitComplete will now be
  passed a second parameter, the json returned from the server for that
  first draw, matching the Ajax data source with client-side processing
  option.
 2013-03-27 09:25:55 +00:00
Allan Jardine
baa16632ec New - licensing: DataTables is now available under the MIT license 
- Full license available here: http://datatables.net/license_mit

- Note that this effectively makes the BSD and GPLv2 licenses that
  DataTables is also available under redundant since the MIT is the most
  relaxed of these licenses. At some point in the not too distant
  future, it would make sense to remove these two licenses and have
  DataTables available under only the MIT license.
 2013-03-15 09:56:27 +00:00
Allan Jardine
65b6e2f901 Merge branch 'master' of github.com:DataTables/DataTables 2013-03-11 16:33:32 +00:00
Allan Jardine
f0694a8fbb Dev: First commit of xml for examples build script 2013-03-11 16:32:28 +00:00
Allan Jardine
8d9e620ef2 Merge pull request #160 from zeitiger/master 
Refactor filter search from input[text] to input[search]
 2013-03-04 02:42:57 -08:00
David Steinkopff
5abeb777b7 Merge branch 'master' of https://github.com/zeitiger/DataTables 2013-03-04 08:43:49 +01:00
David Steinkopff
c2dd657fa8 remove hacking 2013-03-04 08:43:11 +01:00
David Steinkopff
00568d0724 Merge branch 'master' of https://github.com/zeitiger/DataTables 2013-03-04 08:40:53 +01:00
David Steinkopff
8efdd92a46 Merge branch 'master' of https://github.com/zeitiger/DataTables 
Add requested changes
 2013-03-04 08:38:31 +01:00
Allan Jardine
b87187fc5b Fix #162 - Flexible width is width="100%" is applied as attribute to the HTML table 
- Attach an event handler to the window to resize the table. Note that
  this isn't debounced - possibly it should be in future(?), but don't
  want to add the additional code required if it isn't required. It
  seems to function perfectly well for me!

- Unbind needs to unbind by the instance unique reference since there
  might be multiple tables listening for the event.
 2013-03-03 12:03:44 +00:00
Allan Jardine
25eaa86477 Dev fix: Typo in the name of _hungarianMap private parameter 2013-03-03 08:36:58 +00:00
Allan Jardine
2bd643468b New: Extend render option to use objects allowing different data to be 
used for the different data types very easily.

- Until now, if you want to use different data for the different data
  types (I've called these orthogonal data in relations to DataTables)
  you had to specify a function. That's fine, but it seems a rather
  clumsy way of just pulling different data out of a source object based
  on the type. This method allows the data types to be very easily
  defined with an object, allowing the same rules as `render` normally
  does (dotted object notation, array notation etc).

- For example:

    $(document).ready(function() {
    	$('#example').dataTable( {
    		columns: [
    			{ data: null, render: {
    				_: 'a',
    				sort: 'c',
    				type: 'c',
    				filter: 'd'
    			} },
    			{ data: 'b' }
    		],
    		data: [
    			{ 'a': 1, 'b': 2, 'c': 4, 'd': '1' },
    			{ 'a': 3, 'b': 4, 'c': 3, 'd': '3' },
    			{ 'a': 5, 'b': 6, 'c': 2, 'd': '5' },
    			{ 'a': 7, 'b': 8, 'c': 1, 'd': 'allan' }
    		]
    	} );
    } );
 2013-03-02 18:53:27 +00:00
Allan Jardine
079a1f2e1d Fix: remove tabindex from clone header nodes 
- Tabbing through a scrolling table the tabindex on the cloned header in
  the body part of hte table meant that the browser would focus on those
  elements. Fix is to remove the tab index from the clone nodes.
 2013-03-01 17:30:40 +00:00
Allan Jardine
e00037a1af Fix #161: DOM sorting plug-ins updated 
- Cope with the change in jQuery 1.9 for element ordering. From the
  DataTables thread on this topic ( 14316 ):

So a bit of further investigation into this - I've used these two test
caseS:

No DataTables: http://live.datatables.net/uwidel/edit#source
DataTables: http://live.datatables.net/ivojev/4/edit

The new DataTables version shows that jQuery 1.9 is now always trying to
order the nodes by document order, not but the order that they are found
in the source array. Additionally removed nodes are appended to the
results, themselves in reserve order, but that's just the way the Sizzle
node ordering works when items are not in the document (try sorting
numbers and you get the same result).

Given the suggestion in the release notes that the move is to have nodes
always treated in document order, I don't think this is a bug, so not
filing one. It is a bit frustrating that the nodes are iterated in a
different order from the source array, but it is expected from their
documentation and comments. So this is simply something we'll need to
work around.

To that end, I've updated the examples and taken the unusual step of
updating the examples on this site outside the normal release cycle. The
examples in the 1.9.4 current release of DataTables can't change of
course, but the updated examples will be in 1.10 when it is released.
 2013-02-28 18:55:31 +00:00
David Steinkopff
b0a25ebfe2 Merge branch 'master' of https://github.com/zeitiger/DataTables 2013-02-28 10:27:15 +01:00
David Steinkopff
9b003e6690 replace input[text] with HTML5 input[search] 2013-02-28 10:26:45 +01:00
David Steinkopff
4577a52056 replace input[text] with HTML5 input[search] 2013-02-28 09:41:49 +01:00
Allan Jardine
3e1a41dccd Merge branch 'master' of github.com:DataTables/DataTables 2013-02-26 21:33:52 +00:00
Allan Jardine
1bb4fc6896 Dev fix: Typo from a67ff2f 2013-02-26 21:33:00 +00:00
Allan Jardine
25ded41662 Merge pull request #155 from benn0r/master 
Added Composer Support
 2013-02-20 08:20:47 -08:00
benn0r
c0a273b007 Added composer support 2013-02-20 11:17:20 +01:00
Allan Jardine
a67ff2fadb Dev: Trivial tidy up of _fnConvertToWidth 
- Just 43 bytes saved, but tidier code and smaller size...
 2013-02-18 08:47:47 +00:00
Allan Jardine
7c53a1824c Dev: Tidying up scrollbar width calcuation function 
- Using jQuery we can make the code a bit smaller. Not much, just a 97
  byte saving, but every little helps, as they say....
 2013-02-18 08:42:32 +00:00
Allan Jardine
4c4bfb04b8 Dev: Remove trailing white space 
- JSHint flagging warnings on trailing whitespace, so tidying up. Boring
  commit, but these things must be done!
 2013-02-17 17:59:27 +00:00
Allan Jardine
6e012c8ee1 Dev fix: Thousands separator was incorrectly applied 
- This was from my old work on experimenting with removing hugraian
  notation, it slipped through to be committed.
 2013-02-16 11:33:50 +00:00
Allan Jardine
f3ce2e2d44 Fix 151: Column type was being offset when columns were not searchable 2013-02-16 11:27:41 +00:00
Allan Jardine
d5fb56ff37 Update: Update to jQuery 1.9.1 2013-02-16 11:26:54 +00:00
Allan Jardine
83b9624273 Examples: Updating examples for the new ajax property 
- Note that this update is not complete, just the initialisation is
  done. The examples will shortly be rewritten to be more modular when
  this will be completed (i.e. the code shown on the page will be
  updated)
 2013-02-10 12:26:42 +00:00
Allan Jardine
39ad1e7004 Dev: Small size reduction in SSP parameter build 
- Saving of just 269 bytes in minified file, but non-the-less welcome
 2013-02-10 12:18:00 +00:00
Allan Jardine
28c60e92a6 Dev fix: Undefined variable (JSHint) 2013-02-10 12:17:39 +00:00
Allan Jardine
2b6788011f New: ajax parameter to control all aspects of Ajax that DataTables uses 
- DataTables 1.9 had 5 different parameters that controlled how Ajax
  data was obtained, which with its own naming properties, often mapping
  to the jQuery.ajax methods, or otherwise extending them. To hugely
  simply and extend the Ajax functionality DataTables has, these five
  parameters have now been deprecated and the funtionality provided by
  them merged into the new `ajax` parameter.

- Deprecated properties:
   - sAjaxSource
   - fnServerData
   - sAjaxDataProp
   - sServerMethod
   - fnServerParams

- Note that these parameters are still fully supported and can be used,
  but for new projects, `ajax` should be used as they will eventually be
  removed (likely DataTables v2 whenever that is, as they are too widely
  used to be removed in v1.x).

- Added additional / missing tests for the deprecated properties to
  ensure full backwards compatiblity

- The new `ajax` property is fully documented in the doc comments, but
  as a summary it can take three forms:
   - string - the url to get the data from (i.e. this is the new
     sAjaxSource)
   - object - maps directly to jQuery.ajax, allowing full control of the
     Ajax call (provides the abilities of fnServerParams, sServerMethod,
     sAjaxDataProp)
   - function - a function so you can get the data your own way
     (provides the abilities of fnServerData)

- Added unit tests for the new `ajax` property and doc comment examples
  updated to use this property exclusively.
 2013-02-10 11:58:58 +00:00
Allan Jardine
fad7536608 Fix: $().andSelf() was deprecated in jQuery 1.8 
- As of jQuery 1.8 `andSelf` was deprecated in favour of `andBack`.
  `andBack` was not available in jQuery <1.8, and I don't want to make
  1.8 a requirement yet, so a small workaround requiring two unbind
  calls is used to avoid calling `andSelf` or `andBack`.
 2013-02-07 08:29:51 +00:00
Allan Jardine
da2a834177 Dev: Tidying up documentation comments for main DataTables file 2013-02-05 09:36:58 +00:00
Allan Jardine
d740f0484d Update - docs: Add examples for the xhr event and clarify when it fires 
- `xhr` event fires before DataTables processes the returned data, so
  you can listen for `xhr` and use it to manipulate the returned data.
 2013-02-05 09:31:48 +00:00
Allan Jardine
f35801b111 Fix: jQuery migrate warning on display length initial setting 
- jQuery migrate gives a warning about the use of `attr` rather than
  `prop`. However, we should really just be using `val` here - much
  easier.

- Thread: 13931
 2013-02-05 06:49:59 +00:00
Allan Jardine
8045c7471e Dev: Committing recent changes into built script 2013-02-04 19:57:59 +00:00
Allan Jardine
00e6651c4e Dev: Remove debug from example 2013-02-04 19:57:00 +00:00
Allan Jardine
2645463304 Example: Removed localStorage example 
- DataTables now uses localStorage by default
 2013-02-04 19:48:39 +00:00
Allan Jardine
1b6ffeaf78 Updated: data and render can now have periods escaped from dotted 
object notation.

- Previously if you had an object key that contained a period, it
  wouldn't work with `data` or `render` (or rather it would need a
  function call to do it manually), since a split was being done on the
  periods to reconstruct the Javascript object property chain. Now it is
  possible to escape a period, allowing it to be included in the
  property name read / set.

- Example:

$('#example').dataTable( {
	columns: [
		{ data: 'a' },
		{ data: 'b\\.c' }
	],
	data: [
		{ 'a': 1, 'b.c': 2 },
		{ 'a': 3, 'b.c': 4 },
		{ 'a': 5, 'b.c': 6 },
		{ 'a': 7, 'b.c': 8 }
	]
} );
 2013-02-04 19:44:41 +00:00
Allan Jardine
b2de50229e New: data and render options for columns support function notation 
- As part of completing the planning development for reading data, I've
  added support for calling functions from the string defined in `data`
  and `render` column options. So you can now do something like:
  `render: 'name()'` rather than needing to use an anon function and
  calling name() in that. This is useful for cases where you want to
  give DataTables an array of Javascript instances, rather than objects
  or arrays (see example below). It also fully supports the continuation
  of the dotted notation DataTables supports, so you could use
  `name().first` if `name()` returns an object. Again to make it easier
  than needed to define a function.

- Documentation for `data` and `render` updated to reflect this
  abilities

- Unit tests for this still to come

- There is one backwards incompatiblity that should be noted - although
  I think this is a real edge case and I just can't see it being an
  issue. If before, you had `data:null` without `render` or
  `defaultContent` specified, DataTables would have output an empty
  cell. Now it will output the original data source object. Can't see
  this being an issue since, why would you have a column empty cells? If
  this is an issue, then you simply need to add `defaultContent:''` now.

- Example use case, using Javascript instances:

$(document).ready(function() {
  var z = function (i) {
    this.a = function (set) {
      if ( set ) {
        return this;
      }
      return i+'-0';
    };
    this.b = function (set) {
      if ( set ) {
        return this;
      }
      return i+'-1';
    };
    this.c = function (set) {
      if ( set ) {
        return this;
      }
      return i+'-2';
    };
    this.d = function (set) {
      if ( set ) {
        return this;
      }
      return i+'-3';
    };
    this.e = function (set) {
      if ( set ) {
        return this;
      }
      return {
        q: i+'-4q',
        w: i+'-4w'
      };
    };
  };

  window.dataset = [
    new z(0),
    new z(1),
    new z(2),
    new z(3),
    new z(4),
    new z(5)
  ];

  $('#example').dataTable( {
    columns: [
      { data: null, /*render: 'a()'*/ },
      { data: 'b()' },
      { data: 'c' },
      { data: 'd()' },
      { data: 'e().q' }
    ],
    data: dataset
  } );
} );
 2013-02-04 11:05:40 +00:00
Allan Jardine
8dcd96f300 Update - Examples: Column filtering now uses placeholder attribute 
- Rather than using Javascript to show a placeholder, use the HTML5
  `placeholder` attribute. That is what it is there for and is supported
  by all current shipping browsers (IE9- do not support it, but will not
  break)
 2013-02-02 15:46:38 +00:00
Allan Jardine
b4aee323bd Fix #136 - Allow bDestroy / bRetrieve to have defaults set 
- Typically I think setting bDestroy or bRetrieve as default true is a
  bad idea as it could lead to more processing of tables than is needed
  by mistake, but if set the defaults should be acted upon.

- These are slightly different to the other defaults since the settings
  object hasn't been expanded by the point they are checked, so need to
  manually check the values.
 2013-02-02 12:09:15 +00:00
Allan Jardine
10a0d7bd04 Dev: Update comments for browser feature detection 2013-02-01 10:29:03 +00:00
Allan Jardine
415ce622c3 New: Scrolling support for rtl language layout 
- When scrolling is enabled, the scrollbar can be placed on the right or
  the left of the scrolling container by the browser for rtl layout (of
  the current browsers, only Safari appears to place it on the right) -
  when placed on the left the padding adjustment that DataTables makes
  for the scrollbar area was added to the wrong side.

- To cope with this, the browser compat method (moved to the compat
  file) will check for the position of the scrollbar and set a flag so
  the scroll draw can adjust the position as needed.
 2013-02-01 10:05:45 +00:00
Allan Jardine
177400121e Fix: Documentation typo or sWidth 2013-02-01 10:04:20 +00:00
Allan Jardine
6d140835a9 Update: Examples syntax highlighter needs to use on rather than live 2013-02-01 10:03:26 +00:00
Allan Jardine
0e8e0d6793 Update: Updating to jQuery 1.9 2013-02-01 10:02:57 +00:00
Allan Jardine
076744a84c Merge branch 'master' of github.com:DataTables/DataTables 2012-12-21 09:36:10 +00:00
Allan Jardine
86cc702539 Fix:Server-side scripts security flaw - The example server-side scripts 
had an injection vunrebility where paging and sorting could be exploited
- 13314. DataTables 1.9.4 has been reissued with these fixes.
 2012-12-21 09:33:41 +00:00
Allan Jardine
70e784d84a Merge pull request #137 from DukeAstar/patch-1 
Fix backward compatibility with mDataProp = null
 2012-12-07 13:46:19 -08:00
DukeAstar
d9bb6b63cd Fix backward compatibility with mDataProp = null 2012-12-07 22:32:41 +01:00
Allan Jardine
c74db5aee6 Merge pull request #135 from Tiax/master 
Fix: The sorting 'none' class was not being correctly assigned to columns which could not be sorted - 12736.
 2012-11-23 08:09:08 -08:00
Tiax
a528bbb6b6 Applying proper CSS classes for sorting to columns 
As discussed on the forums here: http://datatables.net/forums/discussion/12736/setting-sortable-with-aocolumndefs-glitched
 2012-11-23 10:49:26 +01:00
Allan Jardine
a5c80d4711 Merge pull request #133 from cirosantilli/patch-1 
Update examples/api/multi_filter.html
 2012-11-06 03:13:57 -08:00
Ciro Duran Santilli
f78ce70580 Update examples/api/multi_filter.html 
minor improvement: calculate index based on the element's parent th.

this is better because it allows to have some columns that are not searchable (like when the first row is a checkbox row)
 2012-11-06 09:08:09 -02:00
Allan Jardine
36fc3cc92e Update: If aLengthMenu is given, but iDisplayLength is not, DataTables used to default to using the built in iDisplayLength option. However, this lead to a bit of confusion as to why the first value from aLengthMenu was not used (issue #61 and numerous forum posts). This commit changes that behaviour - the first value from aLengthMenu is used, if iDisplayLength is not given as well. 2012-11-02 09:28:06 +00:00
Allan Jardine
823e64cccb Dev: A bit of love for hte type detection functions. Tidy them up and improve the comments. 2012-11-02 08:43:37 +00:00
Allan Jardine
33d3667bbe Update: Much smaller numeric type detection method, based on isNumeric in jQuery. Also a whole lot faster. 2012-11-02 08:33:07 +00:00
Allan Jardine
a073515b20 Update: fnUpdate is now inline with the changes to how data can be added to the table. Rather than taking a copy of the data source, it will simply assign the data given to the row (if it is given for the row) and apply it. Documentation comments update as well. 2012-11-01 21:56:02 +00:00
Allan Jardine
065c2cc66b Fix: Filtering wasn't correctly applying the type adjustments needed for the global filter. For example this meant that html was not stripped from 'html' type columns, resulting in filtering being done on html tags/attributes as well as the content. 2012-11-01 21:45:48 +00:00
Allan Jardine
b56f3619cb Dev: Remove padding on code when in the syntax highlighter 2012-11-01 21:45:26 +00:00
Allan Jardine
46d483d055 Tests: With the change for the state saving into localStorage we need to update the state destroy in the unit tests 2012-10-31 18:12:22 +00:00
Allan Jardine
94f06473c6 New: DataTables now uses HTML5 localStorage by default for state saving. This has a number of advantages over cookies, the first of which is that we are no longer limited to 4KiB in size. It also makes HTTP requests faster since they aren't included in the HTTP transport. Better yet, the removal of the cookie code reduces the DataTables minified size by 1.5K (1573 bytes). It must be noted that this does mean that IE6/7 don't, by default, work with state saving in DataTables. If support for those browsers is required, then fnStateSaveCallback and fnStateLoadCallback must be used by the developer to define their own state saving methods. 
Removed: fnCookieCallback (cookieCallback) - This is now irrelevant since DataTables does not state save in cookies by default.

Removed: sCookiePrefix (cookiePrefix) - This is now irrelevant since DataTables does not state save in cookies by default.

Depreciated: iCookieDuration (cookieDuration) - Since DataTables does not use cookies for state saving by default the name of this parameter is now incorrect. The new parameter `stateDuration` should be used instead, although the old parameter is still supported. It will be removed in the next major version of DataTables.
 2012-10-31 18:09:41 +00:00
Allan Jardine
c883cdac54 Dev: Fix issue with the moved oInit defaults copy - couldn't get a reference to an exisiting DataTable 2012-10-31 15:42:09 +00:00
Allan Jardine
0ff0858734 Dev: Fix logic check for passing data to the updated _fnCreateTr method 2012-10-31 15:39:10 +00:00
Allan Jardine
5209e2f058 Dev: Removed the _fnGatherData method, replacing it with _fnAddTr and slightly updated _fnAddData / _fnCreateTr. This means that the new API add add existing TR element if needed, but more importantly it reduces code duplication and makes the code size smaller (almost 1K - 967 bytes exactly, minified). Must confess I was really hoping it would be more, but every little helps... 2012-10-31 14:56:34 +00:00
Allan Jardine
3ac3cedf53 Fix: When sorting numerically, '-' and '' should be treated as -Infinity rather than as 0, since negative numbers could also be used int he column and this would split the numbers. 2012-10-30 21:05:15 +00:00
Allan Jardine
ec0556b4f6 Updated: Changing the formatting that DataTables uses for the version numbers to be compatible with semver (http://semver.org/). The impact is minimal (unless you are parsing the version for the final part in dev builds). The change is to use a dash ('-') at the end of the version string for a non-release build, rather than a dot. 2012-10-28 16:39:35 +00:00
Allan Jardine
e7e0fb83f0 Fix: Make was building invalid JSON files for the component.json file 2012-10-28 16:35:57 +00:00
Allan Jardine
eafd70f53a Dev fix: When updating the parameters for lack of hungraian notation, I renamed 'iDeferLoading' as 'deferLoading' which broke server-side processing... 2012-10-28 16:34:11 +00:00
Allan Jardine
88e12aabfe Merge branch 'master' of github.com:DataTables/DataTables 2012-10-26 08:09:04 +01:00
Allan Jardine
8eb8c90627 Dev - Build latest changes 2012-10-26 08:04:14 +01:00
Allan Jardine
e89958cb45 Fix docs: Example for mRender has a syntax error 2012-10-26 08:02:59 +01:00
Allan Jardine
59782cf6ab Fix: Add -dev to the version number 2012-10-25 08:46:55 +02:00
Allan Jardine
8948ed24e1 Merge pull request #127 from rikkert/patch-1 
Fix component.json trailing comma and update version property
 2012-10-24 23:46:09 -07:00
Ramiro Rikkert
8c1ab09381 Fix component.json 
Two small fixes that will prevent bower from crashing:
- use a [semver](http://semver.org/) for 'version' property
- remove syntax error in main array property
 2012-10-23 09:03:21 +03:00
Allan Jardine
cab0c534f1 Fix - core: Stripe removal was broken - it was stripping the classes from only the first row rows, rather than all of them, which was wrong. This was unfortunatly introduced in 1.9.4 and there weren't any unit tests to catch it. There are now, and I've rewritten the code that wil remove existing stripe classes. Its now much smaller and should be a little faster. Now it only checks the first row to see if it has any exisiting stripe classes, which is good enough. The smallest this could could be would be a simple removeClass, but that may result in significant overhead which really isn't needed in cases where there are no exisiting stripe classes. 2012-10-19 15:31:35 +01:00
Allan Jardine
8e1068e603 Dev fix: Fix issue highlighted by JSHint - The DataTable object is addressed in the private methods so it needs to be defined before them, but the contracturo needs to come after the priavte methods! 2012-10-07 18:13:16 +01:00
Allan Jardine
0e3a60b52f Dev fix: Variable name oSettings was incorrect 2012-10-07 18:11:54 +01:00
Allan Jardine
f7dddabfa3 Fix: Trailing comma 2012-10-07 18:11:41 +01:00
Allan Jardine
de935de4c6 Merge branch 'master' of github.com:DataTables/DataTables 2012-10-07 18:08:56 +01:00
Allan Jardine
ab454c1c33 Fix: In _fnExtend there was a bug where a variable referenced a 'locally global' (for lack of a better term) variable rather than the in function variable that it should be have. Got away with this since _fnExtend is only used for one thing at the moment, but it was wrong. Now fixed. 
Update - Performance / Memory: The functions that DataTables uses are not instance based, they are locally scoped, but they were included in the DataTable constructore, which meant that every time you create a new 'instance' of DataTables ($().dataTable()) it would create these functions in that scope again and again. That's completely pointless since we only need them once, so moving them outside the constructor helps both performance and memory (not huge, but very little helps!).
 2012-10-07 18:02:38 +01:00
Allan Jardine
8a6737520a Merge pull request #123 from timtucker/patch-34 
Dev: Fix introduced issue
 2012-10-07 07:12:37 -07:00
Tim Tucker
2b35b262cb Update media/src/api/api.static.js 
Variable initialization was wrong in the prior pull (should have been iThat, not sThat)
 2012-10-07 09:11:10 -03:00
Allan Jardine
f420f1462b Merge pull request #117 from timtucker/patch-29 
Dev: Modify how DataTables builds the filtering regular expressions to simplify.
 2012-10-07 04:31:06 -07:00
Allan Jardine
ec10497217 Dev: Update generated file from the marges made recently 2012-10-07 12:23:24 +01:00
Allan Jardine
7a388a0a76 Merge branch 'master' of github.com:DataTables/DataTables 2012-10-07 12:23:07 +01:00
Allan Jardine
09a9976907 Dev: Trivial code styling change 2012-10-07 12:22:18 +01:00
Allan Jardine
7bcd2955ff Merge pull request #116 from timtucker/patch-28 
Dev: Remove unused variable in _fnDraw
 2012-10-07 04:15:17 -07:00
Allan Jardine
76507795ed Merge pull request #109 from timtucker/patch-22 
Update media/src/core/core.ajax.js
 2012-10-07 04:14:12 -07:00
Allan Jardine
be6fc4185d Merge pull request #106 from timtucker/patch-19 
Dev: Simplify language handling of start number for infinite scrolling
 2012-10-07 04:12:23 -07:00
Allan Jardine
8cabf6f830 Merge pull request #107 from timtucker/patch-20 
Dev: Different algorithm for fnVersionCheck
 2012-10-07 04:10:43 -07:00
Allan Jardine
542066100a Merge pull request #115 from timtucker/patch-27 
Update media/src/core/core.draw.js
 2012-10-07 04:09:27 -07:00
Allan Jardine
8b6e3fe264 Merge pull request #108 from timtucker/patch-21 
Fix: Update string sorting to correctly sort undefined values.
 2012-10-07 04:08:40 -07:00
Allan Jardine
a0455fa858 New: The primary public interface for DataTables' initialisation options is now camel case parameters rather than the Hungarian notation that was used before. There are a number of reasons for doing this, the primary one being that the Hungarian notation used by DataTables is actively stopping people from using the library due to their aversion to using Hungarian notation. Without doubt the Hungarian notation used was a mistake (the reason it was used was that when DataTables was originally written, the company I worked for at the time required the use of Hungarian notation, and thus I was trained in it...). 
Backwards compatibility issues: The main goal here (other than to use camel-case notation!) is to preserve backwards compatibility. Unfortunately this isn't 100% possible:
	- DataTable.defaults.columns has been renamed to be DataTable.defaults.column
		- Otherwise it conflicts with aoColumns in the defaults.

Without doubt this is going to be a long process - for example the unit tests and examples need to be completely updated for this change. The JSDoc comments have been updated, so the site should take care of itself for the most part, when released.

In terms of implementation, it is important to note that I have not broken backwards compatibility here - the way it is does is that the current defaults are retained, and a camel-case to Hungarian mapping is automatically generated and then applied to the objects given by the end user. This adds around 0.5K to the size of DataTables, but writing the mapping manually would require at least 3K, and changing DataTables wholesale to camel-case would utterly break backwards compatibility. This is the least 'evil' way to accomplish this. It is important to note that this is a step along the roadmap for DataTables - come v2 Hungarian notation will likely be dropped completely.

One important note to make about this mapping is that if you use camel-case DataTables will copy the value from the camel-case properties to their Hungarian counterparts, so you will end up with additional properties on your source object. As I say, this appears to be to be the least 'evil' option, although still not perfect itself. The challenges of working with legacy software and installs...!
 2012-10-07 11:50:29 +01:00
Allan Jardine
65cde4c612 Merge pull request #120 from timtucker/patch-31 
Dev: Simplify Ajax condition
 2012-10-05 22:43:15 -07:00
Tim Tucker
223fed5e94 Update media/src/core/core.ajax.js 
simplify conditions:
!A || (A && (B || C)
really is the same as:
!A || (true && (B || C))
which simplifies to:
!A || (B || C)
which simplifies to:
!A || B || C
 2012-10-05 23:50:33 -03:00
Allan Jardine
60484bc93a Dev - Remove reporting code from the Ajax draw update - don't need it after the change for 36076fc5c8 2012-10-04 14:50:47 +01:00
Allan Jardine
73c834ea82 Merge branch 'master' of github.com:DataTables/DataTables 2012-10-04 09:00:09 +01:00
Allan Jardine
57022e2f11 Fix: Current release is 1.9.4 
package.json needs to reflect the current release, not the development version.
 2012-10-04 09:58:35 +02:00
Allan Jardine
b566cc1ca4 Fix: Release is currently 1.9.4 
component.json needs to reflect the current release, not the development version.
 2012-10-04 09:57:55 +02:00
Tim Tucker
15a3e7b97d Update media/src/core/core.filter.js 
Reorder things a little to simplify
 2012-10-02 09:18:45 -03:00
Tim Tucker
bd7d70c6b3 Update media/src/core/core.draw.js 
Remove unused variable
 2012-10-02 08:57:42 -03:00
Tim Tucker
fc445cd374 Update media/src/core/core.draw.js 
Remove check for iOpenRows !== 0, since it isn't really needed.
(the contents of the loop just won't execute)
 2012-10-02 08:55:18 -03:00
Tim Tucker
a3b5706105 Update media/src/core/core.ajax.js 
Remove unnecessary else(s)
 2012-09-30 20:11:36 -03:00
Tim Tucker
23fc3858d9 Update media/src/ext/ext.sorting.js 
handle undefined values, skip toLowerCase call for empty strings
 2012-09-30 20:05:09 -03:00
Tim Tucker
7f35d4fb4d Update media/src/api/api.static.js 
Slightly shorter method for checking the version (stops as soon as it reaches a version part that has a difference)
 2012-09-30 11:07:24 -03:00
Tim Tucker
473e9b0088 Update media/src/core/core.info.js 
Only set iStart once and only call fnFormatNumber once on iStart.
 2012-09-30 10:21:09 -03:00
Allan Jardine
c14b49fca3 Remove - asStripClasses backwards compatiblity. There was a typo for asStripeClasses back when it was first introduced, now here in 1.10 the patch that was used to allow both forms is removed. 2012-09-30 09:22:06 +01:00
Allan Jardine
6b605936f7 Update: Significant update to how sorting is applied internally in DataTables - there is no difference to how the sort is actually done, with the single exception that the -asc and -desc are not depricated in favour of the -pre method only. 
- With the introduction of the -pre method in DataTables 1.9, the -asc and -desc sorting functions became more or less redundant since they are simple comparisons (all of the complexity is now in the -pre formatting function). As such the call to the -asc / -desc method is overhead that really isn't needed, and this commit introduces a sort function that doesn't call the -asc / -desc methods, instead just doing the comparison itself. In tests, this relatively simple change leads to a performance improvement of around 15% in all browsers (it also has the side benefit of less operations, so IE8- will be able to sort larger tables before flagging up a slow script warning).

- We can't just remove the sorting method which will call -asc / -desc though since not all sorting plug-ins will have a -pre method. Therefore, for backwards compatiblity the old sort function (albeit updated for the changed variables) is retained. The backwards compatibality code adds around 300 bytes to the library, but this is an unaccounced change, so backwards compatiblity must be retained.

- The old sort method will be removed in v1.11. The -asc and -desc methods are now fully depricated.

- Altered the sorting method to flatten the aaSorting array since the introduction of aDataSort in v1.9 required an extra loop in several locations. The functionality is very useful, but the extra loop can be a bit messy and slightly hit performance, so it is now flattened to be a single array (with object information so it makes sense, rather htan array indexes!).

- Altered the order of sorting when building _aSortData since it was looking up the same variable smultiple times which really wasn't needed.

This is part of a small incremental changes plan for DataTables! There are still a huge number of things to improve in this area, but this is a nice clean up and a nice 15% sorting performance improvement to get us started :-).
 2012-09-29 21:25:41 +01:00
Allan Jardine
6900a59e74 Fix - docs: Need to escape the underscores for markup output when we now use. 2012-09-29 21:24:56 +01:00
Allan Jardine
36076fc5c8 Removed: sName reordering on return from the server when server-side processing. This was depricated in DataTables 1.9 and is now removed. This was an inefficient way to supply data to the DataTable in an array that was out of order and the client-side would reorder the arrays into what was needed. The way to do this now is to use mData and JSON objects rather than arrays, as it provides much greater flexibility without a performance hit on the client-side. 
Note: _fnColumnOrdering is left in place at the moment, although it may be updated as work progresses on 1.10 with regard to the increased use of column names.
 2012-09-23 18:49:11 +01:00
Allan Jardine
8d56d0204e Starting DataTables 1.10 development :-) 
Removed: fnRender - fnRender was depricated in 1.9 and is now being completely removed here. Its always been a bit messy and is now superseded by mRender. The main reason for this is that DataTables use to take an independent copy of the input data source object / array. This is a performance hit and it means we can't do any binding to external objects (for example it makes Knockout integration almost impossible).
Removed: bUseRendered - with fnRender being removed, bUseRendered is irrelevent
Updated: With fnRender being removed we no longer need to take an independent copy of the data source object / array (since DataTables itself isn't ever going to write to it now - fnRender did and the copy was included so we didn't inadvertantly change a developers data source object without them knowing about it. This is no longer a problem, and in fact having it use the same data source object is extremely useful in many cases.
 2012-09-23 18:38:25 +01:00
Allan Jardine
6c41618c71 Update: jQuery 1.8.2 2012-09-23 14:18:58 +01:00
Allan Jardine
822c62d05d DataTables 1.9.4 2012-09-23 14:16:14 +01:00
Allan Jardine
26d2926390 Fix: Ie9 throws an error when document.activeElement is used inside a frame or iframe... So need to wrap the test up in a try/catch. Nasty. 2012-09-23 13:12:39 +01:00
Allan Jardine
bd6bb74967 Fix: Header TD elements need an outline of none to stop of focus flicker (matching TH elements which already have this) 2012-09-19 07:27:52 +01:00
Allan Jardine
b4cd9f11c6 Fix: A header made of only TD elements wasn't being correctly detected - 11705 2012-09-19 07:27:11 +01:00
Allan Jardine
77a8cb5946 Update: jQuery to 1.8.1 2012-09-19 07:26:21 +01:00
Allan Jardine
d1142e1450 Fix: If the user is currently focused on the filtering input element, don't overwrite the value that is already shown as this will effect the cursor position. 2012-09-16 12:00:36 +01:00
Allan Jardine
a19e1dee12 Dev: Use className for the newly created TR - slightly faster than addClass which isn't needed here 2012-09-16 11:19:53 +01:00
Allan Jardine
55adb2f3d5 New: component.json file for Bower ( http://twitter.github.com/bower/ ) support. Both component.json and package.json are generated with the correct version number in them. 2012-09-15 10:52:19 +01:00
Allan Jardine
e25b377ee8 Fix: State saving deletion of cookies was somewhat broken. It would delete cookies out of order, which is not what we want. Rewrite how the 'overage' of cookies (4K limit) is handled 2012-09-13 18:13:32 +01:00
Allan Jardine
a43714bfba Fix - docs: sNext and sPrevious referened to full_numbers pagination type, but they can be used for any pagination control: 9192 2012-09-12 07:47:29 +01:00
Allan Jardine
66e92ab655 Fix - docs: Documentation error for fnGetPosition - missing one of the return indexes - 11708 2012-09-11 10:09:03 +01:00
Allan Jardine
ca96ed55d5 Fix: Remove irrelevent and broken bSortable check for the column options - fix issue #101 2012-09-11 07:04:41 +01:00
Allan Jardine
0a3793b4bb Dev: Tidy up the way that the header and footer elements are 'got'. Based on pull request #92. 2012-09-09 18:43:57 +01:00
Allan Jardine
df614240cf Update: Fully deprecate fnRender - it will be removed from the next major version of DataTables and it is strongly adviced that you do not use it! 2012-09-09 12:26:57 +01:00
Allan Jardine
f6401f062a Update: Examples - remove all reference of fnRender, instead granting preference to mRender. 2012-09-09 12:05:37 +01:00
Allan Jardine
880de42c6e Dev: Remove debug from last commit... 2012-09-09 12:05:20 +01:00
Allan Jardine
555aacfc6d Fix: mRender and mData now work in the same way for DOM sourced tables as they do for JS sourced table data. Generally we wouldn't really expect them to be used as much for DOM sourced tables (if you want your table formatted differently, you'd just create the HTML differently!), but it can sometimes be useful to use these options. This also brings mRender to full 'pace' ready to be used in complete preference to fnRender (alongside the other methods for cell rendeirng such an fnCellCreated etc). 2012-09-09 11:57:02 +01:00
Allan Jardine
898357fc84 Merge pull request #98 from timtucker/patch-14 
Update media/src/core/core.sort.js
 2012-09-04 09:38:03 -07:00
Allan Jardine
30f936d8ff Merge pull request #97 from timtucker/patch-13 
Update media/src/core/core.info.js
 2012-09-04 09:30:58 -07:00
Allan Jardine
6d11218a7f Merge pull request #96 from timtucker/patch-12 
Update media/src/core/core.info.js
 2012-09-04 09:30:06 -07:00
Allan Jardine
bb08308dfe Merge pull request #95 from timtucker/patch-11 
Update media/src/core/core.sizing.js
 2012-09-04 09:29:15 -07:00
Allan Jardine
3ffa14ea8a Merge pull request #94 from timtucker/patch-10 
Update media/src/core/core.sizing.js
 2012-09-04 09:28:07 -07:00
Allan Jardine
4603ad13d4 Merge pull request #93 from timtucker/patch-9 
Update media/src/core/core.scrolling.js
 2012-09-04 09:27:25 -07:00
Allan Jardine
95381359ed Merge pull request #91 from timtucker/patch-7 
Update media/src/core/core.scrolling.js
 2012-09-04 09:24:50 -07:00
Allan Jardine
fcf49ef66e Merge pull request #99 from timtucker/patch-15 
Update media/src/DataTables.js
 2012-09-04 09:19:57 -07:00
Tim Tucker
a66bec8368 Update media/src/DataTables.js 
Simplify by not passing in undefined to the outer closure
 2012-09-04 13:03:20 -03:00
Tim Tucker
89be8f4083 Update media/src/core/core.sort.js 
Speed things up by applying classes only when needed
 2012-09-04 11:05:53 -03:00
Tim Tucker
cb2495b440 Update media/src/core/core.sort.js 
Use var to keep track of # of classes found (length on sparse array doesn't work properly)
 2012-09-03 19:36:18 -03:00
Tim Tucker
6bce847a3b Update media/src/core/core.sort.js 
Further refinement - stop once all sorting classes have been seen
 2012-09-03 19:12:03 -03:00
Tim Tucker
2afa5e4360 Update media/src/core/core.sort.js 
Combined method for removing classes
 2012-09-03 18:21:01 -03:00
Tim Tucker
e6e4205b02 Update media/src/core/core.sort.js 
Forgot parameter to lastIndexOf
 2012-09-03 16:54:30 -03:00
Tim Tucker
6a5c4cf261 Update media/src/core/core.sort.js 
Use simpler dom-based method for deferred render
 2012-09-03 16:53:00 -03:00
Tim Tucker
24fc23f63d Update media/src/core/core.sort.js 
Simplify and improve performance
- Only check once for the presence of any sorting class instead of checking for the 3 individual classes
- Use lastIndexOf(str, 0) instead of indexOf

http://jsperf.com/rep-reg-string/4
 2012-09-03 16:29:28 -03:00
Tim Tucker
af5c3d8178 Update media/src/core/core.info.js 
Simplify check for filtering / empty record set
 2012-09-03 14:02:38 -03:00
Tim Tucker
3485f6530a Update media/src/core/core.info.js 
Use greedy match regex for replacements

Otherwise, you could have:
"_START_ of _TOTAL_, showing _START_ to _END_"
replaced as:
"1 of 5, showing _START_ to 3"
 2012-09-03 13:52:30 -03:00
Tim Tucker
ef1c0890df Update media/src/core/core.sizing.js 
Use document.body rather than document.getElementsByTagName
(Makes things consistent with the rest of the codebase and should be faster)

http://jsperf.com/document-body-vs-document-getelementsbytagname-body-0
 2012-09-03 13:34:10 -03:00
Tim Tucker
4cbb9f3196 Update media/src/core/core.sizing.js 
Define nWrapper earlier to avoid calling dom to get the parentNode multiple times in the initial loop
 2012-09-03 13:11:11 -03:00
Tim Tucker
f5a772c594 Update media/src/core/core.scrolling.js 
Use o.nScrollHead / o.nScrollFoot rather than traversing through the dom again to get the parentNodes for nScrollHeadInner / nScroolFootInner
 2012-09-03 13:02:05 -03:00
Tim Tucker
70cea14422 Update media/src/core/core.scrolling.js 
Only pass in what's needed to _fnApplyToChildren (don't need to be passing in both the sizer and node to size in most cases).
 2012-09-03 12:38:09 -03:00
Allan Jardine
59dc2aed9c Dev: Fix a couple of issues that were introduced in pull request #85 - 1. Mix of spaces and tabs :-). 2. documentation generation was broken due to the use of another closure, 3. minification was broken as window, document, undefined were been aliased and 4. jshint was throwing errors. This addresses those issues, primarily by shifting the closures around. 2012-09-02 10:33:49 +01:00
Allan Jardine
e69e3c6c1c Dev update: Commit built changes from Tim Tucker from last few merges 2012-09-02 09:49:17 +01:00
Allan Jardine
93b0c9ede7 Examples: update - bind the 'xhr' event to the table without calling DataTables - no need for that call to be made. 2012-09-02 09:48:45 +01:00
Allan Jardine
9c82abe79d Merge pull request #89 from timtucker/patch-6 
Use hasChildNodes() rather than childNodes.length
 2012-09-02 01:40:10 -07:00
Allan Jardine
a950fb0642 Merge pull request #88 from timtucker/patch-5 
Update media/src/core/core.data.js
 2012-09-02 01:38:58 -07:00
Allan Jardine
1fdfb65457 Merge pull request #87 from timtucker/patch-4 
Allow adding / removing an arbitrary number of stripes
 2012-09-02 01:37:58 -07:00
Allan Jardine
dd2f084794 Merge pull request #86 from timtucker/patch-3 
Improve dom iteration performance in _fnApplyToChildren
 2012-09-02 01:34:13 -07:00
Tim Tucker
30eb6f0426 Update media/src/ext/ext.paging.js 
Cache node
 2012-08-31 18:48:15 -03:00
Tim Tucker
55b8e6fd04 Update media/src/ext/ext.paging.js 
Use a different approach that caches nodes
(may actually minify better as well)
 2012-08-31 18:43:38 -03:00
Tim Tucker
0c0fef65c1 Update media/src/ext/ext.paging.js 
Replace childNodes.length check with hasChildNodes() in one more place
 2012-08-31 18:35:00 -03:00
Tim Tucker
d8d7759613 Update media/src/ext/ext.paging.js 
Use hasChildNodes() rather than childNodes.length

See the following jsperf test for the difference in performance:
http://jsperf.com/haschildnodes-vs-childnodes-length
 2012-08-31 18:32:01 -03:00
Tim Tucker
dd616424b9 Update media/src/core/core.support.js 
Use firstChild / nextSibling rather than childNodes
 2012-08-31 18:25:23 -03:00
Tim Tucker
1001a332fb Update media/src/core/core.data.js 
_fnGatherData: Use firstChild / nextSibling to iterate rather than childNodes
 2012-08-31 18:12:39 -03:00
Tim Tucker
845eaaab67 Update media/src/api/api.methods.js 
Properly select every nth row for adding classes
 2012-08-31 17:45:15 -03:00
Tim Tucker
82fad5ca50 Update media/src/api/api.methods.js 
Allow for adding / removing an arbitrary number of stripe rows
 2012-08-31 17:37:11 -03:00
Tim Tucker
75ce320838 Update media/src/core/core.constructor.js 
Allow for adding / removing an arbitrary number of stripe rows
 2012-08-31 17:31:00 -03:00
Tim Tucker
ce59c7403f Update media/src/core/core.scrolling.js 
Tweaks to improve performance
Cache nodes
Restructure to use nextSibling rather than childNodes
(small increase in file size, but may be a slight decrease in minified size)
 2012-08-31 16:25:35 -03:00
Allan Jardine
0d47107906 Merge pull request #84 from timtucker/master 
Update to docs
 2012-08-31 09:46:34 -07:00
Tim Tucker
3cc96cf58f Update media/src/core/core.draw.js 
Cache row
Avoid array access to childNodes
Move unique calculation outside of loop
Declare all vars at head of function
Cache a[i] in fnShiftCol
 2012-08-31 13:38:51 -03:00
Allan Jardine
25f4602b3c Merge pull request #85 from timtucker/patch-2 
Update media/src/DataTables.js
 2012-08-31 09:30:07 -07:00
Tim Tucker
37485da480 Update media/src/DataTables.js 
Combine closures
 2012-08-31 13:08:09 -03:00
Tim Tucker
66de941632 Update media/src/DataTables.js 
Wrap with globals to ease minification
Fix check for preventing multiple instantiation
Change formatting
 2012-08-31 12:39:28 -03:00
Tim Tucker
87b4055b7a Update media/src/DataTables.js 
Add support for AMD-based module loaders (such as requirejs).
Should have no effect when loading normally.
 2012-08-31 11:15:19 -03:00
Tim Tucker
6fa5559dc3 Update media/src/core/core.sizing.js 
Doc update -- getWidestNode returns node, not string
 2012-08-31 11:00:48 -03:00
Tim Tucker
08619a3a21 Update media/js/jquery.dataTables.js 
Update doc to reflect that _fnGetWidestNode returns a node, not a string.
 2012-08-31 10:48:55 -03:00
Allan Jardine
6855be79f5 Examples: Add <code> CSS markup for examples. 2012-08-30 19:32:31 +01:00
Allan Jardine
c2af41140b Performance: Large improvement in scrolling performance due to rearranging the way that column widths are read and applied to the target table. Rather than merging reading and writing together, we now seperate the reading and writing phases, allowing the browser's rendering engine to optimise the reflow. Props to jlabanca for this modification - 11541 2012-08-30 07:29:50 +01:00
Allan Jardine
9f8d2a632b Moving on to 1.9.4 development 2012-08-22 16:41:52 +01:00
Allan Jardine
34096537c2 Fix: Firefox Windows (not Mac) had an error when calculating if scrolling oversizing was needed or not (_fnBrowserDetect). The result was that the table did not fill the space when y-scrolling was enabled and Firefox Windows was used. Fix is to remove the height on the DT_BrowserTest parent as suggested by randomuser - 11406 2012-08-22 16:39:36 +01:00
Allan Jardine
93774f4d7d Merge branch 'master' of github.com:DataTables/DataTables 2012-08-22 16:39:25 +01:00
Allan Jardine
3c358417e0 Update: Updating to jQuery 1.8.0 2012-08-22 16:38:36 +01:00
Allan Jardine
e83488ab56 Merge pull request #83 from kycook/patch2 
Only restore hidden columns if table is not being removed from DOM
 2012-08-22 00:58:20 -07:00
Patrick Cook
05201c21c4 Modified destroy method to only restore hidden columns if the table is not 
being removed from DOM
 2012-08-21 12:43:13 -07:00
Allan Jardine
d62ac092a6 Merge pull request #82 from kycook/patch1 
Added fix for memory leak because of potential circular reference
 2012-08-16 00:27:29 -07:00
Patrick Cook
854612a399 Added fix for memory leak because of potential circular reference 2012-08-15 23:31:14 -07:00
Allan Jardine
bec8dc3651 Merge pull request #81 from kycook/master 
Fixed memory leak
 2012-08-15 07:17:03 -07:00
Patrick Cook
f6ffbc7e28 Memory clean up of _that variable 2012-08-15 07:08:48 -07:00
Allan Jardine
6a8ca62b07 Merge pull request #79 from iBiryukov/patch-2 
Small Typo Fix
 2012-08-10 10:53:47 -07:00
iBiryukov
e15342225c Small Typo Fix 2012-08-10 19:46:06 +02:00
Allan Jardine
0585beb0c9 Merge pull request #76 from nnguyen/false_args_in_fnDestroy 
Update to use false value in bRemove arg in fnDestroy
 2012-08-09 23:47:44 -07:00
Nguyen Nguyen
5ac94e2512 Move to the right place (src, not the generated file) 2012-08-10 01:36:55 -05:00
Nguyen Nguyen
f29bd9ffbf Update to use false value in bRemove arg in fnDestroy 2012-08-09 18:10:07 -05:00
288 changed files with 80289 additions and 72889 deletions
Expand all files Collapse all files

1
.datatables-commit-sync Normal file
View File

@@ -0,0 +1 @@
e6ea753d4408ad0a45b409ac8105d565075c21d9

3
.gitignore vendored
View File

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

9
Contributing.md Normal file
View File

@@ -0,0 +1,9 @@
# Contributing
If you are thinking of contributing code to DataTables, first of all, thank you! All fixes, patches and enhancements to DataTables are very warmly welcomed. In order to keep thing manageable, there are a number of guidelines that should be followed in order to ensure that your modification is included in DataTables as quickly as possible:
1. Make contributions in the DataTables/DataTablesSrc repo. Changes to the built files in the built repo (DataTables/DataTables) will not be accepted since they would be overwritten by the next build!
2. Follow the style of the code in the existing files. DataTables doesn't have a coding standards document, but simple common sense of following the same style as in the existing files is ideal. For example use tabs not spaces (as you will see all source files use tabs).
3. Link to a test page showing the bug you are fixing or the feature you are adding. This allows to me to quickly identify what is being changed and why. Don't worry about being verbose in pull requests - its much better to know exactly what is changing and why!

53
Readme.md Normal file
View File

@@ -0,0 +1,53 @@
# DataTables plug-in for jQuery
DataTables is a table enhancing plug-in for the [jQuery](//jquery.com) Javascript library, adding sorting, paging and filtering abilities to plain HTML tables with minimal effort. The stated goal of DataTables is:
> To enhance the accessibility of data in HTML tables.
To meet this goal, DataTables is developed with two distinct groups of users in mind:
* You the developers using DataTables. For developers DataTables provides a wide array of options for how data should be obtained, displayed and acted upon, along with an extensive API for accessing and manipulating the table.
* End users. For those using the interface DataTables presents, actions to get the most from the information contained in tables, such as sorting and filtering, along with paging and scrolling of the data in table, are easy to use, intuitive and fast.
## 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. 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
In its simplest case, DataTables can be initialised with a single line of Javascript:
```js
$('table').dataTable();
```
where the jQuery selector is used to obtain a reference to the table you want to enhance with DataTables. Optional configuration parameters can be passed in to DataTables to have it perform certain actions by using a configuration object as the parameter passed in to the DataTables constructor. For example:
```js
$('table').dataTable( {
paginate: false,
scrollY: 300
} );
```
will disable paging and enable scrolling.
A full list of the options available for DataTables are available in the [documentation](//datatables.net).
## Documentation
Full documentation of the DataTables options, API and pug-in interface are available on the [DataTables web-site](//datatables.net). The site also contains information on the wide variety of plug-ins that are available for DataTables, which can be used to enhance and customise your table even further.
## Support
Support for DataTables is available through the [DataTables forums](//datatables.net/forums) and [commercial support options](//datatables.net/support) are available.
## License
DataTables is release under the [MIT license](//datatables.net/license). You are free to use, modify and distribute this software, as long as the copyright header is left intact (specifically the comment block which starts with `/*!`.

11
Readme.txt
View File

@@ -1,11 +0,0 @@
This DataTables plugin (v1.9.x) for jQuery was developed out of the desire to allow highly configurable access to HTML tables with advanced access features.
For detailed installation, usage and API instructions, please refer to the DataTables web-pages: http://www.datatables.net
Questions, feature requests and bug reports (etc) can all be asked on the DataTables forums: http://www.datatables.net/forums/
The DataTables source can be found in the media/js/ directory of this archive.
DataTables is released with dual licensing, using the GPL v2 (license-gpl2.txt) and an BSD style license (license-bsd.txt). You may select which of the two licenses you wish to use DataTables under. Please see the corresponding license file for details of these licenses. You are free to use, modify and distribute this software, but all copyright information must remain.
If you discover any bugs in DataTables, have any suggestions for improvements or even if you just like using it, please free to get in touch with me: www.datatables.net/contact

11
bower.json Normal file
View File

@@ -0,0 +1,11 @@
{
"name": "datatables",
"version": "1.10.2",
"main": [
"media/js/jquery.dataTables.js",
"media/css/jquery.dataTables.css"
],
"dependencies": {
"jquery": ">=1.7.0"
}
}

15
composer.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "datatables/datatables",
"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",
"license": [
"MIT"
],
"prefer-stable": true,
"support": {
"forum": "https://datatables.net/forums",
"source": "https://github.com/DataTables/DataTablesSrc/"
}
}

32
dataTables.jquery.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "DataTables",
"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/",
"demo": "http://datatables.net/examples",
"download": "http://datatables.net/download",
"author": {
"name": "Allan Jardine",
"url": "http://sprymedia.co.uk"
},
"licenses": [
{
"type": "MIT",
"url": "http://datatables.net/license_bsd"
}
],
"dependencies": {
"jquery": ">=1.7"
},
"keywords": [
"DataTables",
"DataTable",
"table",
"grid",
"filter",
"sort",
"page",
"internationalisable"
]
}

1374
examples/advanced_init/column_render.html
View File

File diff suppressed because it is too large Load Diff

1375
examples/advanced_init/complex_header.html
View File

File diff suppressed because it is too large Load Diff

1358
examples/advanced_init/defaults.html
View File

File diff suppressed because it is too large Load Diff

1368
examples/advanced_init/dom_multiple_elements.html
View File

File diff suppressed because it is too large Load Diff

1376
examples/advanced_init/dom_toolbar.html
View File

File diff suppressed because it is too large Load Diff

1381
examples/advanced_init/dt_events.html
View File

File diff suppressed because it is too large Load Diff

1387
examples/advanced_init/events_live.html
View File

File diff suppressed because it is too large Load Diff

667
examples/advanced_init/events_post_init.html
View File

@@ -1,667 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "../examples_support/jquery.tooltip.css";
</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>
<script type="text/javascript" language="javascript" src="../examples_support/jquery.tooltip.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
/*
* First step is to create title attributes for the rows in the table
* This isn't needed if the required 'title' attribute is already set in the HTML in the
* DOM
*/
$('#example tbody tr').each( function() {
var sTitle;
var nTds = $('td', this);
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
if ( sGrade == "A" )
sTitle = sBrowser+' will provide a first class (A) level of CSS support.';
else if ( sGrade == "C" )
sTitle = sBrowser+' will provide a core (C) level of CSS support.';
else if ( sGrade == "X" )
sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
else
sTitle = sBrowser+' will provide an undefined level of CSS support.';
this.setAttribute( 'title', sTitle );
} );
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the tooltips */
oTable.$('tr').tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables events (post-initialisation) example
</div>
<h1>Preamble</h1>
<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). You can do this at any time, although if you apply the handlers after the table has been initialised there is an extra set. Rather then querying the DOM to get all rows (since they aren't there) you can use the '$' API method that DataTables provides which does a jQuery selector on the whole table and returns a jQuery object.</p>
<p>This example shows the tooltip plug-in being applied to the table after initialisation.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer
4.0
</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
/*
* First step is to create title attributes for the rows in the table
* This isn't needed if the required 'title' attribute is already set in the HTML in the
* DOM
*/
$('#example tbody tr').each( function() {
var sTitle;
var nTds = $('td', this);
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
if ( sGrade == "A" )
sTitle = sBrowser+' will provide a first class (A) level of CSS support.';
else if ( sGrade == "C" )
sTitle = sBrowser+' will provide a core (C) level of CSS support.';
else if ( sGrade == "X" )
sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
else
sTitle = sBrowser+' will provide an undefined level of CSS support.';
this.setAttribute( 'title', sTitle );
} );
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the tooltips */
oTable.$('tr').tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

666
examples/advanced_init/events_pre_init.html
View File

@@ -1,666 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "../examples_support/jquery.tooltip.css";
</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>
<script type="text/javascript" language="javascript" src="../examples_support/jquery.tooltip.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
/*
* First step is to create title attributes for the rows in the table
* This isn't needed if the required 'title' attribute is already set in the HTML in the
* DOM
*/
$('#example tbody tr').each( function() {
var sTitle;
var nTds = $('td', this);
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
if ( sGrade == "A" )
sTitle = sBrowser+' will provide a first class (A) level of CSS support.';
else if ( sGrade == "C" )
sTitle = sBrowser+' will provide a core (C) level of CSS support.';
else if ( sGrade == "X" )
sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
else
sTitle = sBrowser+' will provide an undefined level of CSS support.';
this.setAttribute( 'title', sTitle );
} );
/* Apply the tooltips */
$('#example tbody tr[title]').tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
/* Init DataTables */
$('#example').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables events (pre-initialisation) example
</div>
<h1>Preamble</h1>
<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). If you apply the event handlers before you initialise DataTables, you just do this in the normal way. This is shown in this example where the call <b>$('#example tbody tr[title]').tooltip();</b> is made before the table is initialised.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer
4.0
</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
/*
* First step is to create title attributes for the rows in the table
* This isn't needed if the required 'title' attribute is already set in the HTML in the
* DOM
*/
$('#example tbody tr').each( function() {
var sTitle;
var nTds = $('td', this);
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
if ( sGrade == "A" )
sTitle = sBrowser+' will provide a first class (A) level of CSS support.';
else if ( sGrade == "C" )
sTitle = sBrowser+' will provide a core (C) level of CSS support.';
else if ( sGrade == "X" )
sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
else
sTitle = sBrowser+' will provide an undefined level of CSS support.';
this.setAttribute( 'title', sTitle );
} );
/* Apply the tooltips */
$('#example tbody tr[title]').tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
/* Init DataTables */
$('#example').dataTable();
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

1394
examples/advanced_init/footer_callback.html
View File

File diff suppressed because it is too large Load Diff

643
examples/advanced_init/highlight.html
View File

@@ -1,643 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body id="dt_example" class="ex_highlight_row">
<div id="container">
<div class="full_width big">
DataTables highlighting via CSS example
</div>
<h1>Preamble</h1>
<p>When highlighting rows using CSS :hover, you need to be aware of the sorting class which is applied to elements in the column currently being sorted (assuming it is enabled - it is by default). This example shows how to consider this in CSS, with highlighting for each row, and a little tint for the sorting column to maintain it's visibility as the column currently being sorted upon.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<p>Javascript:</p>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<p>CSS (note that for this example the selector ".ex_highlight" is used to limit the CSS here to just this example.</p>
<pre>.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #ECFFB3;
}
.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #E6FF99;
}
.ex_highlight_row #example tr.even:hover {
background-color: #ECFFB3;
}
.ex_highlight_row #example tr.even:hover td.sorting_1 {
background-color: #DDFF75;
}
.ex_highlight_row #example tr.even:hover td.sorting_2 {
background-color: #E7FF9E;
}
.ex_highlight_row #example tr.even:hover td.sorting_3 {
background-color: #E2FF89;
}
.ex_highlight_row #example tr.odd:hover {
background-color: #E6FF99;
}
.ex_highlight_row #example tr.odd:hover td.sorting_1 {
background-color: #D6FF5C;
}
.ex_highlight_row #example tr.odd:hover td.sorting_2 {
background-color: #E0FF84;
}
.ex_highlight_row #example tr.odd:hover td.sorting_3 {
background-color: #DBFF70;
}
</pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

768
examples/advanced_init/html5-data-attributes.html Normal file
View File

@@ -0,0 +1,768 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML5 data-* attributes</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>HTML5 data-* attributes</span></h1>
<div class="info">
<p>DataTables can use different data for different actions (display, ordering and searching) which can
be immensely powerful for transforming data in the display to be intuitive for the end user, while
using different, or more complex data, for other actions. For example, if a table contains a formatted
telephone number in the format <code>xxx-xxxx</code>, intuitively a user might search for the number
but without a dash. Using orthogonal data for searching allows both forms of the telephone number to be
used, while only the nicely formatted number is displayed in the table.</p>
<p>One method in which DataTables can obtain this orthogonal data for its different actions is through
<a href=
"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">
custom HTML5 data attributes</a>. DataTables will automatically detect four different attributes on the
HTML elements:</p>
<ul class="markdown">
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
</ul>
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In
this case the first column has been formatted so the first name has abbreviated, but the full name is
still searchable (search for "Bruno" for example). Additionally, although the last column contains
non-numeric data in it (<code>/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>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td data-search="Tiger Nixon">T. Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="1295913600">Tue 25th Jan 11</td>
<td data-order="112000">$112,000/y</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Advanced initialisation</a></h3>
<ul class="toc active">
<li><a href="./events_live.html">DOM / jQuery events</a></li>
<li><a href="./dt_events.html">DataTables events</a></li>
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li class="active"><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

197
examples/advanced_init/html_sort.html
View File

@@ -1,197 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables HTML sorting example
</div>
<h1>Preamble</h1>
<p>DataTables will attempt to automatically detect the data types that your table contains, allowing it to accurately sort and filter this data. This example shows automatic type detection of HTML information - note that the sorting is correct on the second column for the visible information. Additional data types can be added through <a href="http://datatables.net/plug-ins/">plug-ins</a>.
<p>Note that prior to DataTables 1.7 the HTML type was not automatically detected, and it was necessary to specify the sType for the column - this is now not needed as seen in this example. If you do want to be able to sort and filter on the HTML information you can specify the sType for the column as 'string'.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Reflection</th>
<th class="html">Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>DataTables</td>
<td><a href="http://www.sprymedia.co.uk/article/DataTables">DataTables</a></td>
</tr>
<tr>
<td>Integrity</td>
<td><a href="http://www.sprymedia.co.uk/article/Integrity">A link to Integrity</a></td>
</tr>
<tr>
<td>Integrity</td>
<td><a href="http://www.sprymedia.co.uk/article/Integrity">Integrity</a></td>
</tr>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

75
examples/advanced_init/index.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Advanced initialisation</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Advanced initialisation</span></h1>
<div class="info">
<p>The configuration options offered by DataTables extend much further than the options shown in the
basic initialisation of this documentation. Through combinations of the options available and the use
of callbacks, DataTables is completely customisable and will fit into exactly what you need for your
table display.</p>
<p>This section shows some more advanced initialisation options. Keep in mind also that each example
can be combined with the other examples to get what you want!</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="./events_live.html">DOM / jQuery events</a></li>
<li><a href="./dt_events.html">DataTables events</a></li>
<li><a href="./column_render.html">Column rendering</a></li>
<li><a href="./length_menu.html">Page length options</a></li>
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="./language_file.html">Language file</a></li>
<li><a href="./defaults.html">Setting defaults</a></li>
<li><a href="./row_callback.html">Row created callback</a></li>
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

1348
examples/advanced_init/language_file.html
View File

File diff suppressed because it is too large Load Diff

1348
examples/advanced_init/length_menu.html
View File

File diff suppressed because it is too large Load Diff

612
examples/advanced_init/localstorage.html
View File

@@ -1,612 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
var data = localStorage.getItem('DataTables_'+window.location.pathname);
return JSON.parse(data);
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables - state saving with localStorage
</div>
<h1>Preamble</h1>
<p>The state saving storage method that is built into DataTables makes use of cookies for compatibility with all browsers. However, cookies have a number of disadvantagies such as requiring increased HTTP bandwidth and a 4K limit. The W3C Web Storage specification defines <a href="https://developer.mozilla.org/en/DOM/Storage">localStorage</a> as a local storage method which we can use in DataTables to store state without the inherent issues in using cookies.</p>
<p>This example shows the use of <i>fnStateSave</i> and <i>fnStateLoad</i> to very simply store the table state in localStorage and then load it back again when needed.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

1381
examples/advanced_init/row_callback.html
View File

File diff suppressed because it is too large Load Diff

1474
examples/advanced_init/row_grouping.html
View File

File diff suppressed because it is too large Load Diff

784
examples/advanced_init/sort_direction_control.html Normal file
View File

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

625
examples/advanced_init/sorting_control.html
View File

@@ -1,625 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ "desc" ] },
null
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables sorting direction control example
</div>
<h1>Preamble</h1>
<p>At times you may wish to change the default sorting direction for columns (all or some of them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of the aoColumns[].asSorting initialisation parameter. This parameter also allows you to limit the sorting to a single direction, or you could add complex behaviour to the sorting interaction.</p>
<p>The example below shows:</p>
<ul>
<li>Column 1 - default sorting</li>
<li>Column 2 - ascending sorting only</li>
<li>Column 3 - descending sorting, followed by ascending and then ascending again</li>
<li>Column 4 - descending sorting only</li>
<li>Column 5 - default sorting</li>
</ul>
<p>It's worth noting that I don't have a good use case for when you might what to use the complex behaviour that is possible with this, but it is there should you want to use it!</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ "desc" ] },
null
]
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

208
examples/ajax/ajax.html
View File

@@ -1,208 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example
</div>
<h1>Preamble</h1>
<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt"
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

336
examples/ajax/custom_data_flat.html Normal file
View File

@@ -0,0 +1,336 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Flat array data source</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "data/objects_root_array.txt",
"dataSrc": ""
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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=
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
it can be used:</p>
<ul class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
array.</li>
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to
transform the data from one source format to another (for example you could convert from XML to a
Javascript object). The value returned from the function is used as the data for the table.</li>
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="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%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/objects_root_array.txt&quot;,
&quot;dataSrc&quot;: &quot;&quot;
},
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;extn&quot; },
{ &quot;data&quot;: &quot;start_date&quot; },
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li class="active"><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

516
examples/ajax/custom_data_property.html
View File

@@ -1,210 +1,322 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/custom_prop.txt",
"sAjaxDataProp": "demo"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example - reading an arbitrary data source property
</div>
<h1>Preamble</h1>
<p>By default DataTables will read the data to show in the table from the <i>aaData</i> property of the object returned from the server. By using the initialisation option <b>sAjaxDataProp</b> you can customise this to whatever you wish. This examples shows it being set to 'demo'. Note that this option will also work with server-side processing. Additionally, it is possible to set <b>sAjaxDataProp</b> to be an empty string, which results in DataTables treating the given data source as the table data array (rather than as property of an object).</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/custom_prop.txt",
"sAjaxDataProp": "demo"
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<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">
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
<title>DataTables example - Custom data source property</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "data/arrays_custom_prop.txt",
"dataSrc": "demo"
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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=
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
it can be used:</p>
<ul class="markdown">
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
array.</li>
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to
transform the data from one source format to another (for example you could convert from XML to a
Javascript object). The value returned from the function is used as the data for the table.</li>
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
"option" title="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>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: {
&quot;url&quot;: &quot;data/arrays_custom_prop.txt&quot;,
&quot;dataSrc&quot;: &quot;demo&quot;
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li class="active"><a href="./custom_data_property.html">Custom data source
property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

460
examples/ajax/data/arrays.txt Normal file
View File

@@ -0,0 +1,460 @@
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011\/04\/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011\/07\/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009\/01\/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012\/03\/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008\/11\/28",
"$162,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012\/12\/02",
"$372,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012\/08\/06",
"$137,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010\/10\/14",
"$327,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009\/09\/15",
"$205,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008\/12\/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008\/12\/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013\/03\/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008\/10\/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012\/12\/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010\/03\/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012\/11\/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010\/06\/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009\/04\/10",
"$237,500"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012\/10\/13",
"$132,000"
],
[
"Dai Rios",
"Personnel Lead",
"Edinburgh",
"2290",
"2012\/09\/26",
"$217,500"
],
[
"Jenette Caldwell",
"Development Lead",
"New York",
"1937",
"2011\/09\/03",
"$345,000"
],
[
"Yuri Berry",
"Chief Marketing Officer (CMO)",
"New York",
"6154",
"2009\/06\/25",
"$675,000"
],
[
"Caesar Vance",
"Pre-Sales Support",
"New York",
"8330",
"2011\/12\/12",
"$106,450"
],
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"3023",
"2010\/09\/20",
"$85,600"
],
[
"Angelica Ramos",
"Chief Executive Officer (CEO)",
"London",
"5797",
"2009\/10\/09",
"$1,200,000"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010\/12\/22",
"$92,575"
],
[
"Jennifer Chang",
"Regional Director",
"Singapore",
"9239",
"2010\/11\/14",
"$357,650"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011\/06\/07",
"$206,850"
],
[
"Fiona Green",
"Chief Operating Officer (COO)",
"San Francisco",
"2947",
"2010\/03\/11",
"$850,000"
],
[
"Shou Itou",
"Regional Marketing",
"Tokyo",
"8899",
"2011\/08\/14",
"$163,000"
],
[
"Michelle House",
"Integration Specialist",
"Sidney",
"2769",
"2011\/06\/02",
"$95,400"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009\/10\/22",
"$114,500"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011\/05\/07",
"$145,000"
],
[
"Gavin Cortez",
"Team Leader",
"San Francisco",
"2860",
"2008\/10\/26",
"$235,500"
],
[
"Martena Mccray",
"Post-Sales support",
"Edinburgh",
"8240",
"2011\/03\/09",
"$324,050"
],
[
"Unity Butler",
"Marketing Designer",
"San Francisco",
"5384",
"2009\/12\/09",
"$85,675"
],
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008\/12\/16",
"$164,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010\/02\/12",
"$109,850"
],
[
"Vivian Harrell",
"Financial Controller",
"San Francisco",
"9422",
"2009\/02\/14",
"$452,500"
],
[
"Timothy Mooney",
"Office Manager",
"London",
"7580",
"2008\/12\/11",
"$136,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008\/09\/26",
"$645,750"
],
[
"Olivia Liang",
"Support Engineer",
"Singapore",
"2120",
"2011\/02\/03",
"$234,500"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011\/05\/03",
"$163,500"
],
[
"Sakura Yamamoto",
"Support Engineer",
"Tokyo",
"9383",
"2009\/08\/19",
"$139,575"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013\/08\/11",
"$98,540"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009\/07\/07",
"$87,500"
],
[
"Serge Baldwin",
"Data Coordinator",
"Singapore",
"8352",
"2012\/04\/09",
"$138,575"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010\/01\/04",
"$125,250"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012\/06\/01",
"$115,000"
],
[
"Jennifer Acosta",
"Junior Javascript Developer",
"Edinburgh",
"3431",
"2013\/02\/01",
"$75,650"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011\/12\/06",
"$145,600"
],
[
"Hermione Butler",
"Regional Director",
"London",
"1016",
"2011\/03\/21",
"$356,250"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009\/02\/27",
"$103,500"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010\/07\/14",
"$86,500"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008\/11\/13",
"$183,000"
],
[
"Michael Bruce",
"Javascript Developer",
"Singapore",
"5384",
"2011\/06\/27",
"$183,000"
],
[
"Donna Snider",
"Customer Support",
"New York",
"4226",
"2011\/01\/25",
"$112,000"
]
]
}

460
examples/ajax/data/arrays_custom_prop.txt Normal file
View File

@@ -0,0 +1,460 @@
{
"demo": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011\/04\/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011\/07\/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009\/01\/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012\/03\/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008\/11\/28",
"$162,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012\/12\/02",
"$372,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012\/08\/06",
"$137,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010\/10\/14",
"$327,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009\/09\/15",
"$205,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008\/12\/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008\/12\/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013\/03\/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008\/10\/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012\/12\/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010\/03\/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012\/11\/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010\/06\/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009\/04\/10",
"$237,500"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012\/10\/13",
"$132,000"
],
[
"Dai Rios",
"Personnel Lead",
"Edinburgh",
"2290",
"2012\/09\/26",
"$217,500"
],
[
"Jenette Caldwell",
"Development Lead",
"New York",
"1937",
"2011\/09\/03",
"$345,000"
],
[
"Yuri Berry",
"Chief Marketing Officer (CMO)",
"New York",
"6154",
"2009\/06\/25",
"$675,000"
],
[
"Caesar Vance",
"Pre-Sales Support",
"New York",
"8330",
"2011\/12\/12",
"$106,450"
],
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"3023",
"2010\/09\/20",
"$85,600"
],
[
"Angelica Ramos",
"Chief Executive Officer (CEO)",
"London",
"5797",
"2009\/10\/09",
"$1,200,000"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010\/12\/22",
"$92,575"
],
[
"Jennifer Chang",
"Regional Director",
"Singapore",
"9239",
"2010\/11\/14",
"$357,650"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011\/06\/07",
"$206,850"
],
[
"Fiona Green",
"Chief Operating Officer (COO)",
"San Francisco",
"2947",
"2010\/03\/11",
"$850,000"
],
[
"Shou Itou",
"Regional Marketing",
"Tokyo",
"8899",
"2011\/08\/14",
"$163,000"
],
[
"Michelle House",
"Integration Specialist",
"Sidney",
"2769",
"2011\/06\/02",
"$95,400"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009\/10\/22",
"$114,500"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011\/05\/07",
"$145,000"
],
[
"Gavin Cortez",
"Team Leader",
"San Francisco",
"2860",
"2008\/10\/26",
"$235,500"
],
[
"Martena Mccray",
"Post-Sales support",
"Edinburgh",
"8240",
"2011\/03\/09",
"$324,050"
],
[
"Unity Butler",
"Marketing Designer",
"San Francisco",
"5384",
"2009\/12\/09",
"$85,675"
],
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008\/12\/16",
"$164,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010\/02\/12",
"$109,850"
],
[
"Vivian Harrell",
"Financial Controller",
"San Francisco",
"9422",
"2009\/02\/14",
"$452,500"
],
[
"Timothy Mooney",
"Office Manager",
"London",
"7580",
"2008\/12\/11",
"$136,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008\/09\/26",
"$645,750"
],
[
"Olivia Liang",
"Support Engineer",
"Singapore",
"2120",
"2011\/02\/03",
"$234,500"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011\/05\/03",
"$163,500"
],
[
"Sakura Yamamoto",
"Support Engineer",
"Tokyo",
"9383",
"2009\/08\/19",
"$139,575"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013\/08\/11",
"$98,540"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009\/07\/07",
"$87,500"
],
[
"Serge Baldwin",
"Data Coordinator",
"Singapore",
"8352",
"2012\/04\/09",
"$138,575"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010\/01\/04",
"$125,250"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012\/06\/01",
"$115,000"
],
[
"Jennifer Acosta",
"Junior Javascript Developer",
"Edinburgh",
"3431",
"2013\/02\/01",
"$75,650"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011\/12\/06",
"$145,600"
],
[
"Hermione Butler",
"Regional Director",
"London",
"1016",
"2011\/03\/21",
"$356,250"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009\/02\/27",
"$103,500"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010\/07\/14",
"$86,500"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008\/11\/13",
"$183,000"
],
[
"Michael Bruce",
"Javascript Developer",
"Singapore",
"5384",
"2011\/06\/27",
"$183,000"
],
[
"Donna Snider",
"Customer Support",
"New York",
"4226",
"2011\/01\/25",
"$112,000"
]
]
}

688
examples/ajax/data/arrays_subobjects.txt Normal file
View File

@@ -0,0 +1,688 @@
{
"data": [
{
"0": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011\/04\/25"
},
"contact": {
"office": "Edinburgh",
"extn": "5421"
}
},
{
"0": "Garrett Winters",
"hr": {
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011\/07\/25"
},
"contact": {
"office": "Tokyo",
"extn": "8422"
}
},
{
"0": "Ashton Cox",
"hr": {
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009\/01\/12"
},
"contact": {
"office": "San Francisco",
"extn": "1562"
}
},
{
"0": "Cedric Kelly",
"hr": {
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012\/03\/29"
},
"contact": {
"office": "Edinburgh",
"extn": "6224"
}
},
{
"0": "Airi Satou",
"hr": {
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008\/11\/28"
},
"contact": {
"office": "Tokyo",
"extn": "5407"
}
},
{
"0": "Brielle Williamson",
"hr": {
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012\/12\/02"
},
"contact": {
"office": "New York",
"extn": "4804"
}
},
{
"0": "Herrod Chandler",
"hr": {
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012\/08\/06"
},
"contact": {
"office": "San Francisco",
"extn": "9608"
}
},
{
"0": "Rhona Davidson",
"hr": {
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010\/10\/14"
},
"contact": {
"office": "Tokyo",
"extn": "6200"
}
},
{
"0": "Colleen Hurst",
"hr": {
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009\/09\/15"
},
"contact": {
"office": "San Francisco",
"extn": "2360"
}
},
{
"0": "Sonya Frost",
"hr": {
"position": "Software Engineer",
"salary": "$103,600",
"start_date": "2008\/12\/13"
},
"contact": {
"office": "Edinburgh",
"extn": "1667"
}
},
{
"0": "Jena Gaines",
"hr": {
"position": "Office Manager",
"salary": "$90,560",
"start_date": "2008\/12\/19"
},
"contact": {
"office": "London",
"extn": "3814"
}
},
{
"0": "Quinn Flynn",
"hr": {
"position": "Support Lead",
"salary": "$342,000",
"start_date": "2013\/03\/03"
},
"contact": {
"office": "Edinburgh",
"extn": "9497"
}
},
{
"0": "Charde Marshall",
"hr": {
"position": "Regional Director",
"salary": "$470,600",
"start_date": "2008\/10\/16"
},
"contact": {
"office": "San Francisco",
"extn": "6741"
}
},
{
"0": "Haley Kennedy",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$313,500",
"start_date": "2012\/12\/18"
},
"contact": {
"office": "London",
"extn": "3597"
}
},
{
"0": "Tatyana Fitzpatrick",
"hr": {
"position": "Regional Director",
"salary": "$385,750",
"start_date": "2010\/03\/17"
},
"contact": {
"office": "London",
"extn": "1965"
}
},
{
"0": "Michael Silva",
"hr": {
"position": "Marketing Designer",
"salary": "$198,500",
"start_date": "2012\/11\/27"
},
"contact": {
"office": "London",
"extn": "1581"
}
},
{
"0": "Paul Byrd",
"hr": {
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
"start_date": "2010\/06\/09"
},
"contact": {
"office": "New York",
"extn": "3059"
}
},
{
"0": "Gloria Little",
"hr": {
"position": "Systems Administrator",
"salary": "$237,500",
"start_date": "2009\/04\/10"
},
"contact": {
"office": "New York",
"extn": "1721"
}
},
{
"0": "Bradley Greer",
"hr": {
"position": "Software Engineer",
"salary": "$132,000",
"start_date": "2012\/10\/13"
},
"contact": {
"office": "London",
"extn": "2558"
}
},
{
"0": "Dai Rios",
"hr": {
"position": "Personnel Lead",
"salary": "$217,500",
"start_date": "2012\/09\/26"
},
"contact": {
"office": "Edinburgh",
"extn": "2290"
}
},
{
"0": "Jenette Caldwell",
"hr": {
"position": "Development Lead",
"salary": "$345,000",
"start_date": "2011\/09\/03"
},
"contact": {
"office": "New York",
"extn": "1937"
}
},
{
"0": "Yuri Berry",
"hr": {
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
"start_date": "2009\/06\/25"
},
"contact": {
"office": "New York",
"extn": "6154"
}
},
{
"0": "Caesar Vance",
"hr": {
"position": "Pre-Sales Support",
"salary": "$106,450",
"start_date": "2011\/12\/12"
},
"contact": {
"office": "New York",
"extn": "8330"
}
},
{
"0": "Doris Wilder",
"hr": {
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010\/09\/20"
},
"contact": {
"office": "Sidney",
"extn": "3023"
}
},
{
"0": "Angelica Ramos",
"hr": {
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
"start_date": "2009\/10\/09"
},
"contact": {
"office": "London",
"extn": "5797"
}
},
{
"0": "Gavin Joyce",
"hr": {
"position": "Developer",
"salary": "$92,575",
"start_date": "2010\/12\/22"
},
"contact": {
"office": "Edinburgh",
"extn": "8822"
}
},
{
"0": "Jennifer Chang",
"hr": {
"position": "Regional Director",
"salary": "$357,650",
"start_date": "2010\/11\/14"
},
"contact": {
"office": "Singapore",
"extn": "9239"
}
},
{
"0": "Brenden Wagner",
"hr": {
"position": "Software Engineer",
"salary": "$206,850",
"start_date": "2011\/06\/07"
},
"contact": {
"office": "San Francisco",
"extn": "1314"
}
},
{
"0": "Fiona Green",
"hr": {
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
"start_date": "2010\/03\/11"
},
"contact": {
"office": "San Francisco",
"extn": "2947"
}
},
{
"0": "Shou Itou",
"hr": {
"position": "Regional Marketing",
"salary": "$163,000",
"start_date": "2011\/08\/14"
},
"contact": {
"office": "Tokyo",
"extn": "8899"
}
},
{
"0": "Michelle House",
"hr": {
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011\/06\/02"
},
"contact": {
"office": "Sidney",
"extn": "2769"
}
},
{
"0": "Suki Burks",
"hr": {
"position": "Developer",
"salary": "$114,500",
"start_date": "2009\/10\/22"
},
"contact": {
"office": "London",
"extn": "6832"
}
},
{
"0": "Prescott Bartlett",
"hr": {
"position": "Technical Author",
"salary": "$145,000",
"start_date": "2011\/05\/07"
},
"contact": {
"office": "London",
"extn": "3606"
}
},
{
"0": "Gavin Cortez",
"hr": {
"position": "Team Leader",
"salary": "$235,500",
"start_date": "2008\/10\/26"
},
"contact": {
"office": "San Francisco",
"extn": "2860"
}
},
{
"0": "Martena Mccray",
"hr": {
"position": "Post-Sales support",
"salary": "$324,050",
"start_date": "2011\/03\/09"
},
"contact": {
"office": "Edinburgh",
"extn": "8240"
}
},
{
"0": "Unity Butler",
"hr": {
"position": "Marketing Designer",
"salary": "$85,675",
"start_date": "2009\/12\/09"
},
"contact": {
"office": "San Francisco",
"extn": "5384"
}
},
{
"0": "Howard Hatfield",
"hr": {
"position": "Office Manager",
"salary": "$164,500",
"start_date": "2008\/12\/16"
},
"contact": {
"office": "San Francisco",
"extn": "7031"
}
},
{
"0": "Hope Fuentes",
"hr": {
"position": "Secretary",
"salary": "$109,850",
"start_date": "2010\/02\/12"
},
"contact": {
"office": "San Francisco",
"extn": "6318"
}
},
{
"0": "Vivian Harrell",
"hr": {
"position": "Financial Controller",
"salary": "$452,500",
"start_date": "2009\/02\/14"
},
"contact": {
"office": "San Francisco",
"extn": "9422"
}
},
{
"0": "Timothy Mooney",
"hr": {
"position": "Office Manager",
"salary": "$136,200",
"start_date": "2008\/12\/11"
},
"contact": {
"office": "London",
"extn": "7580"
}
},
{
"0": "Jackson Bradshaw",
"hr": {
"position": "Director",
"salary": "$645,750",
"start_date": "2008\/09\/26"
},
"contact": {
"office": "New York",
"extn": "1042"
}
},
{
"0": "Olivia Liang",
"hr": {
"position": "Support Engineer",
"salary": "$234,500",
"start_date": "2011\/02\/03"
},
"contact": {
"office": "Singapore",
"extn": "2120"
}
},
{
"0": "Bruno Nash",
"hr": {
"position": "Software Engineer",
"salary": "$163,500",
"start_date": "2011\/05\/03"
},
"contact": {
"office": "London",
"extn": "6222"
}
},
{
"0": "Sakura Yamamoto",
"hr": {
"position": "Support Engineer",
"salary": "$139,575",
"start_date": "2009\/08\/19"
},
"contact": {
"office": "Tokyo",
"extn": "9383"
}
},
{
"0": "Thor Walton",
"hr": {
"position": "Developer",
"salary": "$98,540",
"start_date": "2013\/08\/11"
},
"contact": {
"office": "New York",
"extn": "8327"
}
},
{
"0": "Finn Camacho",
"hr": {
"position": "Support Engineer",
"salary": "$87,500",
"start_date": "2009\/07\/07"
},
"contact": {
"office": "San Francisco",
"extn": "2927"
}
},
{
"0": "Serge Baldwin",
"hr": {
"position": "Data Coordinator",
"salary": "$138,575",
"start_date": "2012\/04\/09"
},
"contact": {
"office": "Singapore",
"extn": "8352"
}
},
{
"0": "Zenaida Frank",
"hr": {
"position": "Software Engineer",
"salary": "$125,250",
"start_date": "2010\/01\/04"
},
"contact": {
"office": "New York",
"extn": "7439"
}
},
{
"0": "Zorita Serrano",
"hr": {
"position": "Software Engineer",
"salary": "$115,000",
"start_date": "2012\/06\/01"
},
"contact": {
"office": "San Francisco",
"extn": "4389"
}
},
{
"0": "Jennifer Acosta",
"hr": {
"position": "Junior Javascript Developer",
"salary": "$75,650",
"start_date": "2013\/02\/01"
},
"contact": {
"office": "Edinburgh",
"extn": "3431"
}
},
{
"0": "Cara Stevens",
"hr": {
"position": "Sales Assistant",
"salary": "$145,600",
"start_date": "2011\/12\/06"
},
"contact": {
"office": "New York",
"extn": "3990"
}
},
{
"0": "Hermione Butler",
"hr": {
"position": "Regional Director",
"salary": "$356,250",
"start_date": "2011\/03\/21"
},
"contact": {
"office": "London",
"extn": "1016"
}
},
{
"0": "Lael Greer",
"hr": {
"position": "Systems Administrator",
"salary": "$103,500",
"start_date": "2009\/02\/27"
},
"contact": {
"office": "London",
"extn": "6733"
}
},
{
"0": "Jonas Alexander",
"hr": {
"position": "Developer",
"salary": "$86,500",
"start_date": "2010\/07\/14"
},
"contact": {
"office": "San Francisco",
"extn": "8196"
}
},
{
"0": "Shad Decker",
"hr": {
"position": "Regional Director",
"salary": "$183,000",
"start_date": "2008\/11\/13"
},
"contact": {
"office": "Edinburgh",
"extn": "6373"
}
},
{
"0": "Michael Bruce",
"hr": {
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011\/06\/27"
},
"contact": {
"office": "Singapore",
"extn": "5384"
}
},
{
"0": "Donna Snider",
"hr": {
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011\/01\/25"
},
"contact": {
"office": "New York",
"extn": "4226"
}
}
]
}

460
examples/ajax/data/objects.txt Normal file
View File

@@ -0,0 +1,460 @@
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011\/04\/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011\/07\/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009\/01\/12",
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012\/03\/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008\/11\/28",
"office": "Tokyo",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012\/12\/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012\/08\/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010\/10\/14",
"office": "Tokyo",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009\/09\/15",
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$103,600",
"start_date": "2008\/12\/13",
"office": "Edinburgh",
"extn": "1667"
},
{
"name": "Jena Gaines",
"position": "Office Manager",
"salary": "$90,560",
"start_date": "2008\/12\/19",
"office": "London",
"extn": "3814"
},
{
"name": "Quinn Flynn",
"position": "Support Lead",
"salary": "$342,000",
"start_date": "2013\/03\/03",
"office": "Edinburgh",
"extn": "9497"
},
{
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$470,600",
"start_date": "2008\/10\/16",
"office": "San Francisco",
"extn": "6741"
},
{
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$313,500",
"start_date": "2012\/12\/18",
"office": "London",
"extn": "3597"
},
{
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$385,750",
"start_date": "2010\/03\/17",
"office": "London",
"extn": "1965"
},
{
"name": "Michael Silva",
"position": "Marketing Designer",
"salary": "$198,500",
"start_date": "2012\/11\/27",
"office": "London",
"extn": "1581"
},
{
"name": "Paul Byrd",
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
"start_date": "2010\/06\/09",
"office": "New York",
"extn": "3059"
},
{
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$237,500",
"start_date": "2009\/04\/10",
"office": "New York",
"extn": "1721"
},
{
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$132,000",
"start_date": "2012\/10\/13",
"office": "London",
"extn": "2558"
},
{
"name": "Dai Rios",
"position": "Personnel Lead",
"salary": "$217,500",
"start_date": "2012\/09\/26",
"office": "Edinburgh",
"extn": "2290"
},
{
"name": "Jenette Caldwell",
"position": "Development Lead",
"salary": "$345,000",
"start_date": "2011\/09\/03",
"office": "New York",
"extn": "1937"
},
{
"name": "Yuri Berry",
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
"start_date": "2009\/06\/25",
"office": "New York",
"extn": "6154"
},
{
"name": "Caesar Vance",
"position": "Pre-Sales Support",
"salary": "$106,450",
"start_date": "2011\/12\/12",
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010\/09\/20",
"office": "Sidney",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
"start_date": "2009\/10\/09",
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$92,575",
"start_date": "2010\/12\/22",
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$357,650",
"start_date": "2010\/11\/14",
"office": "Singapore",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$206,850",
"start_date": "2011\/06\/07",
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Fiona Green",
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
"start_date": "2010\/03\/11",
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Shou Itou",
"position": "Regional Marketing",
"salary": "$163,000",
"start_date": "2011\/08\/14",
"office": "Tokyo",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011\/06\/02",
"office": "Sidney",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "$114,500",
"start_date": "2009\/10\/22",
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$145,000",
"start_date": "2011\/05\/07",
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Team Leader",
"salary": "$235,500",
"start_date": "2008\/10\/26",
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Post-Sales support",
"salary": "$324,050",
"start_date": "2011\/03\/09",
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Marketing Designer",
"salary": "$85,675",
"start_date": "2009\/12\/09",
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Office Manager",
"salary": "$164,500",
"start_date": "2008\/12\/16",
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Secretary",
"salary": "$109,850",
"start_date": "2010\/02\/12",
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "Financial Controller",
"salary": "$452,500",
"start_date": "2009\/02\/14",
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Office Manager",
"salary": "$136,200",
"start_date": "2008\/12\/11",
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$645,750",
"start_date": "2008\/09\/26",
"office": "New York",
"extn": "1042"
},
{
"name": "Olivia Liang",
"position": "Support Engineer",
"salary": "$234,500",
"start_date": "2011\/02\/03",
"office": "Singapore",
"extn": "2120"
},
{
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$163,500",
"start_date": "2011\/05\/03",
"office": "London",
"extn": "6222"
},
{
"name": "Sakura Yamamoto",
"position": "Support Engineer",
"salary": "$139,575",
"start_date": "2009\/08\/19",
"office": "Tokyo",
"extn": "9383"
},
{
"name": "Thor Walton",
"position": "Developer",
"salary": "$98,540",
"start_date": "2013\/08\/11",
"office": "New York",
"extn": "8327"
},
{
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$87,500",
"start_date": "2009\/07\/07",
"office": "San Francisco",
"extn": "2927"
},
{
"name": "Serge Baldwin",
"position": "Data Coordinator",
"salary": "$138,575",
"start_date": "2012\/04\/09",
"office": "Singapore",
"extn": "8352"
},
{
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$125,250",
"start_date": "2010\/01\/04",
"office": "New York",
"extn": "7439"
},
{
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$115,000",
"start_date": "2012\/06\/01",
"office": "San Francisco",
"extn": "4389"
},
{
"name": "Jennifer Acosta",
"position": "Junior Javascript Developer",
"salary": "$75,650",
"start_date": "2013\/02\/01",
"office": "Edinburgh",
"extn": "3431"
},
{
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$145,600",
"start_date": "2011\/12\/06",
"office": "New York",
"extn": "3990"
},
{
"name": "Hermione Butler",
"position": "Regional Director",
"salary": "$356,250",
"start_date": "2011\/03\/21",
"office": "London",
"extn": "1016"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$103,500",
"start_date": "2009\/02\/27",
"office": "London",
"extn": "6733"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$86,500",
"start_date": "2010\/07\/14",
"office": "San Francisco",
"extn": "8196"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$183,000",
"start_date": "2008\/11\/13",
"office": "Edinburgh",
"extn": "6373"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011\/06\/27",
"office": "Singapore",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011\/01\/25",
"office": "New York",
"extn": "4226"
}
]
}

688
examples/ajax/data/objects_deep.txt Normal file
View File

@@ -0,0 +1,688 @@
{
"data": [
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011\/04\/25"
},
"contact": [
"Edinburgh",
"5421"
]
},
{
"name": "Garrett Winters",
"hr": {
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011\/07\/25"
},
"contact": [
"Tokyo",
"8422"
]
},
{
"name": "Ashton Cox",
"hr": {
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009\/01\/12"
},
"contact": [
"San Francisco",
"1562"
]
},
{
"name": "Cedric Kelly",
"hr": {
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012\/03\/29"
},
"contact": [
"Edinburgh",
"6224"
]
},
{
"name": "Airi Satou",
"hr": {
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008\/11\/28"
},
"contact": [
"Tokyo",
"5407"
]
},
{
"name": "Brielle Williamson",
"hr": {
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012\/12\/02"
},
"contact": [
"New York",
"4804"
]
},
{
"name": "Herrod Chandler",
"hr": {
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012\/08\/06"
},
"contact": [
"San Francisco",
"9608"
]
},
{
"name": "Rhona Davidson",
"hr": {
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010\/10\/14"
},
"contact": [
"Tokyo",
"6200"
]
},
{
"name": "Colleen Hurst",
"hr": {
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009\/09\/15"
},
"contact": [
"San Francisco",
"2360"
]
},
{
"name": "Sonya Frost",
"hr": {
"position": "Software Engineer",
"salary": "$103,600",
"start_date": "2008\/12\/13"
},
"contact": [
"Edinburgh",
"1667"
]
},
{
"name": "Jena Gaines",
"hr": {
"position": "Office Manager",
"salary": "$90,560",
"start_date": "2008\/12\/19"
},
"contact": [
"London",
"3814"
]
},
{
"name": "Quinn Flynn",
"hr": {
"position": "Support Lead",
"salary": "$342,000",
"start_date": "2013\/03\/03"
},
"contact": [
"Edinburgh",
"9497"
]
},
{
"name": "Charde Marshall",
"hr": {
"position": "Regional Director",
"salary": "$470,600",
"start_date": "2008\/10\/16"
},
"contact": [
"San Francisco",
"6741"
]
},
{
"name": "Haley Kennedy",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$313,500",
"start_date": "2012\/12\/18"
},
"contact": [
"London",
"3597"
]
},
{
"name": "Tatyana Fitzpatrick",
"hr": {
"position": "Regional Director",
"salary": "$385,750",
"start_date": "2010\/03\/17"
},
"contact": [
"London",
"1965"
]
},
{
"name": "Michael Silva",
"hr": {
"position": "Marketing Designer",
"salary": "$198,500",
"start_date": "2012\/11\/27"
},
"contact": [
"London",
"1581"
]
},
{
"name": "Paul Byrd",
"hr": {
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
"start_date": "2010\/06\/09"
},
"contact": [
"New York",
"3059"
]
},
{
"name": "Gloria Little",
"hr": {
"position": "Systems Administrator",
"salary": "$237,500",
"start_date": "2009\/04\/10"
},
"contact": [
"New York",
"1721"
]
},
{
"name": "Bradley Greer",
"hr": {
"position": "Software Engineer",
"salary": "$132,000",
"start_date": "2012\/10\/13"
},
"contact": [
"London",
"2558"
]
},
{
"name": "Dai Rios",
"hr": {
"position": "Personnel Lead",
"salary": "$217,500",
"start_date": "2012\/09\/26"
},
"contact": [
"Edinburgh",
"2290"
]
},
{
"name": "Jenette Caldwell",
"hr": {
"position": "Development Lead",
"salary": "$345,000",
"start_date": "2011\/09\/03"
},
"contact": [
"New York",
"1937"
]
},
{
"name": "Yuri Berry",
"hr": {
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
"start_date": "2009\/06\/25"
},
"contact": [
"New York",
"6154"
]
},
{
"name": "Caesar Vance",
"hr": {
"position": "Pre-Sales Support",
"salary": "$106,450",
"start_date": "2011\/12\/12"
},
"contact": [
"New York",
"8330"
]
},
{
"name": "Doris Wilder",
"hr": {
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010\/09\/20"
},
"contact": [
"Sidney",
"3023"
]
},
{
"name": "Angelica Ramos",
"hr": {
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
"start_date": "2009\/10\/09"
},
"contact": [
"London",
"5797"
]
},
{
"name": "Gavin Joyce",
"hr": {
"position": "Developer",
"salary": "$92,575",
"start_date": "2010\/12\/22"
},
"contact": [
"Edinburgh",
"8822"
]
},
{
"name": "Jennifer Chang",
"hr": {
"position": "Regional Director",
"salary": "$357,650",
"start_date": "2010\/11\/14"
},
"contact": [
"Singapore",
"9239"
]
},
{
"name": "Brenden Wagner",
"hr": {
"position": "Software Engineer",
"salary": "$206,850",
"start_date": "2011\/06\/07"
},
"contact": [
"San Francisco",
"1314"
]
},
{
"name": "Fiona Green",
"hr": {
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
"start_date": "2010\/03\/11"
},
"contact": [
"San Francisco",
"2947"
]
},
{
"name": "Shou Itou",
"hr": {
"position": "Regional Marketing",
"salary": "$163,000",
"start_date": "2011\/08\/14"
},
"contact": [
"Tokyo",
"8899"
]
},
{
"name": "Michelle House",
"hr": {
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011\/06\/02"
},
"contact": [
"Sidney",
"2769"
]
},
{
"name": "Suki Burks",
"hr": {
"position": "Developer",
"salary": "$114,500",
"start_date": "2009\/10\/22"
},
"contact": [
"London",
"6832"
]
},
{
"name": "Prescott Bartlett",
"hr": {
"position": "Technical Author",
"salary": "$145,000",
"start_date": "2011\/05\/07"
},
"contact": [
"London",
"3606"
]
},
{
"name": "Gavin Cortez",
"hr": {
"position": "Team Leader",
"salary": "$235,500",
"start_date": "2008\/10\/26"
},
"contact": [
"San Francisco",
"2860"
]
},
{
"name": "Martena Mccray",
"hr": {
"position": "Post-Sales support",
"salary": "$324,050",
"start_date": "2011\/03\/09"
},
"contact": [
"Edinburgh",
"8240"
]
},
{
"name": "Unity Butler",
"hr": {
"position": "Marketing Designer",
"salary": "$85,675",
"start_date": "2009\/12\/09"
},
"contact": [
"San Francisco",
"5384"
]
},
{
"name": "Howard Hatfield",
"hr": {
"position": "Office Manager",
"salary": "$164,500",
"start_date": "2008\/12\/16"
},
"contact": [
"San Francisco",
"7031"
]
},
{
"name": "Hope Fuentes",
"hr": {
"position": "Secretary",
"salary": "$109,850",
"start_date": "2010\/02\/12"
},
"contact": [
"San Francisco",
"6318"
]
},
{
"name": "Vivian Harrell",
"hr": {
"position": "Financial Controller",
"salary": "$452,500",
"start_date": "2009\/02\/14"
},
"contact": [
"San Francisco",
"9422"
]
},
{
"name": "Timothy Mooney",
"hr": {
"position": "Office Manager",
"salary": "$136,200",
"start_date": "2008\/12\/11"
},
"contact": [
"London",
"7580"
]
},
{
"name": "Jackson Bradshaw",
"hr": {
"position": "Director",
"salary": "$645,750",
"start_date": "2008\/09\/26"
},
"contact": [
"New York",
"1042"
]
},
{
"name": "Olivia Liang",
"hr": {
"position": "Support Engineer",
"salary": "$234,500",
"start_date": "2011\/02\/03"
},
"contact": [
"Singapore",
"2120"
]
},
{
"name": "Bruno Nash",
"hr": {
"position": "Software Engineer",
"salary": "$163,500",
"start_date": "2011\/05\/03"
},
"contact": [
"London",
"6222"
]
},
{
"name": "Sakura Yamamoto",
"hr": {
"position": "Support Engineer",
"salary": "$139,575",
"start_date": "2009\/08\/19"
},
"contact": [
"Tokyo",
"9383"
]
},
{
"name": "Thor Walton",
"hr": {
"position": "Developer",
"salary": "$98,540",
"start_date": "2013\/08\/11"
},
"contact": [
"New York",
"8327"
]
},
{
"name": "Finn Camacho",
"hr": {
"position": "Support Engineer",
"salary": "$87,500",
"start_date": "2009\/07\/07"
},
"contact": [
"San Francisco",
"2927"
]
},
{
"name": "Serge Baldwin",
"hr": {
"position": "Data Coordinator",
"salary": "$138,575",
"start_date": "2012\/04\/09"
},
"contact": [
"Singapore",
"8352"
]
},
{
"name": "Zenaida Frank",
"hr": {
"position": "Software Engineer",
"salary": "$125,250",
"start_date": "2010\/01\/04"
},
"contact": [
"New York",
"7439"
]
},
{
"name": "Zorita Serrano",
"hr": {
"position": "Software Engineer",
"salary": "$115,000",
"start_date": "2012\/06\/01"
},
"contact": [
"San Francisco",
"4389"
]
},
{
"name": "Jennifer Acosta",
"hr": {
"position": "Junior Javascript Developer",
"salary": "$75,650",
"start_date": "2013\/02\/01"
},
"contact": [
"Edinburgh",
"3431"
]
},
{
"name": "Cara Stevens",
"hr": {
"position": "Sales Assistant",
"salary": "$145,600",
"start_date": "2011\/12\/06"
},
"contact": [
"New York",
"3990"
]
},
{
"name": "Hermione Butler",
"hr": {
"position": "Regional Director",
"salary": "$356,250",
"start_date": "2011\/03\/21"
},
"contact": [
"London",
"1016"
]
},
{
"name": "Lael Greer",
"hr": {
"position": "Systems Administrator",
"salary": "$103,500",
"start_date": "2009\/02\/27"
},
"contact": [
"London",
"6733"
]
},
{
"name": "Jonas Alexander",
"hr": {
"position": "Developer",
"salary": "$86,500",
"start_date": "2010\/07\/14"
},
"contact": [
"San Francisco",
"8196"
]
},
{
"name": "Shad Decker",
"hr": {
"position": "Regional Director",
"salary": "$183,000",
"start_date": "2008\/11\/13"
},
"contact": [
"Edinburgh",
"6373"
]
},
{
"name": "Michael Bruce",
"hr": {
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011\/06\/27"
},
"contact": [
"Singapore",
"5384"
]
},
{
"name": "Donna Snider",
"hr": {
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011\/01\/25"
},
"contact": [
"New York",
"4226"
]
}
]
}

458
examples/ajax/data/objects_root_array.txt Normal file
View File

@@ -0,0 +1,458 @@
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011\/04\/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011\/07\/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009\/01\/12",
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012\/03\/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008\/11\/28",
"office": "Tokyo",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012\/12\/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012\/08\/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010\/10\/14",
"office": "Tokyo",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009\/09\/15",
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$103,600",
"start_date": "2008\/12\/13",
"office": "Edinburgh",
"extn": "1667"
},
{
"name": "Jena Gaines",
"position": "Office Manager",
"salary": "$90,560",
"start_date": "2008\/12\/19",
"office": "London",
"extn": "3814"
},
{
"name": "Quinn Flynn",
"position": "Support Lead",
"salary": "$342,000",
"start_date": "2013\/03\/03",
"office": "Edinburgh",
"extn": "9497"
},
{
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$470,600",
"start_date": "2008\/10\/16",
"office": "San Francisco",
"extn": "6741"
},
{
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$313,500",
"start_date": "2012\/12\/18",
"office": "London",
"extn": "3597"
},
{
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$385,750",
"start_date": "2010\/03\/17",
"office": "London",
"extn": "1965"
},
{
"name": "Michael Silva",
"position": "Marketing Designer",
"salary": "$198,500",
"start_date": "2012\/11\/27",
"office": "London",
"extn": "1581"
},
{
"name": "Paul Byrd",
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
"start_date": "2010\/06\/09",
"office": "New York",
"extn": "3059"
},
{
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$237,500",
"start_date": "2009\/04\/10",
"office": "New York",
"extn": "1721"
},
{
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$132,000",
"start_date": "2012\/10\/13",
"office": "London",
"extn": "2558"
},
{
"name": "Dai Rios",
"position": "Personnel Lead",
"salary": "$217,500",
"start_date": "2012\/09\/26",
"office": "Edinburgh",
"extn": "2290"
},
{
"name": "Jenette Caldwell",
"position": "Development Lead",
"salary": "$345,000",
"start_date": "2011\/09\/03",
"office": "New York",
"extn": "1937"
},
{
"name": "Yuri Berry",
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
"start_date": "2009\/06\/25",
"office": "New York",
"extn": "6154"
},
{
"name": "Caesar Vance",
"position": "Pre-Sales Support",
"salary": "$106,450",
"start_date": "2011\/12\/12",
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010\/09\/20",
"office": "Sidney",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
"start_date": "2009\/10\/09",
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$92,575",
"start_date": "2010\/12\/22",
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$357,650",
"start_date": "2010\/11\/14",
"office": "Singapore",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$206,850",
"start_date": "2011\/06\/07",
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Fiona Green",
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
"start_date": "2010\/03\/11",
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Shou Itou",
"position": "Regional Marketing",
"salary": "$163,000",
"start_date": "2011\/08\/14",
"office": "Tokyo",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011\/06\/02",
"office": "Sidney",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "$114,500",
"start_date": "2009\/10\/22",
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$145,000",
"start_date": "2011\/05\/07",
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Team Leader",
"salary": "$235,500",
"start_date": "2008\/10\/26",
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Post-Sales support",
"salary": "$324,050",
"start_date": "2011\/03\/09",
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Marketing Designer",
"salary": "$85,675",
"start_date": "2009\/12\/09",
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Office Manager",
"salary": "$164,500",
"start_date": "2008\/12\/16",
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Secretary",
"salary": "$109,850",
"start_date": "2010\/02\/12",
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "Financial Controller",
"salary": "$452,500",
"start_date": "2009\/02\/14",
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Office Manager",
"salary": "$136,200",
"start_date": "2008\/12\/11",
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$645,750",
"start_date": "2008\/09\/26",
"office": "New York",
"extn": "1042"
},
{
"name": "Olivia Liang",
"position": "Support Engineer",
"salary": "$234,500",
"start_date": "2011\/02\/03",
"office": "Singapore",
"extn": "2120"
},
{
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$163,500",
"start_date": "2011\/05\/03",
"office": "London",
"extn": "6222"
},
{
"name": "Sakura Yamamoto",
"position": "Support Engineer",
"salary": "$139,575",
"start_date": "2009\/08\/19",
"office": "Tokyo",
"extn": "9383"
},
{
"name": "Thor Walton",
"position": "Developer",
"salary": "$98,540",
"start_date": "2013\/08\/11",
"office": "New York",
"extn": "8327"
},
{
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$87,500",
"start_date": "2009\/07\/07",
"office": "San Francisco",
"extn": "2927"
},
{
"name": "Serge Baldwin",
"position": "Data Coordinator",
"salary": "$138,575",
"start_date": "2012\/04\/09",
"office": "Singapore",
"extn": "8352"
},
{
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$125,250",
"start_date": "2010\/01\/04",
"office": "New York",
"extn": "7439"
},
{
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$115,000",
"start_date": "2012\/06\/01",
"office": "San Francisco",
"extn": "4389"
},
{
"name": "Jennifer Acosta",
"position": "Junior Javascript Developer",
"salary": "$75,650",
"start_date": "2013\/02\/01",
"office": "Edinburgh",
"extn": "3431"
},
{
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$145,600",
"start_date": "2011\/12\/06",
"office": "New York",
"extn": "3990"
},
{
"name": "Hermione Butler",
"position": "Regional Director",
"salary": "$356,250",
"start_date": "2011\/03\/21",
"office": "London",
"extn": "1016"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$103,500",
"start_date": "2009\/02\/27",
"office": "London",
"extn": "6733"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$86,500",
"start_date": "2010\/07\/14",
"office": "San Francisco",
"extn": "8196"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$183,000",
"start_date": "2008\/11\/13",
"office": "Edinburgh",
"extn": "6373"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011\/06\/27",
"office": "Singapore",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011\/01\/25",
"office": "New York",
"extn": "4226"
}
]

745
examples/ajax/data/objects_subarrays.txt Normal file
View File

@@ -0,0 +1,745 @@
{
"data": [
{
"name": [
"Nixon",
"Tiger"
],
"hr": [
"System Architect",
"$320,800",
"2011\/04\/25"
],
"office": "Edinburgh",
"extn": "5421"
},
{
"name": [
"Winters",
"Garrett"
],
"hr": [
"Accountant",
"$170,750",
"2011\/07\/25"
],
"office": "Tokyo",
"extn": "8422"
},
{
"name": [
"Cox",
"Ashton"
],
"hr": [
"Junior Technical Author",
"$86,000",
"2009\/01\/12"
],
"office": "San Francisco",
"extn": "1562"
},
{
"name": [
"Kelly",
"Cedric"
],
"hr": [
"Senior Javascript Developer",
"$433,060",
"2012\/03\/29"
],
"office": "Edinburgh",
"extn": "6224"
},
{
"name": [
"Satou",
"Airi"
],
"hr": [
"Accountant",
"$162,700",
"2008\/11\/28"
],
"office": "Tokyo",
"extn": "5407"
},
{
"name": [
"Williamson",
"Brielle"
],
"hr": [
"Integration Specialist",
"$372,000",
"2012\/12\/02"
],
"office": "New York",
"extn": "4804"
},
{
"name": [
"Chandler",
"Herrod"
],
"hr": [
"Sales Assistant",
"$137,500",
"2012\/08\/06"
],
"office": "San Francisco",
"extn": "9608"
},
{
"name": [
"Davidson",
"Rhona"
],
"hr": [
"Integration Specialist",
"$327,900",
"2010\/10\/14"
],
"office": "Tokyo",
"extn": "6200"
},
{
"name": [
"Hurst",
"Colleen"
],
"hr": [
"Javascript Developer",
"$205,500",
"2009\/09\/15"
],
"office": "San Francisco",
"extn": "2360"
},
{
"name": [
"Frost",
"Sonya"
],
"hr": [
"Software Engineer",
"$103,600",
"2008\/12\/13"
],
"office": "Edinburgh",
"extn": "1667"
},
{
"name": [
"Gaines",
"Jena"
],
"hr": [
"Office Manager",
"$90,560",
"2008\/12\/19"
],
"office": "London",
"extn": "3814"
},
{
"name": [
"Flynn",
"Quinn"
],
"hr": [
"Support Lead",
"$342,000",
"2013\/03\/03"
],
"office": "Edinburgh",
"extn": "9497"
},
{
"name": [
"Marshall",
"Charde"
],
"hr": [
"Regional Director",
"$470,600",
"2008\/10\/16"
],
"office": "San Francisco",
"extn": "6741"
},
{
"name": [
"Kennedy",
"Haley"
],
"hr": [
"Senior Marketing Designer",
"$313,500",
"2012\/12\/18"
],
"office": "London",
"extn": "3597"
},
{
"name": [
"Fitzpatrick",
"Tatyana"
],
"hr": [
"Regional Director",
"$385,750",
"2010\/03\/17"
],
"office": "London",
"extn": "1965"
},
{
"name": [
"Silva",
"Michael"
],
"hr": [
"Marketing Designer",
"$198,500",
"2012\/11\/27"
],
"office": "London",
"extn": "1581"
},
{
"name": [
"Byrd",
"Paul"
],
"hr": [
"Chief Financial Officer (CFO)",
"$725,000",
"2010\/06\/09"
],
"office": "New York",
"extn": "3059"
},
{
"name": [
"Little",
"Gloria"
],
"hr": [
"Systems Administrator",
"$237,500",
"2009\/04\/10"
],
"office": "New York",
"extn": "1721"
},
{
"name": [
"Greer",
"Bradley"
],
"hr": [
"Software Engineer",
"$132,000",
"2012\/10\/13"
],
"office": "London",
"extn": "2558"
},
{
"name": [
"Rios",
"Dai"
],
"hr": [
"Personnel Lead",
"$217,500",
"2012\/09\/26"
],
"office": "Edinburgh",
"extn": "2290"
},
{
"name": [
"Caldwell",
"Jenette"
],
"hr": [
"Development Lead",
"$345,000",
"2011\/09\/03"
],
"office": "New York",
"extn": "1937"
},
{
"name": [
"Berry",
"Yuri"
],
"hr": [
"Chief Marketing Officer (CMO)",
"$675,000",
"2009\/06\/25"
],
"office": "New York",
"extn": "6154"
},
{
"name": [
"Vance",
"Caesar"
],
"hr": [
"Pre-Sales Support",
"$106,450",
"2011\/12\/12"
],
"office": "New York",
"extn": "8330"
},
{
"name": [
"Wilder",
"Doris"
],
"hr": [
"Sales Assistant",
"$85,600",
"2010\/09\/20"
],
"office": "Sidney",
"extn": "3023"
},
{
"name": [
"Ramos",
"Angelica"
],
"hr": [
"Chief Executive Officer (CEO)",
"$1,200,000",
"2009\/10\/09"
],
"office": "London",
"extn": "5797"
},
{
"name": [
"Joyce",
"Gavin"
],
"hr": [
"Developer",
"$92,575",
"2010\/12\/22"
],
"office": "Edinburgh",
"extn": "8822"
},
{
"name": [
"Chang",
"Jennifer"
],
"hr": [
"Regional Director",
"$357,650",
"2010\/11\/14"
],
"office": "Singapore",
"extn": "9239"
},
{
"name": [
"Wagner",
"Brenden"
],
"hr": [
"Software Engineer",
"$206,850",
"2011\/06\/07"
],
"office": "San Francisco",
"extn": "1314"
},
{
"name": [
"Green",
"Fiona"
],
"hr": [
"Chief Operating Officer (COO)",
"$850,000",
"2010\/03\/11"
],
"office": "San Francisco",
"extn": "2947"
},
{
"name": [
"Itou",
"Shou"
],
"hr": [
"Regional Marketing",
"$163,000",
"2011\/08\/14"
],
"office": "Tokyo",
"extn": "8899"
},
{
"name": [
"House",
"Michelle"
],
"hr": [
"Integration Specialist",
"$95,400",
"2011\/06\/02"
],
"office": "Sidney",
"extn": "2769"
},
{
"name": [
"Burks",
"Suki"
],
"hr": [
"Developer",
"$114,500",
"2009\/10\/22"
],
"office": "London",
"extn": "6832"
},
{
"name": [
"Bartlett",
"Prescott"
],
"hr": [
"Technical Author",
"$145,000",
"2011\/05\/07"
],
"office": "London",
"extn": "3606"
},
{
"name": [
"Cortez",
"Gavin"
],
"hr": [
"Team Leader",
"$235,500",
"2008\/10\/26"
],
"office": "San Francisco",
"extn": "2860"
},
{
"name": [
"Mccray",
"Martena"
],
"hr": [
"Post-Sales support",
"$324,050",
"2011\/03\/09"
],
"office": "Edinburgh",
"extn": "8240"
},
{
"name": [
"Butler",
"Unity"
],
"hr": [
"Marketing Designer",
"$85,675",
"2009\/12\/09"
],
"office": "San Francisco",
"extn": "5384"
},
{
"name": [
"Hatfield",
"Howard"
],
"hr": [
"Office Manager",
"$164,500",
"2008\/12\/16"
],
"office": "San Francisco",
"extn": "7031"
},
{
"name": [
"Fuentes",
"Hope"
],
"hr": [
"Secretary",
"$109,850",
"2010\/02\/12"
],
"office": "San Francisco",
"extn": "6318"
},
{
"name": [
"Harrell",
"Vivian"
],
"hr": [
"Financial Controller",
"$452,500",
"2009\/02\/14"
],
"office": "San Francisco",
"extn": "9422"
},
{
"name": [
"Mooney",
"Timothy"
],
"hr": [
"Office Manager",
"$136,200",
"2008\/12\/11"
],
"office": "London",
"extn": "7580"
},
{
"name": [
"Bradshaw",
"Jackson"
],
"hr": [
"Director",
"$645,750",
"2008\/09\/26"
],
"office": "New York",
"extn": "1042"
},
{
"name": [
"Liang",
"Olivia"
],
"hr": [
"Support Engineer",
"$234,500",
"2011\/02\/03"
],
"office": "Singapore",
"extn": "2120"
},
{
"name": [
"Nash",
"Bruno"
],
"hr": [
"Software Engineer",
"$163,500",
"2011\/05\/03"
],
"office": "London",
"extn": "6222"
},
{
"name": [
"Yamamoto",
"Sakura"
],
"hr": [
"Support Engineer",
"$139,575",
"2009\/08\/19"
],
"office": "Tokyo",
"extn": "9383"
},
{
"name": [
"Walton",
"Thor"
],
"hr": [
"Developer",
"$98,540",
"2013\/08\/11"
],
"office": "New York",
"extn": "8327"
},
{
"name": [
"Camacho",
"Finn"
],
"hr": [
"Support Engineer",
"$87,500",
"2009\/07\/07"
],
"office": "San Francisco",
"extn": "2927"
},
{
"name": [
"Baldwin",
"Serge"
],
"hr": [
"Data Coordinator",
"$138,575",
"2012\/04\/09"
],
"office": "Singapore",
"extn": "8352"
},
{
"name": [
"Frank",
"Zenaida"
],
"hr": [
"Software Engineer",
"$125,250",
"2010\/01\/04"
],
"office": "New York",
"extn": "7439"
},
{
"name": [
"Serrano",
"Zorita"
],
"hr": [
"Software Engineer",
"$115,000",
"2012\/06\/01"
],
"office": "San Francisco",
"extn": "4389"
},
{
"name": [
"Acosta",
"Jennifer"
],
"hr": [
"Junior Javascript Developer",
"$75,650",
"2013\/02\/01"
],
"office": "Edinburgh",
"extn": "3431"
},
{
"name": [
"Stevens",
"Cara"
],
"hr": [
"Sales Assistant",
"$145,600",
"2011\/12\/06"
],
"office": "New York",
"extn": "3990"
},
{
"name": [
"Butler",
"Hermione"
],
"hr": [
"Regional Director",
"$356,250",
"2011\/03\/21"
],
"office": "London",
"extn": "1016"
},
{
"name": [
"Greer",
"Lael"
],
"hr": [
"Systems Administrator",
"$103,500",
"2009\/02\/27"
],
"office": "London",
"extn": "6733"
},
{
"name": [
"Alexander",
"Jonas"
],
"hr": [
"Developer",
"$86,500",
"2010\/07\/14"
],
"office": "San Francisco",
"extn": "8196"
},
{
"name": [
"Decker",
"Shad"
],
"hr": [
"Regional Director",
"$183,000",
"2008\/11\/13"
],
"office": "Edinburgh",
"extn": "6373"
},
{
"name": [
"Bruce",
"Michael"
],
"hr": [
"Javascript Developer",
"$183,000",
"2011\/06\/27"
],
"office": "Singapore",
"extn": "5384"
},
{
"name": [
"Snider",
"Donna"
],
"hr": [
"Customer Support",
"$112,000",
"2011\/01\/25"
],
"office": "New York",
"extn": "4226"
}
]
}

631
examples/ajax/data/orthogonal.txt Normal file
View File

@@ -0,0 +1,631 @@
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303686000"
},
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": {
"display": "Mon 25th Jul 11",
"timestamp": "1311548400"
},
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": {
"display": "Mon 12th Jan 09",
"timestamp": "1231718400"
},
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": {
"display": "Thu 29th Mar 12",
"timestamp": "1332975600"
},
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": {
"display": "Fri 28th Nov 08",
"timestamp": "1227830400"
},
"office": "Tokyo",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": {
"display": "Sun 2nd Dec 12",
"timestamp": "1354406400"
},
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": {
"display": "Mon 6th Aug 12",
"timestamp": "1344207600"
},
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": {
"display": "Thu 14th Oct 10",
"timestamp": "1287010800"
},
"office": "Tokyo",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": {
"display": "Tue 15th Sep 09",
"timestamp": "1252969200"
},
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$103,600",
"start_date": {
"display": "Sat 13th Dec 08",
"timestamp": "1229126400"
},
"office": "Edinburgh",
"extn": "1667"
},
{
"name": "Jena Gaines",
"position": "Office Manager",
"salary": "$90,560",
"start_date": {
"display": "Fri 19th Dec 08",
"timestamp": "1229644800"
},
"office": "London",
"extn": "3814"
},
{
"name": "Quinn Flynn",
"position": "Support Lead",
"salary": "$342,000",
"start_date": {
"display": "Sun 3rd Mar 13",
"timestamp": "1362268800"
},
"office": "Edinburgh",
"extn": "9497"
},
{
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$470,600",
"start_date": {
"display": "Thu 16th Oct 08",
"timestamp": "1224111600"
},
"office": "San Francisco",
"extn": "6741"
},
{
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$313,500",
"start_date": {
"display": "Tue 18th Dec 12",
"timestamp": "1355788800"
},
"office": "London",
"extn": "3597"
},
{
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$385,750",
"start_date": {
"display": "Wed 17th Mar 10",
"timestamp": "1268784000"
},
"office": "London",
"extn": "1965"
},
{
"name": "Michael Silva",
"position": "Marketing Designer",
"salary": "$198,500",
"start_date": {
"display": "Tue 27th Nov 12",
"timestamp": "1353974400"
},
"office": "London",
"extn": "1581"
},
{
"name": "Paul Byrd",
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
"start_date": {
"display": "Wed 9th Jun 10",
"timestamp": "1276038000"
},
"office": "New York",
"extn": "3059"
},
{
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$237,500",
"start_date": {
"display": "Fri 10th Apr 09",
"timestamp": "1239318000"
},
"office": "New York",
"extn": "1721"
},
{
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$132,000",
"start_date": {
"display": "Sat 13th Oct 12",
"timestamp": "1350082800"
},
"office": "London",
"extn": "2558"
},
{
"name": "Dai Rios",
"position": "Personnel Lead",
"salary": "$217,500",
"start_date": {
"display": "Wed 26th Sep 12",
"timestamp": "1348614000"
},
"office": "Edinburgh",
"extn": "2290"
},
{
"name": "Jenette Caldwell",
"position": "Development Lead",
"salary": "$345,000",
"start_date": {
"display": "Sat 3rd Sep 11",
"timestamp": "1315004400"
},
"office": "New York",
"extn": "1937"
},
{
"name": "Yuri Berry",
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
"start_date": {
"display": "Thu 25th Jun 09",
"timestamp": "1245884400"
},
"office": "New York",
"extn": "6154"
},
{
"name": "Caesar Vance",
"position": "Pre-Sales Support",
"salary": "$106,450",
"start_date": {
"display": "Mon 12th Dec 11",
"timestamp": "1323648000"
},
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": {
"display": "Mon 20th Sep 10",
"timestamp": "1284937200"
},
"office": "Sidney",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
"start_date": {
"display": "Fri 9th Oct 09",
"timestamp": "1255042800"
},
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$92,575",
"start_date": {
"display": "Wed 22nd Dec 10",
"timestamp": "1292976000"
},
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$357,650",
"start_date": {
"display": "Sun 14th Nov 10",
"timestamp": "1289692800"
},
"office": "Singapore",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$206,850",
"start_date": {
"display": "Tue 7th Jun 11",
"timestamp": "1307401200"
},
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Fiona Green",
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
"start_date": {
"display": "Thu 11th Mar 10",
"timestamp": "1268265600"
},
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Shou Itou",
"position": "Regional Marketing",
"salary": "$163,000",
"start_date": {
"display": "Sun 14th Aug 11",
"timestamp": "1313276400"
},
"office": "Tokyo",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": {
"display": "Thu 2nd Jun 11",
"timestamp": "1306969200"
},
"office": "Sidney",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "$114,500",
"start_date": {
"display": "Thu 22nd Oct 09",
"timestamp": "1256166000"
},
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$145,000",
"start_date": {
"display": "Sat 7th May 11",
"timestamp": "1304722800"
},
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Team Leader",
"salary": "$235,500",
"start_date": {
"display": "Sun 26th Oct 08",
"timestamp": "1224975600"
},
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Post-Sales support",
"salary": "$324,050",
"start_date": {
"display": "Wed 9th Mar 11",
"timestamp": "1299628800"
},
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Marketing Designer",
"salary": "$85,675",
"start_date": {
"display": "Wed 9th Dec 09",
"timestamp": "1260316800"
},
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Office Manager",
"salary": "$164,500",
"start_date": {
"display": "Tue 16th Dec 08",
"timestamp": "1229385600"
},
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Secretary",
"salary": "$109,850",
"start_date": {
"display": "Fri 12th Feb 10",
"timestamp": "1265932800"
},
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "Financial Controller",
"salary": "$452,500",
"start_date": {
"display": "Sat 14th Feb 09",
"timestamp": "1234569600"
},
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Office Manager",
"salary": "$136,200",
"start_date": {
"display": "Thu 11th Dec 08",
"timestamp": "1228953600"
},
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$645,750",
"start_date": {
"display": "Fri 26th Sep 08",
"timestamp": "1222383600"
},
"office": "New York",
"extn": "1042"
},
{
"name": "Olivia Liang",
"position": "Support Engineer",
"salary": "$234,500",
"start_date": {
"display": "Thu 3rd Feb 11",
"timestamp": "1296691200"
},
"office": "Singapore",
"extn": "2120"
},
{
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$163,500",
"start_date": {
"display": "Tue 3rd May 11",
"timestamp": "1304377200"
},
"office": "London",
"extn": "6222"
},
{
"name": "Sakura Yamamoto",
"position": "Support Engineer",
"salary": "$139,575",
"start_date": {
"display": "Wed 19th Aug 09",
"timestamp": "1250636400"
},
"office": "Tokyo",
"extn": "9383"
},
{
"name": "Thor Walton",
"position": "Developer",
"salary": "$98,540",
"start_date": {
"display": "Sun 11th Aug 13",
"timestamp": "1376175600"
},
"office": "New York",
"extn": "8327"
},
{
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$87,500",
"start_date": {
"display": "Tue 7th Jul 09",
"timestamp": "1246921200"
},
"office": "San Francisco",
"extn": "2927"
},
{
"name": "Serge Baldwin",
"position": "Data Coordinator",
"salary": "$138,575",
"start_date": {
"display": "Mon 9th Apr 12",
"timestamp": "1333926000"
},
"office": "Singapore",
"extn": "8352"
},
{
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$125,250",
"start_date": {
"display": "Mon 4th Jan 10",
"timestamp": "1262563200"
},
"office": "New York",
"extn": "7439"
},
{
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$115,000",
"start_date": {
"display": "Fri 1st Jun 12",
"timestamp": "1338505200"
},
"office": "San Francisco",
"extn": "4389"
},
{
"name": "Jennifer Acosta",
"position": "Junior Javascript Developer",
"salary": "$75,650",
"start_date": {
"display": "Fri 1st Feb 13",
"timestamp": "1359676800"
},
"office": "Edinburgh",
"extn": "3431"
},
{
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$145,600",
"start_date": {
"display": "Tue 6th Dec 11",
"timestamp": "1323129600"
},
"office": "New York",
"extn": "3990"
},
{
"name": "Hermione Butler",
"position": "Regional Director",
"salary": "$356,250",
"start_date": {
"display": "Mon 21st Mar 11",
"timestamp": "1300665600"
},
"office": "London",
"extn": "1016"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$103,500",
"start_date": {
"display": "Fri 27th Feb 09",
"timestamp": "1235692800"
},
"office": "London",
"extn": "6733"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$86,500",
"start_date": {
"display": "Wed 14th Jul 10",
"timestamp": "1279062000"
},
"office": "San Francisco",
"extn": "8196"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$183,000",
"start_date": {
"display": "Thu 13th Nov 08",
"timestamp": "1226534400"
},
"office": "Edinburgh",
"extn": "6373"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": {
"display": "Mon 27th Jun 11",
"timestamp": "1309129200"
},
"office": "Singapore",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": {
"display": "Tue 25th Jan 11",
"timestamp": "1295913600"
},
"office": "New York",
"extn": "4226"
}
]
}

543
examples/ajax/deep.html
View File

@@ -1,222 +1,339 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/deep.txt",
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform.inner" },
{ "mData": "platform.details.0" },
{ "mData": "platform.details.1" }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example - deep property reading for a data source
</div>
<h1>Preamble</h1>
<p>The ability of DataTables to read arbitrary object properties as a column data source is extended to <i>n</i> levels of objects, through the use of standard Javascript dotted object notation. For example in this example "platform.details.0" refers to the first element of the array "details", of the object "platform", for each column. Any level of 'dots' can be used.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/deep.txt",
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform.inner" },
{ "mData": "platform.details.0" },
{ "mData": "platform.details.1" }
<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">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"ajax": "data/objects_deep.txt",
"columns": [
{ "data": "name" },
{ "data": "hr.position" },
{ "data": "contact.0" },
{ "data": "contact.1" },
{ "data": "hr.start_date" },
{ "data": "hr.salary" }
]
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
} );
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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
first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested
data.</p>
<p>The example below shows DataTables reading information for the columns from nested objects and
arrays, where the structure of the row's data source in this example is:</p>
<pre>
<code class="multiline">{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25"
},
"contact": [
"Edinburgh",
"5421"
]
}
</code>
</pre>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;ajax&quot;: &quot;data/objects_deep.txt&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name&quot; },
{ &quot;data&quot;: &quot;hr.position&quot; },
{ &quot;data&quot;: &quot;contact.0&quot; },
{ &quot;data&quot;: &quot;contact.1&quot; },
{ &quot;data&quot;: &quot;hr.start_date&quot; },
{ &quot;data&quot;: &quot;hr.salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li class="active"><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

503
examples/ajax/defer_render.html
View File

@@ -1,210 +1,307 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt",
"bDeferRender": true
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example - with deferred rendering
</div>
<h1>Preamble</h1>
<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 build in deferred rendering. Rather than have DataTables create all TR and TD nodes required for the table when the data is loaded, when deferred rendering is enabled, DataTables will only create the nodes required for each individual display - these nodes are then retained incase they are needed again. This can give a significant performance increase, since a lot less work is done at initialisation time.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt",
"bDeferRender": true
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<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">
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
<title>DataTables example - Deferred rendering for speed</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/arrays.txt",
"deferRender": true
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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
table when the data is loaded, DataTables will only create the nodes required for each individual row
at the time of that row being drawn on the page (these nodes are then retained in case they are needed
again so they aren't created multiple times). This can give a significant performance increase, since a
lot less work is done at initialisation time.</p>
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll
likely notice no difference, but larger tables can benefit significantly from simply enabling this
parameter.</p>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;deferRender&quot;: true
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li class="active"><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

71
examples/ajax/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Ajax sourced data</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

535
examples/ajax/null_data_source.html
View File

@@ -1,214 +1,337 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt",
"aoColumns": [
null,
null,
null,
null,
null,
{ "mData": null }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example - null data source for a column
</div>
<h1>Preamble</h1>
<p>In some tables it can be useful to not need to specify any data source for a column, as it's content is automatically generated (for example using fnRender). This is fairly common with add, edit and delete columns for a CRUD interface. You can now use the <b>mData</b> set to <i>null</i> to specify that the column has no data source. DataTables will render this column as empty.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="10%">CSS grade</th>
<th width="5%">Empty!</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt",
"aoColumns": [
null,
null,
null,
null,
null,
{ "mData": null }
]
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<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">
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
<title>DataTables example - Generated content for a column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "data/arrays.txt",
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
$('#example tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
alert( data[0] +"'s salary is: "+ data[ 5 ] );
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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 class="markdown">
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
"DataTables initialisation option">columns.render<span>DT</span></code></a> for content that is
dynamic (i.e. based upon the row's data)</li>
<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"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=
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> to create a
<em>button</em> element in the last column of the table. A simple jQuery <code>click</code> event
listener is used to watch for clicks on the row, and when activated uses the <a href=
"//datatables.net/reference/api/row().data()"><code class="api" title=
"DataTables API method">row().data()<span>DT</span></code></a> method to get the data for the row and
show a bit of information about it in an <code>alert</code> box. This is a simple use case, but it can
be built up to be arbitrarily complex.</p>
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option"
title="DataTables initialisation option">columns.data<span>DT</span></code></a> option for the column
has been set to <code>null</code> to indicate that the column has no information that should be
obtained data source object.</p>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;columnDefs&quot;: [ {
&quot;targets&quot;: -1,
&quot;data&quot;: null,
&quot;defaultContent&quot;: &quot;&lt;button&gt;Click!&lt;/button&gt;&quot;
} ]
} );
$('#example tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
alert( data[0] +&quot;'s salary is: &quot;+ data[ 5 ] );
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li class="active"><a href="./null_data_source.html">Generated content for a
column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

534
examples/ajax/objects.html
View File

@@ -1,222 +1,330 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/objects.txt",
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform" },
{ "mData": "version" },
{ "mData": "grade" }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example - array of objects as a data source
</div>
<h1>Preamble</h1>
<p>By default, DataTables will expect an array of arrays for its data source, with each cell in the table being exactly described in the data source. However, this can often be quite limiting, or not suitable for a particular data source, so it is possible to specify which property of a source object that DataTables should read for each column. In this example the Ajax source returns an array of objects (one object for each row), and will then read the required property for each column.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/objects.txt",
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform" },
{ "mData": "version" },
{ "mData": "grade" }
<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">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
} );
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Ajax data source (objects)</span></h1>
<div class="info">
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for
rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects
as the data source for each row (i.e. each row has its data described by an object) as this can make
working with the data much more understandable, particularly if you are using the API and you don't
need to keep track of array indexes.</p>
<p>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell
DataTables which property to use from the data source object for each column.</p>
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the
table. The structure of the row's data source in this example is:</p>
<pre>
<code class="multiline">{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}
</code>
</pre>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/objects.txt&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;extn&quot; },
{ &quot;data&quot;: &quot;start_date&quot; },
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li class="active"><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

553
examples/ajax/objects_subarrays.html
View File

@@ -1,222 +1,351 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/objects_subarrays.txt",
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform" },
{ "mData": "details.0" },
{ "mData": "details.1" }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example - array of objects with sub-arrays as a data source
</div>
<h1>Preamble</h1>
<p>While the ability of DataTables to read arbitrary objects properties as a data source for any column is very powerful, it actually goes further than single level object properties; it is possible to read a data source for a column from a deeply nested array or property. This is specified in typical Javascript dotted object notation. For example "details.0" (used in this example) refers to the first property in an array called "details". "details.1" refers to the second property, etc. Object properties can also be used - for example "details.version" is perfectly valid, if that property is available in your data source.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/objects_subarrays.txt",
"aoColumns": [
{ "mData": "engine" },
{ "mData": "browser" },
{ "mData": "platform" },
{ "mData": "details.0" },
{ "mData": "details.1" }
<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">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/objects_subarrays.txt",
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
]
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
} );
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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="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=
"DataTables initialisation option">columns.data<span>DT</span></code></a> option has the ability to
read information not only from objects, but also from arrays using the same dotted object syntax as for
objects. In addition to this, when working with an array data source <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> can process the data to
combine and display the data in simple forms (more complex forms can be defined by using <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> as a function).</p>
<p>This example shows two different aspects of using <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> to read arrays:</p>
<ul class="markdown">
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which
are automatically concatenated together. This is done by using array bracket syntax, with the
characters between the brackets being used as the glue between elements (e.g. <code>name[,
]</code>).</li>
<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from
array elements using dotted object notation (e.g. <code>hr.0</code>). Note that the order in which
the data can be used in the columns does not have to match the order in which it is defined in the
data source. The structure of the row's data source in this example is:</li>
</ul>
<pre>
<code class="multiline">{
"name": [
"Nixon",
"Tiger"
],
"hr": [
"System Architect",
"$3,120",
"2011/04/25"
],
"office": "Edinburgh",
"extn": "5421"
}
</code>
</pre>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/objects_subarrays.txt&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;name[, ]&quot; },
{ &quot;data&quot;: &quot;hr.0&quot; },
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;extn&quot; },
{ &quot;data&quot;: &quot;hr.2&quot; },
{ &quot;data&quot;: &quot;hr.1&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li class="active"><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

339
examples/ajax/orthogonal-data.html Normal file
View File

@@ -0,0 +1,339 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Orthogonal data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp"
} },
{ data: "salary" }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Orthogonal data</span></h1>
<div class="info">
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for
rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects
as the data source for each row (i.e. each row has its data described by an object) as this can make
working with the data much more understandable, particularly if you are using the API and you don't
need to keep track of array indexes.</p>
<p>This can be done quite simply by using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell
DataTables which property to use from the data source object for each column.</p>
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the
table. The structure of the row's data source in this example is:</p>
<pre>
<code class="multiline">{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh",
"extn": "5421"
}
</code>
</pre>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
ajax: &quot;data/orthogonal.txt&quot;,
columns: [
{ data: &quot;name&quot; },
{ data: &quot;position&quot; },
{ data: &quot;office&quot; },
{ data: &quot;extn&quot; },
{ data: {
_: &quot;start_date.display&quot;,
sort: &quot;start_date.timestamp&quot;
} },
{ data: &quot;salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li class="active"><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

323
examples/ajax/simple.html Normal file
View File

@@ -0,0 +1,323 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax data source (arrays)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/arrays.txt"
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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=
"DataTables initialisation option">ajax<span>DT</span></code></a> option also allows for more advanced
configuration such as altering how the Ajax request is made. See the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> documentation or the other Ajax
examples for DataTables for further information.</p>
<p>By default DataTables will assume that an array data source is to be used and will read the
information to be displayed in each column from the row's array using the column index, making working
with arrays very simple (note that this can be changed, or objects used may using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> option, shown in other
examples).</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source, where
the structure of the row's data source in this example is:</p>
<pre>
<code class="multiline">[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
]
</code>
</pre>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Ajax</a></h3>
<ul class="toc active">
<li class="active"><a href="./simple.html">Ajax data source (arrays)</a></li>
<li><a href="./objects.html">Ajax data source (objects)</a></li>
<li><a href="./deep.html">Nested object data (objects)</a></li>
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
<li><a href="./null_data_source.html">Generated content for a column</a></li>
<li><a href="./custom_data_property.html">Custom data source property</a></li>
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

59
examples/ajax/sources/array_only.txt
View File

@@ -1,59 +0,0 @@
[
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],
["Trident","Internet Explorer 6","Win 98+","6","A"],
["Trident","Internet Explorer 7","Win XP SP2+","7","A"],
["Trident","AOL browser (AOL desktop)","Win XP","6","A"],
["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],
["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],
["Gecko","Camino 1.0","OSX.2+","1.8","A"],
["Gecko","Camino 1.5","OSX.3+","1.8","A"],
["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],
["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],
["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],
["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],
["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],
["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],
["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],
["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],
["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],
["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],
["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],
["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Epiphany 2.20","Gnome","1.8","A"],
["Webkit","Safari 1.2","OSX.3","125.5","A"],
["Webkit","Safari 1.3","OSX.3","312.8","A"],
["Webkit","Safari 2.0","OSX.4+","419.3","A"],
["Webkit","Safari 3.0","OSX.4+","522.1","A"],
["Webkit","OmniWeb 5.5","OSX.4+","420","A"],
["Webkit","iPod Touch / iPhone","iPod","420.1","A"],
["Webkit","S60","S60","413","A"],
["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],
["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],
["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],
["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],
["Presto","Opera for Wii","Wii","-","A"],
["Presto","Nokia N800","N800","-","A"],
["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A<sup>1</sup>"],
["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],
["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],
["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],
["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],
["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],
["Misc","NetFront 3.1","Embedded devices","-","C"],
["Misc","NetFront 3.4","Embedded devices","-","A"],
["Misc","Dillo 0.8","Embedded devices","-","X"],
["Misc","Links","Text only","-","X"],
["Misc","Lynx","Text only","-","X"],
["Misc","IE Mobile","Windows Mobile 6","-","C"],
["Misc","PSP browser","PSP","-","C"],
["Other browsers","All others","-","-","U"]
]

59
examples/ajax/sources/arrays.txt
View File

@@ -1,59 +0,0 @@
{ "aaData": [
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],
["Trident","Internet Explorer 6","Win 98+","6","A"],
["Trident","Internet Explorer 7","Win XP SP2+","7","A"],
["Trident","AOL browser (AOL desktop)","Win XP","6","A"],
["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],
["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],
["Gecko","Camino 1.0","OSX.2+","1.8","A"],
["Gecko","Camino 1.5","OSX.3+","1.8","A"],
["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],
["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],
["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],
["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],
["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],
["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],
["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],
["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],
["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],
["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],
["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],
["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Epiphany 2.20","Gnome","1.8","A"],
["Webkit","Safari 1.2","OSX.3","125.5","A"],
["Webkit","Safari 1.3","OSX.3","312.8","A"],
["Webkit","Safari 2.0","OSX.4+","419.3","A"],
["Webkit","Safari 3.0","OSX.4+","522.1","A"],
["Webkit","OmniWeb 5.5","OSX.4+","420","A"],
["Webkit","iPod Touch / iPhone","iPod","420.1","A"],
["Webkit","S60","S60","413","A"],
["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],
["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],
["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],
["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],
["Presto","Opera for Wii","Wii","-","A"],
["Presto","Nokia N800","N800","-","A"],
["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A<sup>1</sup>"],
["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],
["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],
["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],
["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],
["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],
["Misc","NetFront 3.1","Embedded devices","-","C"],
["Misc","NetFront 3.4","Embedded devices","-","A"],
["Misc","Dillo 0.8","Embedded devices","-","X"],
["Misc","Links","Text only","-","X"],
["Misc","Lynx","Text only","-","X"],
["Misc","IE Mobile","Windows Mobile 6","-","C"],
["Misc","PSP browser","PSP","-","C"],
["Other browsers","All others","-","-","U"]
] }

515
examples/ajax/sources/arrays_subobjects.txt
View File

@@ -1,515 +0,0 @@
{ "aaData": [
[
"Trident",
"Internet Explorer 4.0",
"Win 95+",
{
"version": "4",
"grade": "X"
}
],
[
"Trident",
"Internet Explorer 5.0",
"Win 95+",
{
"version": "5",
"grade": "C"
}
],
[
"Trident",
"Internet Explorer 5.5",
"Win 95+",
{
"version": "5.5",
"grade": "A"
}
],
[
"Trident",
"Internet Explorer 6",
"Win 98+",
{
"version": "6",
"grade": "A"
}
],
[
"Trident",
"Internet Explorer 7",
"Win XP SP2+",
{
"version": "7",
"grade": "A"
}
],
[
"Trident",
"AOL browser (AOL desktop)",
"Win XP",
{
"version": "6",
"grade": "A"
}
],
[
"Gecko",
"Firefox 1.0",
"Win 98+ / OSX.2+",
{
"version": "1.7",
"grade": "A"
}
],
[
"Gecko",
"Firefox 1.5",
"Win 98+ / OSX.2+",
{
"version": "1.8",
"grade": "A"
}
],
[
"Gecko",
"Firefox 2.0",
"Win 98+ / OSX.2+",
{
"version": "1.8",
"grade": "A"
}
],
[
"Gecko",
"Firefox 3.0",
"Win 2k+ / OSX.3+",
{
"version": "1.9",
"grade": "A"
}
],
[
"Gecko",
"Camino 1.0",
"OSX.2+",
{
"version": "1.8",
"grade": "A"
}
],
[
"Gecko",
"Camino 1.5",
"OSX.3+",
{
"version": "1.8",
"grade": "A"
}
],
[
"Gecko",
"Netscape 7.2",
"Win 95+ / Mac OS 8.6-9.2",
{
"version": "1.7",
"grade": "A"
}
],
[
"Gecko",
"Netscape Browser 8",
"Win 98SE+",
{
"version": "1.7",
"grade": "A"
}
],
[
"Gecko",
"Netscape Navigator 9",
"Win 98+ / OSX.2+",
{
"version": "1.8",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.0",
"Win 95+ / OSX.1+",
{
"version": "1",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.1",
"Win 95+ / OSX.1+",
{
"version": "1.1",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.2",
"Win 95+ / OSX.1+",
{
"version": "1.2",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.3",
"Win 95+ / OSX.1+",
{
"version": "1.3",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.4",
"Win 95+ / OSX.1+",
{
"version": "1.4",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.5",
"Win 95+ / OSX.1+",
{
"version": "1.5",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.6",
"Win 95+ / OSX.1+",
{
"version": "1.6",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.7",
"Win 98+ / OSX.1+",
{
"version": "1.7",
"grade": "A"
}
],
[
"Gecko",
"Mozilla 1.8",
"Win 98+ / OSX.1+",
{
"version": "1.8",
"grade": "A"
}
],
[
"Gecko",
"Seamonkey 1.1",
"Win 98+ / OSX.2+",
{
"version": "1.8",
"grade": "A"
}
],
[
"Gecko",
"Epiphany 2.20",
"Gnome",
{
"version": "1.8",
"grade": "A"
}
],
[
"Webkit",
"Safari 1.2",
"OSX.3",
{
"version": "125.5",
"grade": "A"
}
],
[
"Webkit",
"Safari 1.3",
"OSX.3",
{
"version": "312.8",
"grade": "A"
}
],
[
"Webkit",
"Safari 2.0",
"OSX.4+",
{
"version": "419.3",
"grade": "A"
}
],
[
"Webkit",
"Safari 3.0",
"OSX.4+",
{
"version": "522.1",
"grade": "A"
}
],
[
"Webkit",
"OmniWeb 5.5",
"OSX.4+",
{
"version": "420",
"grade": "A"
}
],
[
"Webkit",
"iPod Touch / iPhone",
"iPod",
{
"version": "420.1",
"grade": "A"
}
],
[
"Webkit",
"S60",
"S60",
{
"version": "413",
"grade": "A"
}
],
[
"Presto",
"Opera 7.0",
"Win 95+ / OSX.1+",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Opera 7.5",
"Win 95+ / OSX.2+",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Opera 8.0",
"Win 95+ / OSX.2+",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Opera 8.5",
"Win 95+ / OSX.2+",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Opera 9.0",
"Win 95+ / OSX.3+",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Opera 9.2",
"Win 88+ / OSX.3+",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Opera 9.5",
"Win 88+ / OSX.3+",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Opera for Wii",
"Wii",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Nokia N800",
"N800",
{
"version": "-",
"grade": "A"
}
],
[
"Presto",
"Nintendo DS browser",
"Nintendo DS",
{
"version": "8.5",
"grade": "C/A<sup>1</sup>"
}
],
[
"KHTML",
"Konqureror 3.1",
"KDE 3.1",
{
"version": "3.1",
"grade": "C"
}
],
[
"KHTML",
"Konqureror 3.3",
"KDE 3.3",
{
"version": "3.3",
"grade": "A"
}
],
[
"KHTML",
"Konqureror 3.5",
"KDE 3.5",
{
"version": "3.5",
"grade": "A"
}
],
[
"Tasman",
"Internet Explorer 4.5",
"Mac OS 8-9",
{
"version": "-",
"grade": "X"
}
],
[
"Tasman",
"Internet Explorer 5.1",
"Mac OS 7.6-9",
{
"version": "1",
"grade": "C"
}
],
[
"Tasman",
"Internet Explorer 5.2",
"Mac OS 8-X",
{
"version": "1",
"grade": "C"
}
],
[
"Misc",
"NetFront 3.1",
"Embedded devices",
{
"version": "-",
"grade": "C"
}
],
[
"Misc",
"NetFront 3.4",
"Embedded devices",
{
"version": "-",
"grade": "A"
}
],
[
"Misc",
"Dillo 0.8",
"Embedded devices",
{
"version": "-",
"grade": "X"
}
],
[
"Misc",
"Links",
"Text only",
{
"version": "-",
"grade": "X"
}
],
[
"Misc",
"Lynx",
"Text only",
{
"version": "-",
"grade": "X"
}
],
[
"Misc",
"IE Mobile",
"Windows Mobile 6",
{
"version": "-",
"grade": "C"
}
],
[
"Misc",
"PSP browser",
"PSP",
{
"version": "-",
"grade": "C"
}
],
[
"Other browsers",
"All others",
"-",
{
"version": "-",
"grade": "U"
}
]
] }

59
examples/ajax/sources/custom_prop.txt
View File

@@ -1,59 +0,0 @@
{ "demo": [
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],
["Trident","Internet Explorer 6","Win 98+","6","A"],
["Trident","Internet Explorer 7","Win XP SP2+","7","A"],
["Trident","AOL browser (AOL desktop)","Win XP","6","A"],
["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],
["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],
["Gecko","Camino 1.0","OSX.2+","1.8","A"],
["Gecko","Camino 1.5","OSX.3+","1.8","A"],
["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],
["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],
["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],
["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],
["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],
["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],
["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],
["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],
["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],
["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],
["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],
["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],
["Gecko","Epiphany 2.20","Gnome","1.8","A"],
["Webkit","Safari 1.2","OSX.3","125.5","A"],
["Webkit","Safari 1.3","OSX.3","312.8","A"],
["Webkit","Safari 2.0","OSX.4+","419.3","A"],
["Webkit","Safari 3.0","OSX.4+","522.1","A"],
["Webkit","OmniWeb 5.5","OSX.4+","420","A"],
["Webkit","iPod Touch / iPhone","iPod","420.1","A"],
["Webkit","S60","S60","413","A"],
["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],
["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],
["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],
["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],
["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],
["Presto","Opera for Wii","Wii","-","A"],
["Presto","Nokia N800","N800","-","A"],
["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A<sup>1</sup>"],
["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],
["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],
["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],
["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],
["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],
["Misc","NetFront 3.1","Embedded devices","-","C"],
["Misc","NetFront 3.4","Embedded devices","-","A"],
["Misc","Dillo 0.8","Embedded devices","-","X"],
["Misc","Links","Text only","-","X"],
["Misc","Lynx","Text only","-","X"],
["Misc","IE Mobile","Windows Mobile 6","-","C"],
["Misc","PSP browser","PSP","-","C"],
["Other browsers","All others","-","-","U"]
] }

629
examples/ajax/sources/deep.txt
View File

@@ -1,629 +0,0 @@
{ "aaData": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": {
"inner": "Win 95+",
"details": [
"4",
"X"
]
}
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.0",
"platform": {
"inner": "Win 95+",
"details": [
"5",
"C"
]
}
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.5",
"platform": {
"inner": "Win 95+",
"details": [
"5.5",
"A"
]
}
},
{
"engine": "Trident",
"browser": "Internet Explorer 6",
"platform": {
"inner": "Win 98+",
"details": [
"6",
"A"
]
}
},
{
"engine": "Trident",
"browser": "Internet Explorer 7",
"platform": {
"inner": "Win XP SP2+",
"details": [
"7",
"A"
]
}
},
{
"engine": "Trident",
"browser": "AOL browser (AOL desktop)",
"platform": {
"inner": "Win XP",
"details": [
"6",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Firefox 1.0",
"platform": {
"inner": "Win 98+ / OSX.2+",
"details": [
"1.7",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Firefox 1.5",
"platform": {
"inner": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Firefox 2.0",
"platform": {
"inner": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Firefox 3.0",
"platform": {
"inner": "Win 2k+ / OSX.3+",
"details": [
"1.9",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Camino 1.0",
"platform": {
"inner": "OSX.2+",
"details": [
"1.8",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Camino 1.5",
"platform": {
"inner": "OSX.3+",
"details": [
"1.8",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Netscape 7.2",
"platform": {
"inner": "Win 95+ / Mac OS 8.6-9.2",
"details": [
"1.7",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Netscape Browser 8",
"platform": {
"inner": "Win 98SE+",
"details": [
"1.7",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Netscape Navigator 9",
"platform": {
"inner": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.0",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
1,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.1",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
1.1,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.2",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
1.2,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.3",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
1.3,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.4",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
1.4,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.5",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
1.5,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.6",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
1.6,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.7",
"platform": {
"inner": "Win 98+ / OSX.1+",
"details": [
1.7,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Mozilla 1.8",
"platform": {
"inner": "Win 98+ / OSX.1+",
"details": [
1.8,
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Seamonkey 1.1",
"platform": {
"inner": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
}
},
{
"engine": "Gecko",
"browser": "Epiphany 2.20",
"platform": {
"inner": "Gnome",
"details": [
"1.8",
"A"
]
}
},
{
"engine": "Webkit",
"browser": "Safari 1.2",
"platform": {
"inner": "OSX.3",
"details": [
"125.5",
"A"
]
}
},
{
"engine": "Webkit",
"browser": "Safari 1.3",
"platform": {
"inner": "OSX.3",
"details": [
"312.8",
"A"
]
}
},
{
"engine": "Webkit",
"browser": "Safari 2.0",
"platform": {
"inner": "OSX.4+",
"details": [
"419.3",
"A"
]
}
},
{
"engine": "Webkit",
"browser": "Safari 3.0",
"platform": {
"inner": "OSX.4+",
"details": [
"522.1",
"A"
]
}
},
{
"engine": "Webkit",
"browser": "OmniWeb 5.5",
"platform": {
"inner": "OSX.4+",
"details": [
"420",
"A"
]
}
},
{
"engine": "Webkit",
"browser": "iPod Touch / iPhone",
"platform": {
"inner": "iPod",
"details": [
"420.1",
"A"
]
}
},
{
"engine": "Webkit",
"browser": "S60",
"platform": {
"inner": "S60",
"details": [
"413",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera 7.0",
"platform": {
"inner": "Win 95+ / OSX.1+",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera 7.5",
"platform": {
"inner": "Win 95+ / OSX.2+",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera 8.0",
"platform": {
"inner": "Win 95+ / OSX.2+",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera 8.5",
"platform": {
"inner": "Win 95+ / OSX.2+",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera 9.0",
"platform": {
"inner": "Win 95+ / OSX.3+",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera 9.2",
"platform": {
"inner": "Win 88+ / OSX.3+",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera 9.5",
"platform": {
"inner": "Win 88+ / OSX.3+",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Opera for Wii",
"platform": {
"inner": "Wii",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Nokia N800",
"platform": {
"inner": "N800",
"details": [
"-",
"A"
]
}
},
{
"engine": "Presto",
"browser": "Nintendo DS browser",
"platform": {
"inner": "Nintendo DS",
"details": [
"8.5",
"C/A<sup>1</sup>"
]
}
},
{
"engine": "KHTML",
"browser": "Konqureror 3.1",
"platform": {
"inner": "KDE 3.1",
"details": [
"3.1",
"C"
]
}
},
{
"engine": "KHTML",
"browser": "Konqureror 3.3",
"platform": {
"inner": "KDE 3.3",
"details": [
"3.3",
"A"
]
}
},
{
"engine": "KHTML",
"browser": "Konqureror 3.5",
"platform": {
"inner": "KDE 3.5",
"details": [
"3.5",
"A"
]
}
},
{
"engine": "Tasman",
"browser": "Internet Explorer 4.5",
"platform": {
"inner": "Mac OS 8-9",
"details": [
"-",
"X"
]
}
},
{
"engine": "Tasman",
"browser": "Internet Explorer 5.1",
"platform": {
"inner": "Mac OS 7.6-9",
"details": [
"1",
"C"
]
}
},
{
"engine": "Tasman",
"browser": "Internet Explorer 5.2",
"platform": {
"inner": "Mac OS 8-X",
"details": [
"1",
"C"
]
}
},
{
"engine": "Misc",
"browser": "NetFront 3.1",
"platform": {
"inner": "Embedded devices",
"details": [
"-",
"C"
]
}
},
{
"engine": "Misc",
"browser": "NetFront 3.4",
"platform": {
"inner": "Embedded devices",
"details": [
"-",
"A"
]
}
},
{
"engine": "Misc",
"browser": "Dillo 0.8",
"platform": {
"inner": "Embedded devices",
"details": [
"-",
"X"
]
}
},
{
"engine": "Misc",
"browser": "Links",
"platform": {
"inner": "Text only",
"details": [
"-",
"X"
]
}
},
{
"engine": "Misc",
"browser": "Lynx",
"platform": {
"inner": "Text only",
"details": [
"-",
"X"
]
}
},
{
"engine": "Misc",
"browser": "IE Mobile",
"platform": {
"inner": "Windows Mobile 6",
"details": [
"-",
"C"
]
}
},
{
"engine": "Misc",
"browser": "PSP browser",
"platform": {
"inner": "PSP",
"details": [
"-",
"C"
]
}
},
{
"engine": "Other browsers",
"browser": "All others",
"platform": {
"inner": "-",
"details": [
"-",
"U"
]
}
}
] }

401
examples/ajax/sources/objects.txt
View File

@@ -1,401 +0,0 @@
{ "aaData": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "4",
"grade": "X"
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.0",
"platform": "Win 95+",
"version": "5",
"grade": "C"
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.5",
"platform": "Win 95+",
"version": "5.5",
"grade": "A"
},
{
"engine": "Trident",
"browser": "Internet Explorer 6",
"platform": "Win 98+",
"version": "6",
"grade": "A"
},
{
"engine": "Trident",
"browser": "Internet Explorer 7",
"platform": "Win XP SP2+",
"version": "7",
"grade": "A"
},
{
"engine": "Trident",
"browser": "AOL browser (AOL desktop)",
"platform": "Win XP",
"version": "6",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 1.0",
"platform": "Win 98+ / OSX.2+",
"version": "1.7",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 1.5",
"platform": "Win 98+ / OSX.2+",
"version": "1.8",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 2.0",
"platform": "Win 98+ / OSX.2+",
"version": "1.8",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 3.0",
"platform": "Win 2k+ / OSX.3+",
"version": "1.9",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Camino 1.0",
"platform": "OSX.2+",
"version": "1.8",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Camino 1.5",
"platform": "OSX.3+",
"version": "1.8",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Netscape 7.2",
"platform": "Win 95+ / Mac OS 8.6-9.2",
"version": "1.7",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Netscape Browser 8",
"platform": "Win 98SE+",
"version": "1.7",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Netscape Navigator 9",
"platform": "Win 98+ / OSX.2+",
"version": "1.8",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.0",
"platform": "Win 95+ / OSX.1+",
"version": "1",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.1",
"platform": "Win 95+ / OSX.1+",
"version": "1.1",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.2",
"platform": "Win 95+ / OSX.1+",
"version": "1.2",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.3",
"platform": "Win 95+ / OSX.1+",
"version": "1.3",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.4",
"platform": "Win 95+ / OSX.1+",
"version": "1.4",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.5",
"platform": "Win 95+ / OSX.1+",
"version": "1.5",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.6",
"platform": "Win 95+ / OSX.1+",
"version": "1.6",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.7",
"platform": "Win 98+ / OSX.1+",
"version": "1.7",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Mozilla 1.8",
"platform": "Win 98+ / OSX.1+",
"version": "1.8",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Seamonkey 1.1",
"platform": "Win 98+ / OSX.2+",
"version": "1.8",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Epiphany 2.20",
"platform": "Gnome",
"version": "1.8",
"grade": "A"
},
{
"engine": "Webkit",
"browser": "Safari 1.2",
"platform": "OSX.3",
"version": "125.5",
"grade": "A"
},
{
"engine": "Webkit",
"browser": "Safari 1.3",
"platform": "OSX.3",
"version": "312.8",
"grade": "A"
},
{
"engine": "Webkit",
"browser": "Safari 2.0",
"platform": "OSX.4+",
"version": "419.3",
"grade": "A"
},
{
"engine": "Webkit",
"browser": "Safari 3.0",
"platform": "OSX.4+",
"version": "522.1",
"grade": "A"
},
{
"engine": "Webkit",
"browser": "OmniWeb 5.5",
"platform": "OSX.4+",
"version": "420",
"grade": "A"
},
{
"engine": "Webkit",
"browser": "iPod Touch / iPhone",
"platform": "iPod",
"version": "420.1",
"grade": "A"
},
{
"engine": "Webkit",
"browser": "S60",
"platform": "S60",
"version": "413",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera 7.0",
"platform": "Win 95+ / OSX.1+",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera 7.5",
"platform": "Win 95+ / OSX.2+",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera 8.0",
"platform": "Win 95+ / OSX.2+",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera 8.5",
"platform": "Win 95+ / OSX.2+",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera 9.0",
"platform": "Win 95+ / OSX.3+",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera 9.2",
"platform": "Win 88+ / OSX.3+",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera 9.5",
"platform": "Win 88+ / OSX.3+",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Opera for Wii",
"platform": "Wii",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Nokia N800",
"platform": "N800",
"version": "-",
"grade": "A"
},
{
"engine": "Presto",
"browser": "Nintendo DS browser",
"platform": "Nintendo DS",
"version": "8.5",
"grade": "C/A<sup>1</sup>"
},
{
"engine": "KHTML",
"browser": "Konqureror 3.1",
"platform": "KDE 3.1",
"version": "3.1",
"grade": "C"
},
{
"engine": "KHTML",
"browser": "Konqureror 3.3",
"platform": "KDE 3.3",
"version": "3.3",
"grade": "A"
},
{
"engine": "KHTML",
"browser": "Konqureror 3.5",
"platform": "KDE 3.5",
"version": "3.5",
"grade": "A"
},
{
"engine": "Tasman",
"browser": "Internet Explorer 4.5",
"platform": "Mac OS 8-9",
"version": "-",
"grade": "X"
},
{
"engine": "Tasman",
"browser": "Internet Explorer 5.1",
"platform": "Mac OS 7.6-9",
"version": "1",
"grade": "C"
},
{
"engine": "Tasman",
"browser": "Internet Explorer 5.2",
"platform": "Mac OS 8-X",
"version": "1",
"grade": "C"
},
{
"engine": "Misc",
"browser": "NetFront 3.1",
"platform": "Embedded devices",
"version": "-",
"grade": "C"
},
{
"engine": "Misc",
"browser": "NetFront 3.4",
"platform": "Embedded devices",
"version": "-",
"grade": "A"
},
{
"engine": "Misc",
"browser": "Dillo 0.8",
"platform": "Embedded devices",
"version": "-",
"grade": "X"
},
{
"engine": "Misc",
"browser": "Links",
"platform": "Text only",
"version": "-",
"grade": "X"
},
{
"engine": "Misc",
"browser": "Lynx",
"platform": "Text only",
"version": "-",
"grade": "X"
},
{
"engine": "Misc",
"browser": "IE Mobile",
"platform": "Windows Mobile 6",
"version": "-",
"grade": "C"
},
{
"engine": "Misc",
"browser": "PSP browser",
"platform": "PSP",
"version": "-",
"grade": "C"
},
{
"engine": "Other browsers",
"browser": "All others",
"platform": "-",
"version": "-",
"grade": "U"
}
] }

515
examples/ajax/sources/objects_subarrays.txt
View File

@@ -1,515 +0,0 @@
{ "aaData": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"details": [
"4",
"X"
]
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.0",
"platform": "Win 95+",
"details": [
"5",
"C"
]
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.5",
"platform": "Win 95+",
"details": [
"5.5",
"A"
]
},
{
"engine": "Trident",
"browser": "Internet Explorer 6",
"platform": "Win 98+",
"details": [
"6",
"A"
]
},
{
"engine": "Trident",
"browser": "Internet Explorer 7",
"platform": "Win XP SP2+",
"details": [
"7",
"A"
]
},
{
"engine": "Trident",
"browser": "AOL browser (AOL desktop)",
"platform": "Win XP",
"details": [
"6",
"A"
]
},
{
"engine": "Gecko",
"browser": "Firefox 1.0",
"platform": "Win 98+ / OSX.2+",
"details": [
"1.7",
"A"
]
},
{
"engine": "Gecko",
"browser": "Firefox 1.5",
"platform": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
},
{
"engine": "Gecko",
"browser": "Firefox 2.0",
"platform": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
},
{
"engine": "Gecko",
"browser": "Firefox 3.0",
"platform": "Win 2k+ / OSX.3+",
"details": [
"1.9",
"A"
]
},
{
"engine": "Gecko",
"browser": "Camino 1.0",
"platform": "OSX.2+",
"details": [
"1.8",
"A"
]
},
{
"engine": "Gecko",
"browser": "Camino 1.5",
"platform": "OSX.3+",
"details": [
"1.8",
"A"
]
},
{
"engine": "Gecko",
"browser": "Netscape 7.2",
"platform": "Win 95+ / Mac OS 8.6-9.2",
"details": [
"1.7",
"A"
]
},
{
"engine": "Gecko",
"browser": "Netscape Browser 8",
"platform": "Win 98SE+",
"details": [
"1.7",
"A"
]
},
{
"engine": "Gecko",
"browser": "Netscape Navigator 9",
"platform": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.0",
"platform": "Win 95+ / OSX.1+",
"details": [
1,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.1",
"platform": "Win 95+ / OSX.1+",
"details": [
1.1,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.2",
"platform": "Win 95+ / OSX.1+",
"details": [
1.2,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.3",
"platform": "Win 95+ / OSX.1+",
"details": [
1.3,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.4",
"platform": "Win 95+ / OSX.1+",
"details": [
1.4,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.5",
"platform": "Win 95+ / OSX.1+",
"details": [
1.5,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.6",
"platform": "Win 95+ / OSX.1+",
"details": [
1.6,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.7",
"platform": "Win 98+ / OSX.1+",
"details": [
1.7,
"A"
]
},
{
"engine": "Gecko",
"browser": "Mozilla 1.8",
"platform": "Win 98+ / OSX.1+",
"details": [
1.8,
"A"
]
},
{
"engine": "Gecko",
"browser": "Seamonkey 1.1",
"platform": "Win 98+ / OSX.2+",
"details": [
"1.8",
"A"
]
},
{
"engine": "Gecko",
"browser": "Epiphany 2.20",
"platform": "Gnome",
"details": [
"1.8",
"A"
]
},
{
"engine": "Webkit",
"browser": "Safari 1.2",
"platform": "OSX.3",
"details": [
"125.5",
"A"
]
},
{
"engine": "Webkit",
"browser": "Safari 1.3",
"platform": "OSX.3",
"details": [
"312.8",
"A"
]
},
{
"engine": "Webkit",
"browser": "Safari 2.0",
"platform": "OSX.4+",
"details": [
"419.3",
"A"
]
},
{
"engine": "Webkit",
"browser": "Safari 3.0",
"platform": "OSX.4+",
"details": [
"522.1",
"A"
]
},
{
"engine": "Webkit",
"browser": "OmniWeb 5.5",
"platform": "OSX.4+",
"details": [
"420",
"A"
]
},
{
"engine": "Webkit",
"browser": "iPod Touch / iPhone",
"platform": "iPod",
"details": [
"420.1",
"A"
]
},
{
"engine": "Webkit",
"browser": "S60",
"platform": "S60",
"details": [
"413",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera 7.0",
"platform": "Win 95+ / OSX.1+",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera 7.5",
"platform": "Win 95+ / OSX.2+",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera 8.0",
"platform": "Win 95+ / OSX.2+",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera 8.5",
"platform": "Win 95+ / OSX.2+",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera 9.0",
"platform": "Win 95+ / OSX.3+",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera 9.2",
"platform": "Win 88+ / OSX.3+",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera 9.5",
"platform": "Win 88+ / OSX.3+",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Opera for Wii",
"platform": "Wii",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Nokia N800",
"platform": "N800",
"details": [
"-",
"A"
]
},
{
"engine": "Presto",
"browser": "Nintendo DS browser",
"platform": "Nintendo DS",
"details": [
"8.5",
"C/A<sup>1</sup>"
]
},
{
"engine": "KHTML",
"browser": "Konqureror 3.1",
"platform": "KDE 3.1",
"details": [
"3.1",
"C"
]
},
{
"engine": "KHTML",
"browser": "Konqureror 3.3",
"platform": "KDE 3.3",
"details": [
"3.3",
"A"
]
},
{
"engine": "KHTML",
"browser": "Konqureror 3.5",
"platform": "KDE 3.5",
"details": [
"3.5",
"A"
]
},
{
"engine": "Tasman",
"browser": "Internet Explorer 4.5",
"platform": "Mac OS 8-9",
"details": [
"-",
"X"
]
},
{
"engine": "Tasman",
"browser": "Internet Explorer 5.1",
"platform": "Mac OS 7.6-9",
"details": [
"1",
"C"
]
},
{
"engine": "Tasman",
"browser": "Internet Explorer 5.2",
"platform": "Mac OS 8-X",
"details": [
"1",
"C"
]
},
{
"engine": "Misc",
"browser": "NetFront 3.1",
"platform": "Embedded devices",
"details": [
"-",
"C"
]
},
{
"engine": "Misc",
"browser": "NetFront 3.4",
"platform": "Embedded devices",
"details": [
"-",
"A"
]
},
{
"engine": "Misc",
"browser": "Dillo 0.8",
"platform": "Embedded devices",
"details": [
"-",
"X"
]
},
{
"engine": "Misc",
"browser": "Links",
"platform": "Text only",
"details": [
"-",
"X"
]
},
{
"engine": "Misc",
"browser": "Lynx",
"platform": "Text only",
"details": [
"-",
"X"
]
},
{
"engine": "Misc",
"browser": "IE Mobile",
"platform": "Windows Mobile 6",
"details": [
"-",
"C"
]
},
{
"engine": "Misc",
"browser": "PSP browser",
"platform": "PSP",
"details": [
"-",
"C"
]
},
{
"engine": "Other browsers",
"browser": "All others",
"platform": "-",
"details": [
"-",
"U"
]
}
] }

530
examples/api/add_row.html
View File

@@ -1,221 +1,329 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
/* Global var for counter */
var giCount = 1;
$(document).ready(function() {
$('#example').dataTable();
} );
function fnClickAddRow() {
$('#example').dataTable().fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4" ] );
giCount++;
}
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables add row example
</div>
<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">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
<h1>Preamble</h1>
<p>DataTables adding rows in DataTables is done by assigning the DataTables jQuery object to a variable when initialising it, and then using it's API methods to add a new row. Deleting rows can be done in a similar manner.</p>
<h1>Live example</h1>
<p><a href="javascript:void(0);" onclick="fnClickAddRow();">Click to add a new row</a></p>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>allan</td>
<td>allan</td>
<td>allan</td>
<td>allan</td>
</tr>
</tbody>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">/* Global var for counter */
var giCount = 1;
$(document).ready(function() {
$('#example').dataTable();
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw();
counter++;
} );
// Automatically add a first row of data
$('#addRow').click();
} );
function fnClickAddRow() {
$('#example').dataTable().fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4" ] );
giCount++;
}</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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=
"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>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw();
counter++;
} );
// Automatically add a first row of data
$('#addRow').click();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./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 searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="./form.html">Form inputs</a></li>
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

1374
examples/api/api_in_init.html
View File

File diff suppressed because it is too large Load Diff

690
examples/api/counter_column.html
View File

@@ -1,690 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"fnDrawCallback": function ( oSettings ) {
var that = this;
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered )
{
this.$('td:first-child', {"filter":"applied"}).each( function (i) {
that.fnUpdate( i+1, this.parentNode, 0, false, false );
} );
}
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[ 1, 'asc' ]]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables row numbers example
</div>
<h1>Preamble</h1>
<p>A fairly common requirement for highly interactive tables which are displayed on the web is to have a column which with a 'counter' for the row number. This column should not be sortable, and change dynamically as the sorting and filtering applied to the table is altered by the end user.</p>
<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when sorting or filtering occurs. Also the first column is marked as un-sortable and initial sorting is applied only on the second column.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Index</th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td class="center">1</td>
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td class="center">2</td>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td class="center">3</td>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">4</td>
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">5</td>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">6</td>
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">7</td>
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">8</td>
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">9</td>
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">10</td>
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">11</td>
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">12</td>
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">13</td>
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">14</td>
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">15</td>
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">16</td>
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">17</td>
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">18</td>
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">19</td>
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">20</td>
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">21</td>
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">22</td>
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">23</td>
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">24</td>
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">25</td>
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">26</td>
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">27</td>
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">28</td>
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">29</td>
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">30</td>
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">31</td>
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">32</td>
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">33</td>
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">34</td>
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">35</td>
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">36</td>
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">37</td>
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">38</td>
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">39</td>
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">40</td>
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">41</td>
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">42</td>
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">43</td>
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td class="center">44</td>
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td class="center">45</td>
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">46</td>
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td class="center">47</td>
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td class="center">48</td>
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td class="center">49</td>
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td class="center">50</td>
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td class="center">51</td>
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td class="center">52</td>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td class="center">53</td>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td class="center">54</td>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td class="center">55</td>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td class="center">56</td>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td class="center">57</td>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Index</th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"fnDrawCallback": function ( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered )
{
this.$('td:first-child', {"filter":"applied"}).each( function (i) {
that.fnUpdate( i+1, this.parentNode, 0, false, false );
} );
}
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[ 1, 'asc' ]]
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

788
examples/api/counter_columns.html Normal file
View File

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

640
examples/api/editable.html
View File

@@ -1,640 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../examples_support/jquery.jeditable.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the jEditable handlers to the table */
oTable.$('td').editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px",
"width": "100%"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables editing example
</div>
<h1>Preamble</h1>
<p>Using DataTables in-combination with the excellent <a href="http://www.appelsiini.net/projects/jeditable">jEditable</a> plugin for jQuery allows you to produce a table which can have individual cells edited. The table can then be updated such that filtering, sorting etc. will all work as expected. This is showing in the demo below.</p>
<p>The example shows how a table element can be edited (you could limit to a particular column if you wish using the selector), posted to the server (for saving in a database or whatever) and then placed back into the DataTable. The server's processing in this example simply appends the string '(server updated)' to indicate that something has happened on the server.</p>
<p>Note also that this example makes use of the information in the 'ID' attribute of the TR element. This is useful in order to tell the server what row is being updated - this can readily be expended to include column information as required. Further to this, it is worth noting that to use this type of example with DataTables' server-side processing option, you must use <a href="http://datatables.net/usage/callbacks#fnDrawCallback">fnDrawCallback</a> to apply the event listeners on each draw.</p>
<p>Finally, if you are interested in a full <a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a> implementation for DataTables, check out the <a href="http://editor.datatables.net">Editor plug-in for DataTables</a>, which provides a flexible and easy to use create, edit and delete environment for DataTables controlled tables with full server interaction.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr id="1" class="gradeX">
<td>Trident</td>
<td>Internet
Explorer
4.0
</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr id="2" class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr id="3" class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr id="4" class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr id="5" class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr id="6" class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr id="7" class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr id="8" class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="9" class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="10" class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr id="11" class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="12" class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="13" class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr id="14" class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr id="15" class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="16" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr id="17" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr id="18" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr id="19" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr id="20" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr id="21" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr id="22" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr id="23" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr id="24" class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="25" class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="26" class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr id="27" class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr id="28" class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr id="29" class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr id="30" class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr id="31" class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr id="32" class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr id="33" class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr id="34" class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="35" class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="36" class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="37" class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="38" class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="39" class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="40" class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="41" class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="42" class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="43" class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr id="44" class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr id="45" class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr id="46" class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr id="47" class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr id="48" class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr id="49" class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr id="50" class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr id="51" class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr id="52" class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr id="53" class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr id="54" class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr id="55" class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr id="56" class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr id="57" class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the jEditable handlers to the table */
oTable.$('td').editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px",
"width": "100%"
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

2503
examples/api/form.html
View File

File diff suppressed because it is too large Load Diff

1398
examples/api/highlight.html
View File

File diff suppressed because it is too large Load Diff

71
examples/api/index.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - API</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>API</span></h1>
<div class="info">
<p>The real power of DataTables can be exploited through the use of the API that it presents. The
DataTables API is designed to be simple, consistent and easy to use. The examples in this section show
how the API may be used.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<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 searching (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
<li><a href="./form.html">Form inputs</a></li>
<li><a href="./counter_columns.html">Index column</a></li>
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
<li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="./regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

1468
examples/api/multi_filter.html
View File

File diff suppressed because it is too large Load Diff

1535
examples/api/multi_filter_select.html
View File

File diff suppressed because it is too large Load Diff

1575
examples/api/regex.html
View File

File diff suppressed because it is too large Load Diff

1092
examples/api/row_details.html
View File

File diff suppressed because it is too large Load Diff

1385
examples/api/select_row.html
View File

File diff suppressed because it is too large Load Diff

1420
examples/api/select_single_row.html
View File

File diff suppressed because it is too large Load Diff

1405
examples/api/show_hide.html
View File

File diff suppressed because it is too large Load Diff

1218
examples/api/tabs_and_scrolling.html
View File

File diff suppressed because it is too large Load Diff

1368
examples/basic_init/alt_pagination.html
View File

File diff suppressed because it is too large Load Diff

774
examples/basic_init/comma-decimal.html Normal file
View File

@@ -0,0 +1,774 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language - Comma decimal place</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"language": {
"decimal": ",",
"thousands": "."
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Language - Comma decimal place</span></h1>
<div class="info">
<p>A dot (<code>.</code>) is used to mark the decimal place in Javascript, however, <a href=
"http://en.wikipedia.org/wiki/Decimal_mark">many parts of the world use a comma</a> (<code>,</code>)
and other characters such as the Unicode decimal separator (<code>&#9110;</code>) or a dash
(<code>-</code>) are often used to show the decimal place in a displayed number.</p>
<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however,
DataTables' type detection and sorting methods can be instructed through the <a href=
"//datatables.net/reference/option/language.decimal"><code class="option" title=
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option which character is
used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type
detection and sorting algorithms to sort numbers in your table.</p>
<p>Any character can be passed in using the <a href=
"//datatables.net/reference/option/language.decimal"><code class="option" title=
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option, although the
decimal place character used in a single table must be consistent (i.e. numbers with a dot decimal
place and comma decimal place cannot both appear in the same table). Different tables on the same page
can use different decimal characters if required.</p>
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the
final column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320.800,00</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170.750,00</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86.000,00</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433.060,00</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162.700,00</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372.000,00</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137.500,00</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327.900,00</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205.500,00</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103.600,00</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90.560,00</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342.000,00</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470.600,00</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313.500,00</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385.750,00</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198.500,00</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725.000,00</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237.500,00</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132.000,00</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217.500,00</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345.000,00</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675.000,00</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106.450,00</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85.600,00</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1.200.000,00</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92.575,00</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357.650,00</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206.850,00</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850.000,00</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163.000,00</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95.400,00</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114.500,00</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145.000,00</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235.500,00</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324.050,00</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85.675,00</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164.500,00</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109.850,00</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452.500,00</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136.200,00</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645.750,00</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234.500,00</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163.500,00</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139.575,00</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98.540,00</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87.500,00</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138.575,00</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125.250,00</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115.000,00</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75.650,00</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145.600,00</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356.250,00</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103.500,00</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86.500,00</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183.000,00</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183.000,00</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112.000,00</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;language&quot;: {
&quot;decimal&quot;: &quot;,&quot;,
&quot;thousands&quot;: &quot;.&quot;
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="./dom.html">DOM positioning</a></li>
<li><a href="./flexible_width.html">Flexible table width</a></li>
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li class="active"><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

1352
examples/basic_init/complex_header.html
View File

File diff suppressed because it is too large Load Diff

1423
examples/basic_init/dom.html
View File

File diff suppressed because it is too large Load Diff

1345
examples/basic_init/filter_only.html
View File

File diff suppressed because it is too large Load Diff

1345
examples/basic_init/flexible_width.html
View File

File diff suppressed because it is too large Load Diff

1373
examples/basic_init/hidden_columns.html
View File

File diff suppressed because it is too large Load Diff

74
examples/basic_init/index.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Basic initialisation</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Basic initialisation</span></h1>
<div class="info">
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The
examples in this section demonstrate basic initialisation of DataTables and how it can be easily
customised by passing an object with the options you want.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="./dom.html">DOM positioning</a></li>
<li><a href="./flexible_width.html">Flexible table width</a></li>
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

1359
examples/basic_init/language.html
View File

File diff suppressed because it is too large Load Diff

1331
examples/basic_init/multi_col_sort.html
View File

File diff suppressed because it is too large Load Diff

879
examples/basic_init/multiple_tables.html
View File

@@ -1,416 +1,475 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.dataTable').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables multiple tables example
<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">
<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">
div.dataTables_wrapper {
margin-bottom: 3em;
}
</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>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('table.display').dataTable();
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Multiple tables</span></h1>
<div class="info">
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done
by using a jQuery selector which will pick up multiple tables.</p>
<p>The tables are independent for user control (i.e. user controlled paging on one table does not
effect the others), but they do share the initialisation parameters given (for example if you specific
the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to
manipulate both together, or independently.</p>
<p>The example below shows two tables initialised with a single line of code, through the use of the
<code>table.display</code> selector (i.e. select all elements which have the class of
<code>table.display</code> (which is suitable in this example, you might wish to use a different
selector).</p>
</div>
<h1>Preamble</h1>
<p>Using standard jQuery selector syntax with DataTables it is trivial to initialise multiple tables with a single line of Javascript, as shown below. All tables are completely independent, but share the parameters passed thought the initialiser object (for example if you specific the Spanish language file, all tables will be shown in Spanish).</p>
<h1>Live example</h1>
<p style="font-weight: bold;">Trident based browsers</p>
<div id="demo_trident">
<table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="allan">
<thead>
<tr>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</table>
<table id="" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$103,600</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>$342,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>$217,500</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>$92,575</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>$324,050</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>$75,650</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>$183,000</td>
</tr>
</tbody>
</table>
<table id="" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>$198,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$132,000</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>$145,000</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>$136,200</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>$163,500</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>$103,500</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('table.display').dataTable();
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;">div.dataTables_wrapper {
margin-bottom: 3em;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div class="clear"></div>
<p style="clear:both; margin-top:4em; font-weight: bold;">Gecko based browsers</p>
<div id="demo_gecko">
<table cellpadding="0" cellspacing="0" border="0" class="display dataTable">
<thead>
<tr>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
</table>
</div>
<div class="clear"></div>
<p style="clear:both; margin-top:4em; font-weight: bold;">WebKit based browsers (note no platform)</p>
<div id="demo_webkit">
<table cellpadding="0" cellspacing="0" border="0" class="display dataTable">
<thead>
<tr>
<th>Browser</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>Safari 1.2</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Safari 1.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Safari 2.0</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Safari 3.0</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>OmniWeb 5.5</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>iPod Touch / iPhone</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('.dataTable').dataTable();
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li class="active"><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
<li><a href="./dom.html">DOM positioning</a></li>
<li><a href="./flexible_width.html">Flexible table width</a></li>
<li><a href="./state_save.html">State saving</a></li>
<li><a href="./alt_pagination.html">Alternative pagination</a></li>
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="./language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

1525
examples/basic_init/scroll_x.html
View File

File diff suppressed because it is too large Load Diff

1506
examples/basic_init/scroll_xy.html
View File

File diff suppressed because it is too large Load Diff

1361
examples/basic_init/scroll_y.html
View File

File diff suppressed because it is too large Load Diff

610
examples/basic_init/scroll_y_infinite.html
View File

@@ -1,610 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
div.table_Wrapper { border:10px solid blue; }
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables infinite vertical scrolling example
</div>
<h1>Preamble</h1>
<p>This example shows the DataTables table body scrolling in the vertical direction with infinite scrolling. The idea of infinite scrolling means that data will be added to the table dynamically, as and when needed by the user scrolling the table. A sub-set of the data is loaded initially, and more added as needed (technically of course, it is not "infinite" since it will stop loading data at the end of the data set!). Note that pagination much be enabled for infinite scrolling to work, but the pagination controls will not be shown (they could be, but can cause very confusing user interaction).</p>
<p>DataTables' infinite scroll can be used with any of the <a href="http://datatables.net/usage/#data_sources">four data sources</a> supported, and they do not require any modification to work (including server-side scripts).</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="odd gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px"
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

1351
examples/basic_init/scroll_y_theme.html
View File

File diff suppressed because it is too large Load Diff

1359
examples/basic_init/state_save.html
View File

File diff suppressed because it is too large Load Diff

1350
examples/basic_init/table_sorting.html
View File

File diff suppressed because it is too large Load Diff

598
examples/basic_init/themes.html
View File

@@ -1,598 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table_jui.css";
@import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables with jQuery UI themes example
</div>
<h1>Preamble</h1>
<p>Styling widgets such as DataTables can often take a considerable amount of time to fully integrate it into your site/application, with the demo styles as a base. This holds true for all widgets, and the jQuery UI team have addressed this issue by introducing themes through their excellent <a href="http://jqueryui.com/themeroller/">ThemeRoller</a>. DataTables has full support for ThemeRoller created themes, all you need to do is enable the <b>bJQueryUI</b> flag in the initialisation object, and the required mark-up and classes will be added by DataTables.</p>
<h1>Live example</h1>
<div class="demo_jui">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

600
examples/basic_init/zero_config.html
View File

@@ -1,600 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables zero configuration example
</div>
<h1>Preamble</h1>
<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</div>
</div>
</body>
</html>

750
examples/basic_init/zero_configuration.html Normal file
View File

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

503
examples/data_sources/ajax.html
View File

@@ -1,208 +1,309 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '../ajax/sources/arrays.txt'
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example
</div>
<h1>Preamble</h1>
<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aaData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '../ajax/sources/arrays.txt'
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<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">
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
<title>DataTables example - Ajax sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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=
"DataTables initialisation option">ajax<span>DT</span></code></a> option also allows for more advanced
configuration such as altering how the Ajax request is made. See the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax<span>DT</span></code></a> documentation and the <a href=
"../ajax">other Ajax examples</a> for further information.</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source (object
parameters can also be used through the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data<span>DT</span></code></a> option ).</p>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: '../ajax/data/arrays.txt'
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Data sources</a></h3>
<ul class="toc active">
<li><a href="./dom.html">HTML (DOM) sourced data</a></li>
<li class="active"><a href="./ajax.html">Ajax sourced data</a></li>
<li><a href="./js_array.html">Javascript sourced data</a></li>
<li><a href="./server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

1340
examples/data_sources/dom.html
View File

File diff suppressed because it is too large Load Diff

69
examples/data_sources/index.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Data sources</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Data sources</span></h1>
<div class="info">
<p>DataTables can obtain data from four different fundamental sources:</p>
<ul class="markdown">
<li>HTML document (DOM)</li>
<li>Javascript (array / objects)</li>
<li>Ajax sourced data with client-side processing</li>
<li>Ajax sourced data with server-side processing</li>
</ul>
<p>Which of these options is used to populate the table with data depends upon how the table is
initialised. The examples in this section show these four different data source types.</p>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Data sources</a></h3>
<ul class="toc">
<li><a href="./dom.html">HTML (DOM) sourced data</a></li>
<li><a href="./ajax.html">Ajax sourced data</a></li>
<li><a href="./js_array.html">Javascript sourced data</a></li>
<li><a href="./server_side.html">Server-side processing</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

690
examples/data_sources/js_array.html
View File

@@ -1,289 +1,419 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
/* Data set - can contain whatever information you want */
var aDataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
['Webkit','Safari 1.2','OSX.3','125.5','A'],
['Webkit','Safari 1.3','OSX.3','312.8','A'],
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
];
$(document).ready(function() {
$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"aaData": aDataSet,
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "<b>A</b>";
}
return sReturn;
}
}
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables dynamic creation example
</div>
<h1>Preamble</h1>
<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 "aaData" array in the initialisation object. A table node must first be created before the initialiser is called (as shown in the code below). This is also useful for optimisation - if you are able to format the data as required, this method can save a lot of DOM parsing to create a table.</p>
<h1>Live example</h1>
<div id="dynamic"></div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#demo').html( '&lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;&lt;/table&gt;' );
<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">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
['Webkit','Safari 1.2','OSX.3','125.5','A'],
['Webkit','Safari 1.3','OSX.3','312.8','A'],
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
];
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "&lt;b&gt;A&lt;/b&gt;";
}
return sReturn;
}
}
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
]
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<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=
"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 class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<div id="demo"></div>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
['Webkit','Safari 1.2','OSX.3','125.5','A'],
['Webkit','Safari 1.3','OSX.3','312.8','A'],
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A&lt;sup&gt;1&lt;/sup&gt;'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
];
$(document).ready(function() {
$('#demo').html( '&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&gt;&lt;/table&gt;' );
$('#example').dataTable( {
&quot;data&quot;: dataSet,
&quot;columns&quot;: [
{ &quot;title&quot;: &quot;Engine&quot; },
{ &quot;title&quot;: &quot;Browser&quot; },
{ &quot;title&quot;: &quot;Platform&quot; },
{ &quot;title&quot;: &quot;Version&quot;, &quot;class&quot;: &quot;center&quot; },
{ &quot;title&quot;: &quot;Grade&quot;, &quot;class&quot;: &quot;center&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Data sources</a></h3>
<ul class="toc active">
<li><a href="./dom.html">HTML (DOM) sourced data</a></li>
<li><a href="./ajax.html">Ajax sourced data</a></li>
<li class="active"><a href="./js_array.html">Javascript sourced data</a></li>
<li><a href="./server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

686
examples/data_sources/server_side.html
View File

@@ -1,390 +1,310 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</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>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../server_side/scripts/server_processing.php"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables server-side processing example
</div>
<h1>Preamble</h1>
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. Basically all of the paging, filtering, sorting etc that DataTables does can be handed off to a server (or any other data source - Google Gears or Adobe Air for example!) and DataTables is just an events and display module.</p>
<p>The example here shows a very simple display of the CSS data (used in all my other examples), but in this instance coming from the server on each draw. Filtering, multi-column sorting etc all work as you would expect.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../server_side/scripts/server_processing.php"
} );
} );</pre>
<style type="text/css">
@import "../examples_support/syntax/css/shCore.css";
</style>
<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
<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">
<h1>Server response</h1>
<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
<pre id="latest_xhr" class="brush: js;"></pre>
<h1>Server side (PHP) code</h1>
<pre>&lt;?php
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "ajax";
/* Database connection information */
$gaSql['user'] = "";
$gaSql['password'] = "";
$gaSql['db'] = "";
$gaSql['server'] = "localhost";
/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/
/*
* MySQL connection
*/
$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
die( 'Could not open connection to server' );
mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
die( 'Could not select database '. $gaSql['db'] );
/*
* Paging
*/
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) &amp;&amp; $_GET['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}
/*
* Ordering
*/
$sOrder = "";
if ( isset( $_GET['iSortCol_0'] ) )
{
$sOrder = "ORDER BY ";
for ( $i=0 ; $i&lt;intval( $_GET['iSortingCols'] ) ; $i++ )
{
if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
{
$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
}
}
$sOrder = substr_replace( $sOrder, "", -2 );
if ( $sOrder == "ORDER BY" )
{
$sOrder = "";
}
}
/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
$sWhere = "";
if ( isset($_GET['sSearch']) &amp;&amp; $_GET['sSearch'] != "" )
{
$sWhere = "WHERE (";
for ( $i=0 ; $i&lt;count($aColumns) ; $i++ )
{
$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
}
$sWhere = substr_replace( $sWhere, "", -3 );
$sWhere .= ')';
}
/* Individual column filtering */
for ( $i=0 ; $i&lt;count($aColumns) ; $i++ )
{
if ( isset($_GET['bSearchable_'.$i]) &amp;&amp; $_GET['bSearchable_'.$i] == "true" &amp;&amp; $_GET['sSearch_'.$i] != '' )
{
if ( $sWhere == "" )
{
$sWhere = "WHERE ";
}
else
{
$sWhere .= " AND ";
}
$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
}
}
/*
* SQL queries
* Get data to display
*/
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
FROM $sTable
$sWhere
$sOrder
$sLimit
";
$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
/* Data set length after filtering */
$sQuery = "
SELECT FOUND_ROWS()
";
$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];
/* Total data set length */
$sQuery = "
SELECT COUNT(`".$sIndexColumn."`)
FROM $sTable
";
$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultTotal = mysql_fetch_array($rResultTotal);
$iTotal = $aResultTotal[0];
/*
* Output
*/
$output = array(
"sEcho" =&gt; intval($_GET['sEcho']),
"iTotalRecords" =&gt; $iTotal,
"iTotalDisplayRecords" =&gt; $iFilteredTotal,
"aaData" =&gt; array()
);
while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();
for ( $i=0 ; $i&lt;count($aColumns) ; $i++ )
{
if ( $aColumns[$i] == "version" )
{
/* Special output formatting for 'version' column */
$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
}
else if ( $aColumns[$i] != ' ' )
{
/* General output */
$row[] = $aRow[ $aColumns[$i] ];
}
}
$output['aaData'][] = $row;
}
echo json_encode( $output );
?&gt;</pre>
<h1>Other examples</h1>
<div class="demo_links">
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling: <br>
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li>Events: <br>
<a href="../advanced_init/events_live.html">Live events</a> /
<a href="../advanced_init/events_pre_init.html">Pre-init</a> /
<a href="../advanced_init/events_post_init.html">Post-init</a>
</li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
<title>DataTables example - Server-side processing</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/server_processing.php"
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
databases, you might want to consider using the server-side options that DataTables provides. With
server-side processing enabled, all paging, searching, ordering actions that DataTables performs are
handed off to a server where an SQL engine (or similar) can perform these actions on the large data set
(after all, that's what the database engine is designed for!). As such, each draw of the table will
result in a new Ajax request being made to get the required data.</p>
<p>Server-side processing is enabled by setting the <a href=
"//datatables.net/reference/option/serverSide"><code class="option" title=
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and
providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class=
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
<p>This example shows a very simple table, matching the other examples, but in this instance using
server-side processing. For further and more complex examples of using server-side processing, please
refer to the <a href="../server_side">server-side processing</a> examples.</p>
</div>
<div class="demo_links">
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
</ul>
<h2>Ajax data source</h2>
<ul>
<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
$('#example').dataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;../server_side/scripts/server_processing.php&quot;
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p><code class="multiline brush: js;"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
</div>
<div id="footer" class="clear" style="text-align:center;">
<p>
Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
</p>
<span style="font-size:10px;">
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
</span>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/compact.html">Base style - compact</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Data sources</a></h3>
<ul class="toc active">
<li><a href="./dom.html">HTML (DOM) sourced data</a></li>
<li><a href="./ajax.html">Ajax sourced data</a></li>
<li><a href="./js_array.html">Javascript sourced data</a></li>
<li class="active"><a href="./server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column searching (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

67
examples/examples_support/data.sql
View File

@@ -1,67 +0,0 @@
CREATE TABLE IF NOT EXISTS `ajax` (
`id` int(10) NOT NULL auto_increment,
`engine` varchar(255) NOT NULL default '',
`browser` varchar(255) NOT NULL default '',
`platform` varchar(255) NOT NULL default '',
`version` float NOT NULL default '0',
`grade` varchar(20) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Firefox 3.0', 'Win 2k+ / OSX.3+', '1.9', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.0', 'Win 95+ / OSX.1+', '1', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.1', 'Win 95+ / OSX.1+', '1.1', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.2', 'Win 95+ / OSX.1+', '1.2', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.3', 'Win 95+ / OSX.1+', '1.3', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.4', 'Win 95+ / OSX.1+', '1.4', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.5', 'Win 95+ / OSX.1+', '1.5', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.6', 'Win 95+ / OSX.1+', '1.6', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.7', 'Win 98+ / OSX.1+', '1.7', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Mozilla 1.8', 'Win 98+ / OSX.1+', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Seamonkey 1.1', 'Win 98+ / OSX.2+', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Gecko', 'Epiphany 2.20', 'Gnome', '1.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Webkit', 'Safari 1.2', 'OSX.3', '125.5', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Webkit', 'Safari 1.3', 'OSX.3', '312.8', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Webkit', 'Safari 2.0', 'OSX.4+', '419.3', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Webkit', 'Safari 3.0', 'OSX.4+', '522.1', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Webkit', 'OmniWeb 5.5', 'OSX.4+', '420', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Webkit', 'iPod Touch / iPhone', 'iPod', '420.1', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Webkit', 'S60', 'S60', '413', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera 7.0', 'Win 95+ / OSX.1+', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera 7.5', 'Win 95+ / OSX.2+', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera 8.0', 'Win 95+ / OSX.2+', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera 8.5', 'Win 95+ / OSX.2+', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera 9.0', 'Win 95+ / OSX.3+', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera 9.2', 'Win 88+ / OSX.3+', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera 9.5', 'Win 88+ / OSX.3+', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Opera for Wii', 'Wii', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Nokia N800', 'N800', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Presto', 'Nintendo DS browser', 'Nintendo DS', '8.5', 'C/A<sup>1</sup>' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'KHTML', 'Konqureror 3.1', 'KDE 3.1', '3.1', 'C' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'KHTML', 'Konqureror 3.3', 'KDE 3.3', '3.3', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'KHTML', 'Konqureror 3.5', 'KDE 3.5', '3.5', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Tasman', 'Internet Explorer 4.5', 'Mac OS 8-9', '-', 'X' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Tasman', 'Internet Explorer 5.1', 'Mac OS 7.6-9', '1', 'C' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Tasman', 'Internet Explorer 5.2', 'Mac OS 8-X', '1', 'C' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Misc', 'NetFront 3.1', 'Embedded devices', '-', 'C' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Misc', 'NetFront 3.4', 'Embedded devices', '-', 'A' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Misc', 'Dillo 0.8', 'Embedded devices', '-', 'X' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Misc', 'Links', 'Text only', '-', 'X' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Misc', 'Lynx', 'Text only', '-', 'X' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Misc', 'IE Mobile', 'Windows Mobile 6', '-', 'C' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Misc', 'PSP browser', 'PSP', '-', 'C' );
INSERT INTO ajax ( engine, browser, platform, version, grade ) VALUES ( 'Other browsers', 'All others', '-', '-', 'U' );

17
examples/examples_support/de_DE.txt
View File

@@ -1,17 +0,0 @@
{
"sProcessing": "Bitte warten...",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sZeroRecords": "Keine Einträge vorhanden.",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sSearch": "Suchen",
"sUrl": "",
"oPaginate": {
"sFirst": "Erster",
"sPrevious": "Zurück",
"sNext": "Nächster",
"sLast": "Letzter"
}
}

3
examples/examples_support/editable_ajax.php
View File

@@ -1,3 +0,0 @@
<?php
echo $_POST['value'].' (server updated)';
?>

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