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

Compare commits

base: github:1.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_wip
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

464 Commits
1.9.3 ... 1_10_wip

Author SHA1 Message Date
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
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
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
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
268 changed files with 72704 additions and 69707 deletions
Expand all files Collapse all files

1
.datatables-commit-sync Normal file
View File

@@ -0,0 +1 @@
ab72434b27d860f3725fa93ccb5a85bec7b14e6f

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!

60
Readme.md Normal file
View File

@@ -0,0 +1,60 @@
# 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:
```html
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/latest/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.0/jquery.dataTables.js"></script>
```
## 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.0-dev",
"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.0-dev",
"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.0-dev",
"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"
]
}

1366
examples/advanced_init/column_render.html
View File

File diff suppressed because it is too large Load Diff

1368
examples/advanced_init/complex_header.html
View File

File diff suppressed because it is too large Load Diff

1351
examples/advanced_init/defaults.html
View File

File diff suppressed because it is too large Load Diff

1359
examples/advanced_init/dom_multiple_elements.html
View File

File diff suppressed because it is too large Load Diff

1368
examples/advanced_init/dom_toolbar.html
View File

File diff suppressed because it is too large Load Diff

1372
examples/advanced_init/dt_events.html
View File

File diff suppressed because it is too large Load Diff

1380
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>

1384
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>

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

@@ -0,0 +1,761 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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 searcgubg) which can
be immensely powerful for transforming data in the display to be intuitive for the end user, while
using different, or more complex data, for other actions. For example, if a table contains a formatted
telephone number in the format <code>xxx-xxxx</code>, intuitively a user might search for the number
but without a dash. Using orthogonal data for searching allows both forms of the telephone number to be
used, while only the nicely formatted number is displayed in the table.</p>
<p>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>
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
</ul>
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In
this case the first column has been formatted so the first name has abbreviated, but the full name is
still searchable (search for "Bruno" for example). Additionally, although the last column contains
non-numeric data in it (<code>/m</code>) the column will correctly order numerically as the
<code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric
data.</p>
</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-filter="Tiger Nixon">T. Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td data-sort="3120">$3,120/m</td>
</tr>
<tr>
<td data-filter="Garrett Winters">G. Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td data-sort="5300">$5,300/m</td>
</tr>
<tr>
<td data-filter="Ashton Cox">A. Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td data-sort="4800">$4,800/m</td>
</tr>
<tr>
<td data-filter="Cedric Kelly">C. Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td data-sort="3600">$3,600/m</td>
</tr>
<tr>
<td data-filter="Jenna Elliott">J. Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td data-sort="5300">$5,300/m</td>
</tr>
<tr>
<td data-filter="Brielle Williamson">B. Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td data-sort="4525">$4,525/m</td>
</tr>
<tr>
<td data-filter="Herrod Chandler">H. Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td data-sort="4080">$4,080/m</td>
</tr>
<tr>
<td data-filter="Rhona Davidson">R. Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td data-sort="6730">$6,730/m</td>
</tr>
<tr>
<td data-filter="Colleen Hurst">C. Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td data-sort="5000">$5,000/m</td>
</tr>
<tr>
<td data-filter="Sonya Frost">S. Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td data-sort="3600">$3,600/m</td>
</tr>
<tr>
<td data-filter="Jena Gaines">J. Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td data-sort="5000">$5,000/m</td>
</tr>
<tr>
<td data-filter="Quinn Flynn">Q. Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td data-sort="4200">$4,200/m</td>
</tr>
<tr>
<td data-filter="Charde Marshall">C. Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td data-sort="5300">$5,300/m</td>
</tr>
<tr>
<td data-filter="Haley Kennedy">H. Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td data-sort="4800">$4,800/m</td>
</tr>
<tr>
<td data-filter="Tatyana Fitzpatrick">T. Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td data-sort="2875">$2,875/m</td>
</tr>
<tr>
<td data-filter="Michael Silva">M. Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td data-sort="3750">$3,750/m</td>
</tr>
<tr>
<td data-filter="Paul Byrd">P. Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td data-sort="5000">$5,000/m</td>
</tr>
<tr>
<td data-filter="Gloria Little">G. Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td data-sort="3120">$3,120/m</td>
</tr>
<tr>
<td data-filter="Bradley Greer">B. Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td data-sort="3120">$3,120/m</td>
</tr>
<tr>
<td data-filter="Dai Rios">D. Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td data-sort="4200">$4,200/m</td>
</tr>
<tr>
<td data-filter="Jenette Caldwell">J. Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td data-sort="4965">$4,965/m</td>
</tr>
<tr>
<td data-filter="Yuri Berry">Y. Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td data-sort="3600">$3,600/m</td>
</tr>
<tr>
<td data-filter="Caesar Vance">C. Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td data-sort="4965">$4,965/m</td>
</tr>
<tr>
<td data-filter="Doris Wilder">D. Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td data-sort="4965">$4,965/m</td>
</tr>
<tr>
<td data-filter="Angelica Ramos">A. Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td data-sort="2875">$2,875/m</td>
</tr>
<tr>
<td data-filter="Gavin Joyce">G. Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td data-sort="4525">$4,525/m</td>
</tr>
<tr>
<td data-filter="Jennifer Chang">J. Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td data-sort="4080">$4,080/m</td>
</tr>
<tr>
<td data-filter="Brenden Wagner">B. Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td data-sort="3750">$3,750/m</td>
</tr>
<tr>
<td data-filter="Ebony Grimes">E. Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td data-sort="2875">$2,875/m</td>
</tr>
<tr>
<td data-filter="Russell Chavez">R. Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td data-sort="3600">$3,600/m</td>
</tr>
<tr>
<td data-filter="Michelle House">M. House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td data-sort="3750">$3,750/m</td>
</tr>
<tr>
<td data-filter="Suki Burks">S. Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td data-sort="2875">$2,875/m</td>
</tr>
<tr>
<td data-filter="Prescott Bartlett">P. Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td data-sort="6730">$6,730/m</td>
</tr>
<tr>
<td data-filter="Gavin Cortez">G. Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td data-sort="6730">$6,730/m</td>
</tr>
<tr>
<td data-filter="Martena Mccray">M. Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td data-sort="4080">$4,080/m</td>
</tr>
<tr>
<td data-filter="Unity Butler">U. Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td data-sort="3750">$3,750/m</td>
</tr>
<tr>
<td data-filter="Howard Hatfield">H. Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td data-sort="4080">$4,080/m</td>
</tr>
<tr>
<td data-filter="Hope Fuentes">H. Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td data-sort="4200">$4,200/m</td>
</tr>
<tr>
<td data-filter="Vivian Harrell">V. Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td data-sort="4965">$4,965/m</td>
</tr>
<tr>
<td data-filter="Timothy Mooney">T. Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td data-sort="4200">$4,200/m</td>
</tr>
<tr>
<td data-filter="Jackson Bradshaw">J. Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td data-sort="5000">$5,000/m</td>
</tr>
<tr>
<td data-filter="Miriam Weiss">M. Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td data-sort="4965">$4,965/m</td>
</tr>
<tr>
<td data-filter="Bruno Nash">B. Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td data-sort="4200">$4,200/m</td>
</tr>
<tr>
<td data-filter="Odessa Jackson">O. Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td data-sort="3600">$3,600/m</td>
</tr>
<tr>
<td data-filter="Thor Walton">T. Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td data-sort="3600">$3,600/m</td>
</tr>
<tr>
<td data-filter="Finn Camacho">F. Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td data-sort="4800">$4,800/m</td>
</tr>
<tr>
<td data-filter="Elton Baldwin">E. Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td data-sort="6730">$6,730/m</td>
</tr>
<tr>
<td data-filter="Zenaida Frank">Z. Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td data-sort="4800">$4,800/m</td>
</tr>
<tr>
<td data-filter="Zorita Serrano">Z. Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td data-sort="5300">$5,300/m</td>
</tr>
<tr>
<td data-filter="Jennifer Acosta">J. Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td data-sort="2875">$2,875/m</td>
</tr>
<tr>
<td data-filter="Cara Stevens">C. Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td data-sort="4800">$4,800/m</td>
</tr>
<tr>
<td data-filter="Hermione Butler">H. Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td data-sort="4080">$4,080/m</td>
</tr>
<tr>
<td data-filter="Lael Greer">L. Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td data-sort="3120">$3,120/m</td>
</tr>
<tr>
<td data-filter="Jonas Alexander">J. Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td data-sort="5300">$5,300/m</td>
</tr>
<tr>
<td data-filter="Shad Decker">S. Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td data-sort="5300">$5,300/m</td>
</tr>
<tr>
<td data-filter="Michael Bruce">M. Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td data-sort="4080">$4,080/m</td>
</tr>
<tr>
<td data-filter="Donna Snider">D. Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td data-sort="3120">$3,120/m</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
</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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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="../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/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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<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>

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

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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="../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 Init</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

1340
examples/advanced_init/language_file.html
View File

File diff suppressed because it is too large Load Diff

1338
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>

1374
examples/advanced_init/row_callback.html
View File

File diff suppressed because it is too large Load Diff

1467
examples/advanced_init/row_grouping.html
View File

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,777 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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/init/columns.orderSequence"><code class="option" title=
"Initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also
allows you to limit the ordering to a single direction, or you could add complex behaviour to the
ordering interaction.</p>
<p>The example below shows:</p>
<ul>
<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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$3,750</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$5,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>$3,120</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$3,120</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$3,600</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$4,965</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td>$4,965</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td>$2,875</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$4,525</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td>$4,080</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td>$3,750</td>
</tr>
<tr>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$2,875</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td>$3,750</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$6,730</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$6,730</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$4,080</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$3,750</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$4,080</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$4,200</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$4,965</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$5,000</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td>$3,600</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$3,600</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$4,800</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td>$6,730</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$4,800</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$2,875</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$4,800</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$3,120</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$5,300</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td>$4,080</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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
]
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
</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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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="../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/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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<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>

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

@@ -0,0 +1,327 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
initiation option.</p>
<p>The <a href="//datatables.net/init/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
<ul>
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
the source object.</li>
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
array.</li>
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to
transform the data from one source format to another (for example you could convert from XML to a
Javascript object). The value returned from the function is used as the data for the table.</li>
</ul>
<p>The example below shows <a href="//datatables.net/init/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables
that the JSON loaded is a plain array, not an object with an array inside it as is the default.</p>
</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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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; }
]
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
</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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

505
examples/ajax/custom_data_property.html
View File

@@ -1,210 +1,313 @@
<!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">
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
initiation option.</p>
<p>The <a href="//datatables.net/init/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
<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>
<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/init/ajax.dataSrc"><code class="option" title=
"Initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different
source property, in this case <code class="string" title="String">demo</code> but it could be any
value, included a nested property by using standard dotted Javascript object notation.</p>
</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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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;
}
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<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",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011\/07\/25",
"$5,300"
],
[
"Ashton Cox",
"Technical Author",
"San Francisco",
"1562",
"2009\/01\/12",
"$4,800"
],
[
"Cedric Kelly",
"Javascript Developer",
"Edinburgh",
"6224",
"2012\/03\/29",
"$3,600"
],
[
"Jenna Elliott",
"Financial Controller",
"Edinburgh",
"5407",
"2008\/11\/28",
"$5,300"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012\/12\/02",
"$4,525"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012\/08\/06",
"$4,080"
],
[
"Rhona Davidson",
"Integration Specialist",
"Edinburgh",
"6200",
"2010\/10\/14",
"$6,730"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009\/09\/15",
"$5,000"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008\/12\/13",
"$3,600"
],
[
"Jena Gaines",
"System Architect",
"London",
"3814",
"2008\/12\/19",
"$5,000"
],
[
"Quinn Flynn",
"Financial Controller",
"Edinburgh",
"9497",
"2013\/03\/03",
"$4,200"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008\/10\/16",
"$5,300"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012\/12\/18",
"$4,800"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010\/03\/17",
"$2,875"
],
[
"Michael Silva",
"Senior Marketing Designer",
"London",
"1581",
"2012\/11\/27",
"$3,750"
],
[
"Paul Byrd",
"Javascript Developer",
"New York",
"3059",
"2010\/06\/09",
"$5,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009\/04\/10",
"$3,120"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012\/10\/13",
"$3,120"
],
[
"Dai Rios",
"System Architect",
"Edinburgh",
"2290",
"2012\/09\/26",
"$4,200"
],
[
"Jenette Caldwell",
"Financial Controller",
"New York",
"1937",
"2011\/09\/03",
"$4,965"
],
[
"Yuri Berry",
"System Architect",
"New York",
"6154",
"2009\/06\/25",
"$3,600"
],
[
"Caesar Vance",
"Technical Author",
"New York",
"8330",
"2011\/12\/12",
"$4,965"
],
[
"Doris Wilder",
"Sales Assistant",
"Edinburgh",
"3023",
"2010\/09\/20",
"$4,965"
],
[
"Angelica Ramos",
"System Architect",
"London",
"5797",
"2009\/10\/09",
"$2,875"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010\/12\/22",
"$4,525"
],
[
"Jennifer Chang",
"Regional Director",
"London",
"9239",
"2010\/11\/14",
"$4,080"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011\/06\/07",
"$3,750"
],
[
"Ebony Grimes",
"Software Engineer",
"San Francisco",
"2947",
"2010\/03\/11",
"$2,875"
],
[
"Russell Chavez",
"Director",
"Edinburgh",
"8899",
"2011\/08\/14",
"$3,600"
],
[
"Michelle House",
"Integration Specialist",
"Edinburgh",
"2769",
"2011\/06\/02",
"$3,750"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009\/10\/22",
"$2,875"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011\/05\/07",
"$6,730"
],
[
"Gavin Cortez",
"Technical Author",
"San Francisco",
"2860",
"2008\/10\/26",
"$6,730"
],
[
"Martena Mccray",
"Integration Specialist",
"Edinburgh",
"8240",
"2011\/03\/09",
"$4,080"
],
[
"Unity Butler",
"Senior Marketing Designer",
"San Francisco",
"5384",
"2009\/12\/09",
"$3,750"
],
[
"Howard Hatfield",
"Financial Controller",
"San Francisco",
"7031",
"2008\/12\/16",
"$4,080"
],
[
"Hope Fuentes",
"Financial Controller",
"San Francisco",
"6318",
"2010\/02\/12",
"$4,200"
],
[
"Vivian Harrell",
"System Architect",
"San Francisco",
"9422",
"2009\/02\/14",
"$4,965"
],
[
"Timothy Mooney",
"Financial Controller",
"London",
"7580",
"2008\/12\/11",
"$4,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008\/09\/26",
"$5,000"
],
[
"Miriam Weiss",
"Support Engineer",
"Edinburgh",
"2120",
"2011\/02\/03",
"$4,965"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011\/05\/03",
"$4,200"
],
[
"Odessa Jackson",
"Support Engineer",
"Edinburgh",
"9383",
"2009\/08\/19",
"$3,600"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013\/08\/11",
"$3,600"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009\/07\/07",
"$4,800"
],
[
"Elton Baldwin",
"Data Coordinator",
"Edinburgh",
"8352",
"2012\/04\/09",
"$6,730"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010\/01\/04",
"$4,800"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012\/06\/01",
"$5,300"
],
[
"Jennifer Acosta",
"Javascript Developer",
"Edinburgh",
"3431",
"2013\/02\/01",
"$2,875"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011\/12\/06",
"$4,800"
],
[
"Hermione Butler",
"Director",
"London",
"1016",
"2011\/03\/21",
"$4,080"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009\/02\/27",
"$3,120"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010\/07\/14",
"$5,300"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008\/11\/13",
"$5,300"
],
[
"Michael Bruce",
"Javascript Developer",
"Edinburgh",
"5384",
"2011\/06\/27",
"$4,080"
],
[
"Donna Snider",
"System Architect",
"New York",
"4226",
"2011\/01\/25",
"$3,120"
]
]
}

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",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011\/07\/25",
"$5,300"
],
[
"Ashton Cox",
"Technical Author",
"San Francisco",
"1562",
"2009\/01\/12",
"$4,800"
],
[
"Cedric Kelly",
"Javascript Developer",
"Edinburgh",
"6224",
"2012\/03\/29",
"$3,600"
],
[
"Jenna Elliott",
"Financial Controller",
"Edinburgh",
"5407",
"2008\/11\/28",
"$5,300"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012\/12\/02",
"$4,525"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012\/08\/06",
"$4,080"
],
[
"Rhona Davidson",
"Integration Specialist",
"Edinburgh",
"6200",
"2010\/10\/14",
"$6,730"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009\/09\/15",
"$5,000"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008\/12\/13",
"$3,600"
],
[
"Jena Gaines",
"System Architect",
"London",
"3814",
"2008\/12\/19",
"$5,000"
],
[
"Quinn Flynn",
"Financial Controller",
"Edinburgh",
"9497",
"2013\/03\/03",
"$4,200"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008\/10\/16",
"$5,300"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012\/12\/18",
"$4,800"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010\/03\/17",
"$2,875"
],
[
"Michael Silva",
"Senior Marketing Designer",
"London",
"1581",
"2012\/11\/27",
"$3,750"
],
[
"Paul Byrd",
"Javascript Developer",
"New York",
"3059",
"2010\/06\/09",
"$5,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009\/04\/10",
"$3,120"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012\/10\/13",
"$3,120"
],
[
"Dai Rios",
"System Architect",
"Edinburgh",
"2290",
"2012\/09\/26",
"$4,200"
],
[
"Jenette Caldwell",
"Financial Controller",
"New York",
"1937",
"2011\/09\/03",
"$4,965"
],
[
"Yuri Berry",
"System Architect",
"New York",
"6154",
"2009\/06\/25",
"$3,600"
],
[
"Caesar Vance",
"Technical Author",
"New York",
"8330",
"2011\/12\/12",
"$4,965"
],
[
"Doris Wilder",
"Sales Assistant",
"Edinburgh",
"3023",
"2010\/09\/20",
"$4,965"
],
[
"Angelica Ramos",
"System Architect",
"London",
"5797",
"2009\/10\/09",
"$2,875"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010\/12\/22",
"$4,525"
],
[
"Jennifer Chang",
"Regional Director",
"London",
"9239",
"2010\/11\/14",
"$4,080"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011\/06\/07",
"$3,750"
],
[
"Ebony Grimes",
"Software Engineer",
"San Francisco",
"2947",
"2010\/03\/11",
"$2,875"
],
[
"Russell Chavez",
"Director",
"Edinburgh",
"8899",
"2011\/08\/14",
"$3,600"
],
[
"Michelle House",
"Integration Specialist",
"Edinburgh",
"2769",
"2011\/06\/02",
"$3,750"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009\/10\/22",
"$2,875"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011\/05\/07",
"$6,730"
],
[
"Gavin Cortez",
"Technical Author",
"San Francisco",
"2860",
"2008\/10\/26",
"$6,730"
],
[
"Martena Mccray",
"Integration Specialist",
"Edinburgh",
"8240",
"2011\/03\/09",
"$4,080"
],
[
"Unity Butler",
"Senior Marketing Designer",
"San Francisco",
"5384",
"2009\/12\/09",
"$3,750"
],
[
"Howard Hatfield",
"Financial Controller",
"San Francisco",
"7031",
"2008\/12\/16",
"$4,080"
],
[
"Hope Fuentes",
"Financial Controller",
"San Francisco",
"6318",
"2010\/02\/12",
"$4,200"
],
[
"Vivian Harrell",
"System Architect",
"San Francisco",
"9422",
"2009\/02\/14",
"$4,965"
],
[
"Timothy Mooney",
"Financial Controller",
"London",
"7580",
"2008\/12\/11",
"$4,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008\/09\/26",
"$5,000"
],
[
"Miriam Weiss",
"Support Engineer",
"Edinburgh",
"2120",
"2011\/02\/03",
"$4,965"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011\/05\/03",
"$4,200"
],
[
"Odessa Jackson",
"Support Engineer",
"Edinburgh",
"9383",
"2009\/08\/19",
"$3,600"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013\/08\/11",
"$3,600"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009\/07\/07",
"$4,800"
],
[
"Elton Baldwin",
"Data Coordinator",
"Edinburgh",
"8352",
"2012\/04\/09",
"$6,730"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010\/01\/04",
"$4,800"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012\/06\/01",
"$5,300"
],
[
"Jennifer Acosta",
"Javascript Developer",
"Edinburgh",
"3431",
"2013\/02\/01",
"$2,875"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011\/12\/06",
"$4,800"
],
[
"Hermione Butler",
"Director",
"London",
"1016",
"2011\/03\/21",
"$4,080"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009\/02\/27",
"$3,120"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010\/07\/14",
"$5,300"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008\/11\/13",
"$5,300"
],
[
"Michael Bruce",
"Javascript Developer",
"Edinburgh",
"5384",
"2011\/06\/27",
"$4,080"
],
[
"Donna Snider",
"System Architect",
"New York",
"4226",
"2011\/01\/25",
"$3,120"
]
]
}

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

@@ -0,0 +1,688 @@
{
"data": [
{
"0": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011\/04\/25"
},
"contact": {
"office": "Edinburgh",
"extn": "5421"
}
},
{
"0": "Garrett Winters",
"hr": {
"position": "Director",
"salary": "$5,300",
"start_date": "2011\/07\/25"
},
"contact": {
"office": "Edinburgh",
"extn": "8422"
}
},
{
"0": "Ashton Cox",
"hr": {
"position": "Technical Author",
"salary": "$4,800",
"start_date": "2009\/01\/12"
},
"contact": {
"office": "San Francisco",
"extn": "1562"
}
},
{
"0": "Cedric Kelly",
"hr": {
"position": "Javascript Developer",
"salary": "$3,600",
"start_date": "2012\/03\/29"
},
"contact": {
"office": "Edinburgh",
"extn": "6224"
}
},
{
"0": "Jenna Elliott",
"hr": {
"position": "Financial Controller",
"salary": "$5,300",
"start_date": "2008\/11\/28"
},
"contact": {
"office": "Edinburgh",
"extn": "5407"
}
},
{
"0": "Brielle Williamson",
"hr": {
"position": "Integration Specialist",
"salary": "$4,525",
"start_date": "2012\/12\/02"
},
"contact": {
"office": "New York",
"extn": "4804"
}
},
{
"0": "Herrod Chandler",
"hr": {
"position": "Sales Assistant",
"salary": "$4,080",
"start_date": "2012\/08\/06"
},
"contact": {
"office": "San Francisco",
"extn": "9608"
}
},
{
"0": "Rhona Davidson",
"hr": {
"position": "Integration Specialist",
"salary": "$6,730",
"start_date": "2010\/10\/14"
},
"contact": {
"office": "Edinburgh",
"extn": "6200"
}
},
{
"0": "Colleen Hurst",
"hr": {
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2009\/09\/15"
},
"contact": {
"office": "San Francisco",
"extn": "2360"
}
},
{
"0": "Sonya Frost",
"hr": {
"position": "Software Engineer",
"salary": "$3,600",
"start_date": "2008\/12\/13"
},
"contact": {
"office": "Edinburgh",
"extn": "1667"
}
},
{
"0": "Jena Gaines",
"hr": {
"position": "System Architect",
"salary": "$5,000",
"start_date": "2008\/12\/19"
},
"contact": {
"office": "London",
"extn": "3814"
}
},
{
"0": "Quinn Flynn",
"hr": {
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2013\/03\/03"
},
"contact": {
"office": "Edinburgh",
"extn": "9497"
}
},
{
"0": "Charde Marshall",
"hr": {
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/10\/16"
},
"contact": {
"office": "San Francisco",
"extn": "6741"
}
},
{
"0": "Haley Kennedy",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$4,800",
"start_date": "2012\/12\/18"
},
"contact": {
"office": "London",
"extn": "3597"
}
},
{
"0": "Tatyana Fitzpatrick",
"hr": {
"position": "Regional Director",
"salary": "$2,875",
"start_date": "2010\/03\/17"
},
"contact": {
"office": "London",
"extn": "1965"
}
},
{
"0": "Michael Silva",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2012\/11\/27"
},
"contact": {
"office": "London",
"extn": "1581"
}
},
{
"0": "Paul Byrd",
"hr": {
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2010\/06\/09"
},
"contact": {
"office": "New York",
"extn": "3059"
}
},
{
"0": "Gloria Little",
"hr": {
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/04\/10"
},
"contact": {
"office": "New York",
"extn": "1721"
}
},
{
"0": "Bradley Greer",
"hr": {
"position": "Software Engineer",
"salary": "$3,120",
"start_date": "2012\/10\/13"
},
"contact": {
"office": "London",
"extn": "2558"
}
},
{
"0": "Dai Rios",
"hr": {
"position": "System Architect",
"salary": "$4,200",
"start_date": "2012\/09\/26"
},
"contact": {
"office": "Edinburgh",
"extn": "2290"
}
},
{
"0": "Jenette Caldwell",
"hr": {
"position": "Financial Controller",
"salary": "$4,965",
"start_date": "2011\/09\/03"
},
"contact": {
"office": "New York",
"extn": "1937"
}
},
{
"0": "Yuri Berry",
"hr": {
"position": "System Architect",
"salary": "$3,600",
"start_date": "2009\/06\/25"
},
"contact": {
"office": "New York",
"extn": "6154"
}
},
{
"0": "Caesar Vance",
"hr": {
"position": "Technical Author",
"salary": "$4,965",
"start_date": "2011\/12\/12"
},
"contact": {
"office": "New York",
"extn": "8330"
}
},
{
"0": "Doris Wilder",
"hr": {
"position": "Sales Assistant",
"salary": "$4,965",
"start_date": "2010\/09\/20"
},
"contact": {
"office": "Edinburgh",
"extn": "3023"
}
},
{
"0": "Angelica Ramos",
"hr": {
"position": "System Architect",
"salary": "$2,875",
"start_date": "2009\/10\/09"
},
"contact": {
"office": "London",
"extn": "5797"
}
},
{
"0": "Gavin Joyce",
"hr": {
"position": "Developer",
"salary": "$4,525",
"start_date": "2010\/12\/22"
},
"contact": {
"office": "Edinburgh",
"extn": "8822"
}
},
{
"0": "Jennifer Chang",
"hr": {
"position": "Regional Director",
"salary": "$4,080",
"start_date": "2010\/11\/14"
},
"contact": {
"office": "London",
"extn": "9239"
}
},
{
"0": "Brenden Wagner",
"hr": {
"position": "Software Engineer",
"salary": "$3,750",
"start_date": "2011\/06\/07"
},
"contact": {
"office": "San Francisco",
"extn": "1314"
}
},
{
"0": "Ebony Grimes",
"hr": {
"position": "Software Engineer",
"salary": "$2,875",
"start_date": "2010\/03\/11"
},
"contact": {
"office": "San Francisco",
"extn": "2947"
}
},
{
"0": "Russell Chavez",
"hr": {
"position": "Director",
"salary": "$3,600",
"start_date": "2011\/08\/14"
},
"contact": {
"office": "Edinburgh",
"extn": "8899"
}
},
{
"0": "Michelle House",
"hr": {
"position": "Integration Specialist",
"salary": "$3,750",
"start_date": "2011\/06\/02"
},
"contact": {
"office": "Edinburgh",
"extn": "2769"
}
},
{
"0": "Suki Burks",
"hr": {
"position": "Developer",
"salary": "$2,875",
"start_date": "2009\/10\/22"
},
"contact": {
"office": "London",
"extn": "6832"
}
},
{
"0": "Prescott Bartlett",
"hr": {
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2011\/05\/07"
},
"contact": {
"office": "London",
"extn": "3606"
}
},
{
"0": "Gavin Cortez",
"hr": {
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2008\/10\/26"
},
"contact": {
"office": "San Francisco",
"extn": "2860"
}
},
{
"0": "Martena Mccray",
"hr": {
"position": "Integration Specialist",
"salary": "$4,080",
"start_date": "2011\/03\/09"
},
"contact": {
"office": "Edinburgh",
"extn": "8240"
}
},
{
"0": "Unity Butler",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2009\/12\/09"
},
"contact": {
"office": "San Francisco",
"extn": "5384"
}
},
{
"0": "Howard Hatfield",
"hr": {
"position": "Financial Controller",
"salary": "$4,080",
"start_date": "2008\/12\/16"
},
"contact": {
"office": "San Francisco",
"extn": "7031"
}
},
{
"0": "Hope Fuentes",
"hr": {
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2010\/02\/12"
},
"contact": {
"office": "San Francisco",
"extn": "6318"
}
},
{
"0": "Vivian Harrell",
"hr": {
"position": "System Architect",
"salary": "$4,965",
"start_date": "2009\/02\/14"
},
"contact": {
"office": "San Francisco",
"extn": "9422"
}
},
{
"0": "Timothy Mooney",
"hr": {
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2008\/12\/11"
},
"contact": {
"office": "London",
"extn": "7580"
}
},
{
"0": "Jackson Bradshaw",
"hr": {
"position": "Director",
"salary": "$5,000",
"start_date": "2008\/09\/26"
},
"contact": {
"office": "New York",
"extn": "1042"
}
},
{
"0": "Miriam Weiss",
"hr": {
"position": "Support Engineer",
"salary": "$4,965",
"start_date": "2011\/02\/03"
},
"contact": {
"office": "Edinburgh",
"extn": "2120"
}
},
{
"0": "Bruno Nash",
"hr": {
"position": "Software Engineer",
"salary": "$4,200",
"start_date": "2011\/05\/03"
},
"contact": {
"office": "London",
"extn": "6222"
}
},
{
"0": "Odessa Jackson",
"hr": {
"position": "Support Engineer",
"salary": "$3,600",
"start_date": "2009\/08\/19"
},
"contact": {
"office": "Edinburgh",
"extn": "9383"
}
},
{
"0": "Thor Walton",
"hr": {
"position": "Developer",
"salary": "$3,600",
"start_date": "2013\/08\/11"
},
"contact": {
"office": "New York",
"extn": "8327"
}
},
{
"0": "Finn Camacho",
"hr": {
"position": "Support Engineer",
"salary": "$4,800",
"start_date": "2009\/07\/07"
},
"contact": {
"office": "San Francisco",
"extn": "2927"
}
},
{
"0": "Elton Baldwin",
"hr": {
"position": "Data Coordinator",
"salary": "$6,730",
"start_date": "2012\/04\/09"
},
"contact": {
"office": "Edinburgh",
"extn": "8352"
}
},
{
"0": "Zenaida Frank",
"hr": {
"position": "Software Engineer",
"salary": "$4,800",
"start_date": "2010\/01\/04"
},
"contact": {
"office": "New York",
"extn": "7439"
}
},
{
"0": "Zorita Serrano",
"hr": {
"position": "Software Engineer",
"salary": "$5,300",
"start_date": "2012\/06\/01"
},
"contact": {
"office": "San Francisco",
"extn": "4389"
}
},
{
"0": "Jennifer Acosta",
"hr": {
"position": "Javascript Developer",
"salary": "$2,875",
"start_date": "2013\/02\/01"
},
"contact": {
"office": "Edinburgh",
"extn": "3431"
}
},
{
"0": "Cara Stevens",
"hr": {
"position": "Sales Assistant",
"salary": "$4,800",
"start_date": "2011\/12\/06"
},
"contact": {
"office": "New York",
"extn": "3990"
}
},
{
"0": "Hermione Butler",
"hr": {
"position": "Director",
"salary": "$4,080",
"start_date": "2011\/03\/21"
},
"contact": {
"office": "London",
"extn": "1016"
}
},
{
"0": "Lael Greer",
"hr": {
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/02\/27"
},
"contact": {
"office": "London",
"extn": "6733"
}
},
{
"0": "Jonas Alexander",
"hr": {
"position": "Developer",
"salary": "$5,300",
"start_date": "2010\/07\/14"
},
"contact": {
"office": "San Francisco",
"extn": "8196"
}
},
{
"0": "Shad Decker",
"hr": {
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/11\/13"
},
"contact": {
"office": "Edinburgh",
"extn": "6373"
}
},
{
"0": "Michael Bruce",
"hr": {
"position": "Javascript Developer",
"salary": "$4,080",
"start_date": "2011\/06\/27"
},
"contact": {
"office": "Edinburgh",
"extn": "5384"
}
},
{
"0": "Donna Snider",
"hr": {
"position": "System Architect",
"salary": "$3,120",
"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": "$3,120",
"start_date": "2011\/04\/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011\/07\/25",
"office": "Edinburgh",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Technical Author",
"salary": "$4,800",
"start_date": "2009\/01\/12",
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Javascript Developer",
"salary": "$3,600",
"start_date": "2012\/03\/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Jenna Elliott",
"position": "Financial Controller",
"salary": "$5,300",
"start_date": "2008\/11\/28",
"office": "Edinburgh",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$4,525",
"start_date": "2012\/12\/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$4,080",
"start_date": "2012\/08\/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$6,730",
"start_date": "2010\/10\/14",
"office": "Edinburgh",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2009\/09\/15",
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$3,600",
"start_date": "2008\/12\/13",
"office": "Edinburgh",
"extn": "1667"
},
{
"name": "Jena Gaines",
"position": "System Architect",
"salary": "$5,000",
"start_date": "2008\/12\/19",
"office": "London",
"extn": "3814"
},
{
"name": "Quinn Flynn",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2013\/03\/03",
"office": "Edinburgh",
"extn": "9497"
},
{
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/10\/16",
"office": "San Francisco",
"extn": "6741"
},
{
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$4,800",
"start_date": "2012\/12\/18",
"office": "London",
"extn": "3597"
},
{
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$2,875",
"start_date": "2010\/03\/17",
"office": "London",
"extn": "1965"
},
{
"name": "Michael Silva",
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2012\/11\/27",
"office": "London",
"extn": "1581"
},
{
"name": "Paul Byrd",
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2010\/06\/09",
"office": "New York",
"extn": "3059"
},
{
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/04\/10",
"office": "New York",
"extn": "1721"
},
{
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$3,120",
"start_date": "2012\/10\/13",
"office": "London",
"extn": "2558"
},
{
"name": "Dai Rios",
"position": "System Architect",
"salary": "$4,200",
"start_date": "2012\/09\/26",
"office": "Edinburgh",
"extn": "2290"
},
{
"name": "Jenette Caldwell",
"position": "Financial Controller",
"salary": "$4,965",
"start_date": "2011\/09\/03",
"office": "New York",
"extn": "1937"
},
{
"name": "Yuri Berry",
"position": "System Architect",
"salary": "$3,600",
"start_date": "2009\/06\/25",
"office": "New York",
"extn": "6154"
},
{
"name": "Caesar Vance",
"position": "Technical Author",
"salary": "$4,965",
"start_date": "2011\/12\/12",
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$4,965",
"start_date": "2010\/09\/20",
"office": "Edinburgh",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "System Architect",
"salary": "$2,875",
"start_date": "2009\/10\/09",
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$4,525",
"start_date": "2010\/12\/22",
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$4,080",
"start_date": "2010\/11\/14",
"office": "London",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$3,750",
"start_date": "2011\/06\/07",
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Ebony Grimes",
"position": "Software Engineer",
"salary": "$2,875",
"start_date": "2010\/03\/11",
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Russell Chavez",
"position": "Director",
"salary": "$3,600",
"start_date": "2011\/08\/14",
"office": "Edinburgh",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$3,750",
"start_date": "2011\/06\/02",
"office": "Edinburgh",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "$2,875",
"start_date": "2009\/10\/22",
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2011\/05\/07",
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2008\/10\/26",
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Integration Specialist",
"salary": "$4,080",
"start_date": "2011\/03\/09",
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2009\/12\/09",
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Financial Controller",
"salary": "$4,080",
"start_date": "2008\/12\/16",
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2010\/02\/12",
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "System Architect",
"salary": "$4,965",
"start_date": "2009\/02\/14",
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2008\/12\/11",
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$5,000",
"start_date": "2008\/09\/26",
"office": "New York",
"extn": "1042"
},
{
"name": "Miriam Weiss",
"position": "Support Engineer",
"salary": "$4,965",
"start_date": "2011\/02\/03",
"office": "Edinburgh",
"extn": "2120"
},
{
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$4,200",
"start_date": "2011\/05\/03",
"office": "London",
"extn": "6222"
},
{
"name": "Odessa Jackson",
"position": "Support Engineer",
"salary": "$3,600",
"start_date": "2009\/08\/19",
"office": "Edinburgh",
"extn": "9383"
},
{
"name": "Thor Walton",
"position": "Developer",
"salary": "$3,600",
"start_date": "2013\/08\/11",
"office": "New York",
"extn": "8327"
},
{
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$4,800",
"start_date": "2009\/07\/07",
"office": "San Francisco",
"extn": "2927"
},
{
"name": "Elton Baldwin",
"position": "Data Coordinator",
"salary": "$6,730",
"start_date": "2012\/04\/09",
"office": "Edinburgh",
"extn": "8352"
},
{
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$4,800",
"start_date": "2010\/01\/04",
"office": "New York",
"extn": "7439"
},
{
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$5,300",
"start_date": "2012\/06\/01",
"office": "San Francisco",
"extn": "4389"
},
{
"name": "Jennifer Acosta",
"position": "Javascript Developer",
"salary": "$2,875",
"start_date": "2013\/02\/01",
"office": "Edinburgh",
"extn": "3431"
},
{
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$4,800",
"start_date": "2011\/12\/06",
"office": "New York",
"extn": "3990"
},
{
"name": "Hermione Butler",
"position": "Director",
"salary": "$4,080",
"start_date": "2011\/03\/21",
"office": "London",
"extn": "1016"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/02\/27",
"office": "London",
"extn": "6733"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$5,300",
"start_date": "2010\/07\/14",
"office": "San Francisco",
"extn": "8196"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/11\/13",
"office": "Edinburgh",
"extn": "6373"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$4,080",
"start_date": "2011\/06\/27",
"office": "Edinburgh",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "System Architect",
"salary": "$3,120",
"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": "$3,120",
"start_date": "2011\/04\/25"
},
"contact": [
"Edinburgh",
"5421"
]
},
{
"name": "Garrett Winters",
"hr": {
"position": "Director",
"salary": "$5,300",
"start_date": "2011\/07\/25"
},
"contact": [
"Edinburgh",
"8422"
]
},
{
"name": "Ashton Cox",
"hr": {
"position": "Technical Author",
"salary": "$4,800",
"start_date": "2009\/01\/12"
},
"contact": [
"San Francisco",
"1562"
]
},
{
"name": "Cedric Kelly",
"hr": {
"position": "Javascript Developer",
"salary": "$3,600",
"start_date": "2012\/03\/29"
},
"contact": [
"Edinburgh",
"6224"
]
},
{
"name": "Jenna Elliott",
"hr": {
"position": "Financial Controller",
"salary": "$5,300",
"start_date": "2008\/11\/28"
},
"contact": [
"Edinburgh",
"5407"
]
},
{
"name": "Brielle Williamson",
"hr": {
"position": "Integration Specialist",
"salary": "$4,525",
"start_date": "2012\/12\/02"
},
"contact": [
"New York",
"4804"
]
},
{
"name": "Herrod Chandler",
"hr": {
"position": "Sales Assistant",
"salary": "$4,080",
"start_date": "2012\/08\/06"
},
"contact": [
"San Francisco",
"9608"
]
},
{
"name": "Rhona Davidson",
"hr": {
"position": "Integration Specialist",
"salary": "$6,730",
"start_date": "2010\/10\/14"
},
"contact": [
"Edinburgh",
"6200"
]
},
{
"name": "Colleen Hurst",
"hr": {
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2009\/09\/15"
},
"contact": [
"San Francisco",
"2360"
]
},
{
"name": "Sonya Frost",
"hr": {
"position": "Software Engineer",
"salary": "$3,600",
"start_date": "2008\/12\/13"
},
"contact": [
"Edinburgh",
"1667"
]
},
{
"name": "Jena Gaines",
"hr": {
"position": "System Architect",
"salary": "$5,000",
"start_date": "2008\/12\/19"
},
"contact": [
"London",
"3814"
]
},
{
"name": "Quinn Flynn",
"hr": {
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2013\/03\/03"
},
"contact": [
"Edinburgh",
"9497"
]
},
{
"name": "Charde Marshall",
"hr": {
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/10\/16"
},
"contact": [
"San Francisco",
"6741"
]
},
{
"name": "Haley Kennedy",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$4,800",
"start_date": "2012\/12\/18"
},
"contact": [
"London",
"3597"
]
},
{
"name": "Tatyana Fitzpatrick",
"hr": {
"position": "Regional Director",
"salary": "$2,875",
"start_date": "2010\/03\/17"
},
"contact": [
"London",
"1965"
]
},
{
"name": "Michael Silva",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2012\/11\/27"
},
"contact": [
"London",
"1581"
]
},
{
"name": "Paul Byrd",
"hr": {
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2010\/06\/09"
},
"contact": [
"New York",
"3059"
]
},
{
"name": "Gloria Little",
"hr": {
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/04\/10"
},
"contact": [
"New York",
"1721"
]
},
{
"name": "Bradley Greer",
"hr": {
"position": "Software Engineer",
"salary": "$3,120",
"start_date": "2012\/10\/13"
},
"contact": [
"London",
"2558"
]
},
{
"name": "Dai Rios",
"hr": {
"position": "System Architect",
"salary": "$4,200",
"start_date": "2012\/09\/26"
},
"contact": [
"Edinburgh",
"2290"
]
},
{
"name": "Jenette Caldwell",
"hr": {
"position": "Financial Controller",
"salary": "$4,965",
"start_date": "2011\/09\/03"
},
"contact": [
"New York",
"1937"
]
},
{
"name": "Yuri Berry",
"hr": {
"position": "System Architect",
"salary": "$3,600",
"start_date": "2009\/06\/25"
},
"contact": [
"New York",
"6154"
]
},
{
"name": "Caesar Vance",
"hr": {
"position": "Technical Author",
"salary": "$4,965",
"start_date": "2011\/12\/12"
},
"contact": [
"New York",
"8330"
]
},
{
"name": "Doris Wilder",
"hr": {
"position": "Sales Assistant",
"salary": "$4,965",
"start_date": "2010\/09\/20"
},
"contact": [
"Edinburgh",
"3023"
]
},
{
"name": "Angelica Ramos",
"hr": {
"position": "System Architect",
"salary": "$2,875",
"start_date": "2009\/10\/09"
},
"contact": [
"London",
"5797"
]
},
{
"name": "Gavin Joyce",
"hr": {
"position": "Developer",
"salary": "$4,525",
"start_date": "2010\/12\/22"
},
"contact": [
"Edinburgh",
"8822"
]
},
{
"name": "Jennifer Chang",
"hr": {
"position": "Regional Director",
"salary": "$4,080",
"start_date": "2010\/11\/14"
},
"contact": [
"London",
"9239"
]
},
{
"name": "Brenden Wagner",
"hr": {
"position": "Software Engineer",
"salary": "$3,750",
"start_date": "2011\/06\/07"
},
"contact": [
"San Francisco",
"1314"
]
},
{
"name": "Ebony Grimes",
"hr": {
"position": "Software Engineer",
"salary": "$2,875",
"start_date": "2010\/03\/11"
},
"contact": [
"San Francisco",
"2947"
]
},
{
"name": "Russell Chavez",
"hr": {
"position": "Director",
"salary": "$3,600",
"start_date": "2011\/08\/14"
},
"contact": [
"Edinburgh",
"8899"
]
},
{
"name": "Michelle House",
"hr": {
"position": "Integration Specialist",
"salary": "$3,750",
"start_date": "2011\/06\/02"
},
"contact": [
"Edinburgh",
"2769"
]
},
{
"name": "Suki Burks",
"hr": {
"position": "Developer",
"salary": "$2,875",
"start_date": "2009\/10\/22"
},
"contact": [
"London",
"6832"
]
},
{
"name": "Prescott Bartlett",
"hr": {
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2011\/05\/07"
},
"contact": [
"London",
"3606"
]
},
{
"name": "Gavin Cortez",
"hr": {
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2008\/10\/26"
},
"contact": [
"San Francisco",
"2860"
]
},
{
"name": "Martena Mccray",
"hr": {
"position": "Integration Specialist",
"salary": "$4,080",
"start_date": "2011\/03\/09"
},
"contact": [
"Edinburgh",
"8240"
]
},
{
"name": "Unity Butler",
"hr": {
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2009\/12\/09"
},
"contact": [
"San Francisco",
"5384"
]
},
{
"name": "Howard Hatfield",
"hr": {
"position": "Financial Controller",
"salary": "$4,080",
"start_date": "2008\/12\/16"
},
"contact": [
"San Francisco",
"7031"
]
},
{
"name": "Hope Fuentes",
"hr": {
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2010\/02\/12"
},
"contact": [
"San Francisco",
"6318"
]
},
{
"name": "Vivian Harrell",
"hr": {
"position": "System Architect",
"salary": "$4,965",
"start_date": "2009\/02\/14"
},
"contact": [
"San Francisco",
"9422"
]
},
{
"name": "Timothy Mooney",
"hr": {
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2008\/12\/11"
},
"contact": [
"London",
"7580"
]
},
{
"name": "Jackson Bradshaw",
"hr": {
"position": "Director",
"salary": "$5,000",
"start_date": "2008\/09\/26"
},
"contact": [
"New York",
"1042"
]
},
{
"name": "Miriam Weiss",
"hr": {
"position": "Support Engineer",
"salary": "$4,965",
"start_date": "2011\/02\/03"
},
"contact": [
"Edinburgh",
"2120"
]
},
{
"name": "Bruno Nash",
"hr": {
"position": "Software Engineer",
"salary": "$4,200",
"start_date": "2011\/05\/03"
},
"contact": [
"London",
"6222"
]
},
{
"name": "Odessa Jackson",
"hr": {
"position": "Support Engineer",
"salary": "$3,600",
"start_date": "2009\/08\/19"
},
"contact": [
"Edinburgh",
"9383"
]
},
{
"name": "Thor Walton",
"hr": {
"position": "Developer",
"salary": "$3,600",
"start_date": "2013\/08\/11"
},
"contact": [
"New York",
"8327"
]
},
{
"name": "Finn Camacho",
"hr": {
"position": "Support Engineer",
"salary": "$4,800",
"start_date": "2009\/07\/07"
},
"contact": [
"San Francisco",
"2927"
]
},
{
"name": "Elton Baldwin",
"hr": {
"position": "Data Coordinator",
"salary": "$6,730",
"start_date": "2012\/04\/09"
},
"contact": [
"Edinburgh",
"8352"
]
},
{
"name": "Zenaida Frank",
"hr": {
"position": "Software Engineer",
"salary": "$4,800",
"start_date": "2010\/01\/04"
},
"contact": [
"New York",
"7439"
]
},
{
"name": "Zorita Serrano",
"hr": {
"position": "Software Engineer",
"salary": "$5,300",
"start_date": "2012\/06\/01"
},
"contact": [
"San Francisco",
"4389"
]
},
{
"name": "Jennifer Acosta",
"hr": {
"position": "Javascript Developer",
"salary": "$2,875",
"start_date": "2013\/02\/01"
},
"contact": [
"Edinburgh",
"3431"
]
},
{
"name": "Cara Stevens",
"hr": {
"position": "Sales Assistant",
"salary": "$4,800",
"start_date": "2011\/12\/06"
},
"contact": [
"New York",
"3990"
]
},
{
"name": "Hermione Butler",
"hr": {
"position": "Director",
"salary": "$4,080",
"start_date": "2011\/03\/21"
},
"contact": [
"London",
"1016"
]
},
{
"name": "Lael Greer",
"hr": {
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/02\/27"
},
"contact": [
"London",
"6733"
]
},
{
"name": "Jonas Alexander",
"hr": {
"position": "Developer",
"salary": "$5,300",
"start_date": "2010\/07\/14"
},
"contact": [
"San Francisco",
"8196"
]
},
{
"name": "Shad Decker",
"hr": {
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/11\/13"
},
"contact": [
"Edinburgh",
"6373"
]
},
{
"name": "Michael Bruce",
"hr": {
"position": "Javascript Developer",
"salary": "$4,080",
"start_date": "2011\/06\/27"
},
"contact": [
"Edinburgh",
"5384"
]
},
{
"name": "Donna Snider",
"hr": {
"position": "System Architect",
"salary": "$3,120",
"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": "$3,120",
"start_date": "2011\/04\/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011\/07\/25",
"office": "Edinburgh",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Technical Author",
"salary": "$4,800",
"start_date": "2009\/01\/12",
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Javascript Developer",
"salary": "$3,600",
"start_date": "2012\/03\/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Jenna Elliott",
"position": "Financial Controller",
"salary": "$5,300",
"start_date": "2008\/11\/28",
"office": "Edinburgh",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$4,525",
"start_date": "2012\/12\/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$4,080",
"start_date": "2012\/08\/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$6,730",
"start_date": "2010\/10\/14",
"office": "Edinburgh",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2009\/09\/15",
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$3,600",
"start_date": "2008\/12\/13",
"office": "Edinburgh",
"extn": "1667"
},
{
"name": "Jena Gaines",
"position": "System Architect",
"salary": "$5,000",
"start_date": "2008\/12\/19",
"office": "London",
"extn": "3814"
},
{
"name": "Quinn Flynn",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2013\/03\/03",
"office": "Edinburgh",
"extn": "9497"
},
{
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/10\/16",
"office": "San Francisco",
"extn": "6741"
},
{
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$4,800",
"start_date": "2012\/12\/18",
"office": "London",
"extn": "3597"
},
{
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$2,875",
"start_date": "2010\/03\/17",
"office": "London",
"extn": "1965"
},
{
"name": "Michael Silva",
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2012\/11\/27",
"office": "London",
"extn": "1581"
},
{
"name": "Paul Byrd",
"position": "Javascript Developer",
"salary": "$5,000",
"start_date": "2010\/06\/09",
"office": "New York",
"extn": "3059"
},
{
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/04\/10",
"office": "New York",
"extn": "1721"
},
{
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$3,120",
"start_date": "2012\/10\/13",
"office": "London",
"extn": "2558"
},
{
"name": "Dai Rios",
"position": "System Architect",
"salary": "$4,200",
"start_date": "2012\/09\/26",
"office": "Edinburgh",
"extn": "2290"
},
{
"name": "Jenette Caldwell",
"position": "Financial Controller",
"salary": "$4,965",
"start_date": "2011\/09\/03",
"office": "New York",
"extn": "1937"
},
{
"name": "Yuri Berry",
"position": "System Architect",
"salary": "$3,600",
"start_date": "2009\/06\/25",
"office": "New York",
"extn": "6154"
},
{
"name": "Caesar Vance",
"position": "Technical Author",
"salary": "$4,965",
"start_date": "2011\/12\/12",
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$4,965",
"start_date": "2010\/09\/20",
"office": "Edinburgh",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "System Architect",
"salary": "$2,875",
"start_date": "2009\/10\/09",
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$4,525",
"start_date": "2010\/12\/22",
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$4,080",
"start_date": "2010\/11\/14",
"office": "London",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$3,750",
"start_date": "2011\/06\/07",
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Ebony Grimes",
"position": "Software Engineer",
"salary": "$2,875",
"start_date": "2010\/03\/11",
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Russell Chavez",
"position": "Director",
"salary": "$3,600",
"start_date": "2011\/08\/14",
"office": "Edinburgh",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$3,750",
"start_date": "2011\/06\/02",
"office": "Edinburgh",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "$2,875",
"start_date": "2009\/10\/22",
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2011\/05\/07",
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Technical Author",
"salary": "$6,730",
"start_date": "2008\/10\/26",
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Integration Specialist",
"salary": "$4,080",
"start_date": "2011\/03\/09",
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Senior Marketing Designer",
"salary": "$3,750",
"start_date": "2009\/12\/09",
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Financial Controller",
"salary": "$4,080",
"start_date": "2008\/12\/16",
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2010\/02\/12",
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "System Architect",
"salary": "$4,965",
"start_date": "2009\/02\/14",
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Financial Controller",
"salary": "$4,200",
"start_date": "2008\/12\/11",
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$5,000",
"start_date": "2008\/09\/26",
"office": "New York",
"extn": "1042"
},
{
"name": "Miriam Weiss",
"position": "Support Engineer",
"salary": "$4,965",
"start_date": "2011\/02\/03",
"office": "Edinburgh",
"extn": "2120"
},
{
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$4,200",
"start_date": "2011\/05\/03",
"office": "London",
"extn": "6222"
},
{
"name": "Odessa Jackson",
"position": "Support Engineer",
"salary": "$3,600",
"start_date": "2009\/08\/19",
"office": "Edinburgh",
"extn": "9383"
},
{
"name": "Thor Walton",
"position": "Developer",
"salary": "$3,600",
"start_date": "2013\/08\/11",
"office": "New York",
"extn": "8327"
},
{
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$4,800",
"start_date": "2009\/07\/07",
"office": "San Francisco",
"extn": "2927"
},
{
"name": "Elton Baldwin",
"position": "Data Coordinator",
"salary": "$6,730",
"start_date": "2012\/04\/09",
"office": "Edinburgh",
"extn": "8352"
},
{
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$4,800",
"start_date": "2010\/01\/04",
"office": "New York",
"extn": "7439"
},
{
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$5,300",
"start_date": "2012\/06\/01",
"office": "San Francisco",
"extn": "4389"
},
{
"name": "Jennifer Acosta",
"position": "Javascript Developer",
"salary": "$2,875",
"start_date": "2013\/02\/01",
"office": "Edinburgh",
"extn": "3431"
},
{
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$4,800",
"start_date": "2011\/12\/06",
"office": "New York",
"extn": "3990"
},
{
"name": "Hermione Butler",
"position": "Director",
"salary": "$4,080",
"start_date": "2011\/03\/21",
"office": "London",
"extn": "1016"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$3,120",
"start_date": "2009\/02\/27",
"office": "London",
"extn": "6733"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$5,300",
"start_date": "2010\/07\/14",
"office": "San Francisco",
"extn": "8196"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$5,300",
"start_date": "2008\/11\/13",
"office": "Edinburgh",
"extn": "6373"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$4,080",
"start_date": "2011\/06\/27",
"office": "Edinburgh",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "System Architect",
"salary": "$3,120",
"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",
"$3,120",
"2011\/04\/25"
],
"office": "Edinburgh",
"extn": "5421"
},
{
"name": [
"Winters",
"Garrett"
],
"hr": [
"Director",
"$5,300",
"2011\/07\/25"
],
"office": "Edinburgh",
"extn": "8422"
},
{
"name": [
"Cox",
"Ashton"
],
"hr": [
"Technical Author",
"$4,800",
"2009\/01\/12"
],
"office": "San Francisco",
"extn": "1562"
},
{
"name": [
"Kelly",
"Cedric"
],
"hr": [
"Javascript Developer",
"$3,600",
"2012\/03\/29"
],
"office": "Edinburgh",
"extn": "6224"
},
{
"name": [
"Elliott",
"Jenna"
],
"hr": [
"Financial Controller",
"$5,300",
"2008\/11\/28"
],
"office": "Edinburgh",
"extn": "5407"
},
{
"name": [
"Williamson",
"Brielle"
],
"hr": [
"Integration Specialist",
"$4,525",
"2012\/12\/02"
],
"office": "New York",
"extn": "4804"
},
{
"name": [
"Chandler",
"Herrod"
],
"hr": [
"Sales Assistant",
"$4,080",
"2012\/08\/06"
],
"office": "San Francisco",
"extn": "9608"
},
{
"name": [
"Davidson",
"Rhona"
],
"hr": [
"Integration Specialist",
"$6,730",
"2010\/10\/14"
],
"office": "Edinburgh",
"extn": "6200"
},
{
"name": [
"Hurst",
"Colleen"
],
"hr": [
"Javascript Developer",
"$5,000",
"2009\/09\/15"
],
"office": "San Francisco",
"extn": "2360"
},
{
"name": [
"Frost",
"Sonya"
],
"hr": [
"Software Engineer",
"$3,600",
"2008\/12\/13"
],
"office": "Edinburgh",
"extn": "1667"
},
{
"name": [
"Gaines",
"Jena"
],
"hr": [
"System Architect",
"$5,000",
"2008\/12\/19"
],
"office": "London",
"extn": "3814"
},
{
"name": [
"Flynn",
"Quinn"
],
"hr": [
"Financial Controller",
"$4,200",
"2013\/03\/03"
],
"office": "Edinburgh",
"extn": "9497"
},
{
"name": [
"Marshall",
"Charde"
],
"hr": [
"Regional Director",
"$5,300",
"2008\/10\/16"
],
"office": "San Francisco",
"extn": "6741"
},
{
"name": [
"Kennedy",
"Haley"
],
"hr": [
"Senior Marketing Designer",
"$4,800",
"2012\/12\/18"
],
"office": "London",
"extn": "3597"
},
{
"name": [
"Fitzpatrick",
"Tatyana"
],
"hr": [
"Regional Director",
"$2,875",
"2010\/03\/17"
],
"office": "London",
"extn": "1965"
},
{
"name": [
"Silva",
"Michael"
],
"hr": [
"Senior Marketing Designer",
"$3,750",
"2012\/11\/27"
],
"office": "London",
"extn": "1581"
},
{
"name": [
"Byrd",
"Paul"
],
"hr": [
"Javascript Developer",
"$5,000",
"2010\/06\/09"
],
"office": "New York",
"extn": "3059"
},
{
"name": [
"Little",
"Gloria"
],
"hr": [
"Systems Administrator",
"$3,120",
"2009\/04\/10"
],
"office": "New York",
"extn": "1721"
},
{
"name": [
"Greer",
"Bradley"
],
"hr": [
"Software Engineer",
"$3,120",
"2012\/10\/13"
],
"office": "London",
"extn": "2558"
},
{
"name": [
"Rios",
"Dai"
],
"hr": [
"System Architect",
"$4,200",
"2012\/09\/26"
],
"office": "Edinburgh",
"extn": "2290"
},
{
"name": [
"Caldwell",
"Jenette"
],
"hr": [
"Financial Controller",
"$4,965",
"2011\/09\/03"
],
"office": "New York",
"extn": "1937"
},
{
"name": [
"Berry",
"Yuri"
],
"hr": [
"System Architect",
"$3,600",
"2009\/06\/25"
],
"office": "New York",
"extn": "6154"
},
{
"name": [
"Vance",
"Caesar"
],
"hr": [
"Technical Author",
"$4,965",
"2011\/12\/12"
],
"office": "New York",
"extn": "8330"
},
{
"name": [
"Wilder",
"Doris"
],
"hr": [
"Sales Assistant",
"$4,965",
"2010\/09\/20"
],
"office": "Edinburgh",
"extn": "3023"
},
{
"name": [
"Ramos",
"Angelica"
],
"hr": [
"System Architect",
"$2,875",
"2009\/10\/09"
],
"office": "London",
"extn": "5797"
},
{
"name": [
"Joyce",
"Gavin"
],
"hr": [
"Developer",
"$4,525",
"2010\/12\/22"
],
"office": "Edinburgh",
"extn": "8822"
},
{
"name": [
"Chang",
"Jennifer"
],
"hr": [
"Regional Director",
"$4,080",
"2010\/11\/14"
],
"office": "London",
"extn": "9239"
},
{
"name": [
"Wagner",
"Brenden"
],
"hr": [
"Software Engineer",
"$3,750",
"2011\/06\/07"
],
"office": "San Francisco",
"extn": "1314"
},
{
"name": [
"Grimes",
"Ebony"
],
"hr": [
"Software Engineer",
"$2,875",
"2010\/03\/11"
],
"office": "San Francisco",
"extn": "2947"
},
{
"name": [
"Chavez",
"Russell"
],
"hr": [
"Director",
"$3,600",
"2011\/08\/14"
],
"office": "Edinburgh",
"extn": "8899"
},
{
"name": [
"House",
"Michelle"
],
"hr": [
"Integration Specialist",
"$3,750",
"2011\/06\/02"
],
"office": "Edinburgh",
"extn": "2769"
},
{
"name": [
"Burks",
"Suki"
],
"hr": [
"Developer",
"$2,875",
"2009\/10\/22"
],
"office": "London",
"extn": "6832"
},
{
"name": [
"Bartlett",
"Prescott"
],
"hr": [
"Technical Author",
"$6,730",
"2011\/05\/07"
],
"office": "London",
"extn": "3606"
},
{
"name": [
"Cortez",
"Gavin"
],
"hr": [
"Technical Author",
"$6,730",
"2008\/10\/26"
],
"office": "San Francisco",
"extn": "2860"
},
{
"name": [
"Mccray",
"Martena"
],
"hr": [
"Integration Specialist",
"$4,080",
"2011\/03\/09"
],
"office": "Edinburgh",
"extn": "8240"
},
{
"name": [
"Butler",
"Unity"
],
"hr": [
"Senior Marketing Designer",
"$3,750",
"2009\/12\/09"
],
"office": "San Francisco",
"extn": "5384"
},
{
"name": [
"Hatfield",
"Howard"
],
"hr": [
"Financial Controller",
"$4,080",
"2008\/12\/16"
],
"office": "San Francisco",
"extn": "7031"
},
{
"name": [
"Fuentes",
"Hope"
],
"hr": [
"Financial Controller",
"$4,200",
"2010\/02\/12"
],
"office": "San Francisco",
"extn": "6318"
},
{
"name": [
"Harrell",
"Vivian"
],
"hr": [
"System Architect",
"$4,965",
"2009\/02\/14"
],
"office": "San Francisco",
"extn": "9422"
},
{
"name": [
"Mooney",
"Timothy"
],
"hr": [
"Financial Controller",
"$4,200",
"2008\/12\/11"
],
"office": "London",
"extn": "7580"
},
{
"name": [
"Bradshaw",
"Jackson"
],
"hr": [
"Director",
"$5,000",
"2008\/09\/26"
],
"office": "New York",
"extn": "1042"
},
{
"name": [
"Weiss",
"Miriam"
],
"hr": [
"Support Engineer",
"$4,965",
"2011\/02\/03"
],
"office": "Edinburgh",
"extn": "2120"
},
{
"name": [
"Nash",
"Bruno"
],
"hr": [
"Software Engineer",
"$4,200",
"2011\/05\/03"
],
"office": "London",
"extn": "6222"
},
{
"name": [
"Jackson",
"Odessa"
],
"hr": [
"Support Engineer",
"$3,600",
"2009\/08\/19"
],
"office": "Edinburgh",
"extn": "9383"
},
{
"name": [
"Walton",
"Thor"
],
"hr": [
"Developer",
"$3,600",
"2013\/08\/11"
],
"office": "New York",
"extn": "8327"
},
{
"name": [
"Camacho",
"Finn"
],
"hr": [
"Support Engineer",
"$4,800",
"2009\/07\/07"
],
"office": "San Francisco",
"extn": "2927"
},
{
"name": [
"Baldwin",
"Elton"
],
"hr": [
"Data Coordinator",
"$6,730",
"2012\/04\/09"
],
"office": "Edinburgh",
"extn": "8352"
},
{
"name": [
"Frank",
"Zenaida"
],
"hr": [
"Software Engineer",
"$4,800",
"2010\/01\/04"
],
"office": "New York",
"extn": "7439"
},
{
"name": [
"Serrano",
"Zorita"
],
"hr": [
"Software Engineer",
"$5,300",
"2012\/06\/01"
],
"office": "San Francisco",
"extn": "4389"
},
{
"name": [
"Acosta",
"Jennifer"
],
"hr": [
"Javascript Developer",
"$2,875",
"2013\/02\/01"
],
"office": "Edinburgh",
"extn": "3431"
},
{
"name": [
"Stevens",
"Cara"
],
"hr": [
"Sales Assistant",
"$4,800",
"2011\/12\/06"
],
"office": "New York",
"extn": "3990"
},
{
"name": [
"Butler",
"Hermione"
],
"hr": [
"Director",
"$4,080",
"2011\/03\/21"
],
"office": "London",
"extn": "1016"
},
{
"name": [
"Greer",
"Lael"
],
"hr": [
"Systems Administrator",
"$3,120",
"2009\/02\/27"
],
"office": "London",
"extn": "6733"
},
{
"name": [
"Alexander",
"Jonas"
],
"hr": [
"Developer",
"$5,300",
"2010\/07\/14"
],
"office": "San Francisco",
"extn": "8196"
},
{
"name": [
"Decker",
"Shad"
],
"hr": [
"Regional Director",
"$5,300",
"2008\/11\/13"
],
"office": "Edinburgh",
"extn": "6373"
},
{
"name": [
"Bruce",
"Michael"
],
"hr": [
"Javascript Developer",
"$4,080",
"2011\/06\/27"
],
"office": "Edinburgh",
"extn": "5384"
},
{
"name": [
"Snider",
"Donna"
],
"hr": [
"System Architect",
"$3,120",
"2011\/01\/25"
],
"office": "New York",
"extn": "4226"
}
]
}

535
examples/ajax/deep.html
View File

@@ -1,222 +1,331 @@
<!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">
<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/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option. In its simplest case, it can be used to read
arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays
through the use of standard Javascript dotted object notation. Each dot (<code>.</code>) in the
<a href="//datatables.net/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option represents another object level.</p>
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the
<code>hr</code> object in the row's data source object, while <code>contact.0</code> refers to the
first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested
data.</p>
<p>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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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; }
]
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

496
examples/ajax/defer_render.html
View File

@@ -1,210 +1,300 @@
<!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">
<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/init/deferRender"><code class="option" title=
"Initialisation option">deferRender</code></a> option.</p>
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag"
title="HTML tag">TR</code> and <code class="tag" title="HTML tag">TD</code> nodes required for the
table when the data is loaded, DataTables will only create the nodes required for each individual row
at the time of that row being drawn on the page (these nodes are then retained in case they are needed
again so they aren't created multiple times). This can give a significant performance increase, since a
lot less work is done at initialisation time.</p>
<p>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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
&quot;deferRender&quot;: true
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<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/ajax/index.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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="../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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option,
which has a number of options to customise how the data is retrieved from the server.</p>
<p>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="./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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

524
examples/ajax/null_data_source.html
View File

@@ -1,214 +1,328 @@
<!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">
<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>
<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>
<li><a href="//datatables.net/init/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> for content that is dynamic (i.e. based upon the
row's data)</li>
<li><a href="//datatables.net/init/columns.defaultContent"><code class="option" title=
"Initialisation option">columns.defaultContent</code></a> for static content (i.e. simple
strings)</li>
</ul>
<p>This examples shows the use of <a href="//datatables.net/init/columns.defaultContent"><code class=
"option" title="Initialisation option">columns.defaultContent</code></a> to create a <em>button</em>
element in the last column of the table. A simple jQuery <code>click</code> event listener is used to
watch for clicks on the row, and when activated uses the <a href=
"//datatables.net/api/row%28%29.data%28%29"><code class="api" title=
"API method">row().data()</code></a> method to get the data for the row and show a bit of information
about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be
arbitrarily complex.</p>
<p>Note also that the <a href="//datatables.net/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option for the column has been set to <code>null</code>
to indicate that the column has no information that should be obtained data source object.</p>
</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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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 ] );
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

526
examples/ajax/objects.html
View File

@@ -1,222 +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/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">
<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/init/columns.data"><code class=
"option" title="Initialisation option">columns.data</code></a> option which you use to tell DataTables
which property to use from the data source object for each column.</p>
<p>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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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; }
]
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

543
examples/ajax/objects_subarrays.html
View File

@@ -1,222 +1,343 @@
<!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">
<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>
} );
</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/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option, which is particularly useful for working with
JSON feeds in an already defined format.</p>
<p>The <a href="//datatables.net/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> option has the ability to read information not only
from objects, but also from arrays using the same dotted object syntax as for objects. In addition to
this, when working with an array data source <a href="//datatables.net/init/columns.data"><code class=
"option" title="Initialisation option">columns.data</code></a> can process the data to combine and
display the data in simple forms (more complex forms can be defined by using <a href=
"//datatables.net/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> as a function).</p>
<p>This example shows two different aspects of using <a href=
"//datatables.net/init/columns.data"><code class="option" title=
"Initialisation option">columns.data</code></a> to read arrays:</p>
<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>
<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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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; }
]
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

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

@@ -0,0 +1,313 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option
to the address of the JSON data source.</p>
<p>The <a href="//datatables.net/init/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option also allows for more advanced configuration such as
altering how the Ajax request is made. See the <a href="//datatables.net/init/ajax"><code class=
"option" title="Initialisation option">ajax</code></a> documentation or the other Ajax examples for
DataTables for further information.</p>
<p>By default DataTables will assume that an array data source is to be used and will read the
information to be displayed in each column from the row's array using the column index, making working
with arrays very simple (note that this can be changed, or objects used may using the <a href=
"//datatables.net/init/column.data"><code class="option" title=
"Initialisation option">column.data</code></a> option, shown in other examples).</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source, where
the structure of the row's data source in this example is:</p>
<pre>
<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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: &quot;data/arrays.txt&quot;
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
</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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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">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="./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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<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"
]
}
] }

522
examples/api/add_row.html
View File

@@ -1,221 +1,321 @@
<!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">
<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/api/row.add%28%29"><code class="api" title="API method">row.add()</code></a> API
method. Simply call the API function with the data that is to be used for the new row (be it an array
or object). Multiple rows can be added using the <a href=
"//datatables.net/api/rows.add%28%29"><code class="api" title="API method">rows.add()</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/api/draw%28%29"><code class="api" title="API method">draw()</code></a> method, which
is easily done through the chaining that the DataTables API makes use of.</p>
<p>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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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();
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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="../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/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="./index.html">Api</a></h3>
<ul class="toc active">
<li class="active"><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

1366
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>

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

@@ -0,0 +1,779 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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/event/order"><code class="event" title="Event">order</code></a> and <a href=
"//datatables.net/event/search"><code class="event" title="Event">search</code></a> events emitted by
the table. When these events are detected the <a href=
"//datatables.net/api/column%28%29.nodes%28%29"><code class="api" title=
"API method">column().nodes()</code></a> method is used to get the TD/TH nodes for the target column
and the <code>each()</code> helper function used to iterate over each, which have their contents
updated as needed. Note that the <code>filter</code> and <code>order</code> options are using in the
<a href="//datatables.net/api/column%28%29"><code class="api" title="API method">column()</code></a>
method to get the nodes in the current order and with the currently applied filter.</p>
</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>$3,120</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>$5,300</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$4,800</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$3,600</td>
</tr>
<tr>
<td></td>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>$5,300</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$4,525</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$4,080</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>$6,730</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>$5,000</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$3,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>$5,000</td>
</tr>
<tr>
<td></td>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>$4,200</td>
</tr>
<tr>
<td></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>$5,300</td>
</tr>
<tr>
<td></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>$4,800</td>
</tr>
<tr>
<td></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>$2,875</td>
</tr>
<tr>
<td></td>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>$3,750</td>
</tr>
<tr>
<td></td>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>$5,000</td>
</tr>
<tr>
<td></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>$3,120</td>
</tr>
<tr>
<td></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$3,120</td>
</tr>
<tr>
<td></td>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>$4,200</td>
</tr>
<tr>
<td></td>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>$4,965</td>
</tr>
<tr>
<td></td>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>$3,600</td>
</tr>
<tr>
<td></td>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>$4,965</td>
</tr>
<tr>
<td></td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>$4,965</td>
</tr>
<tr>
<td></td>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>$2,875</td>
</tr>
<tr>
<td></td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>$4,525</td>
</tr>
<tr>
<td></td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>$4,080</td>
</tr>
<tr>
<td></td>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>$3,750</td>
</tr>
<tr>
<td></td>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>$2,875</td>
</tr>
<tr>
<td></td>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>$3,600</td>
</tr>
<tr>
<td></td>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>$3,750</td>
</tr>
<tr>
<td></td>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>$2,875</td>
</tr>
<tr>
<td></td>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>$6,730</td>
</tr>
<tr>
<td></td>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>$6,730</td>
</tr>
<tr>
<td></td>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>$4,080</td>
</tr>
<tr>
<td></td>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>$3,750</td>
</tr>
<tr>
<td></td>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>$4,080</td>
</tr>
<tr>
<td></td>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>$4,200</td>
</tr>
<tr>
<td></td>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>$4,965</td>
</tr>
<tr>
<td></td>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>$4,200</td>
</tr>
<tr>
<td></td>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>$5,000</td>
</tr>
<tr>
<td></td>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>$4,965</td>
</tr>
<tr>
<td></td>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>$4,200</td>
</tr>
<tr>
<td></td>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>$3,600</td>
</tr>
<tr>
<td></td>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>$3,600</td>
</tr>
<tr>
<td></td>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>$4,800</td>
</tr>
<tr>
<td></td>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>$6,730</td>
</tr>
<tr>
<td></td>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>$4,800</td>
</tr>
<tr>
<td></td>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>$5,300</td>
</tr>
<tr>
<td></td>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>$2,875</td>
</tr>
<tr>
<td></td>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>$4,800</td>
</tr>
<tr>
<td></td>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>$4,080</td>
</tr>
<tr>
<td></td>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>$3,120</td>
</tr>
<tr>
<td></td>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>$5,300</td>
</tr>
<tr>
<td></td>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>$5,300</td>
</tr>
<tr>
<td></td>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>$4,080</td>
</tr>
<tr>
<td></td>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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();
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
</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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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="../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/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="./index.html">Api</a></h3>
<ul class="toc active">
<li><a href="./add_row.html">Add rows</a></li>
<li><a href="./multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="./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">Filtering API (regular expressions)</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 filter</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-2013<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>

2499
examples/api/form.html
View File

File diff suppressed because it is too large Load Diff

1390
examples/api/highlight.html
View File

File diff suppressed because it is too large Load Diff

69
examples/api/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">
<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="../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 filtering (text inputs)</a></li>
<li><a href="./multi_filter_select.html">Individual column filtering (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">Filtering 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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

1444
examples/api/multi_filter.html
View File

File diff suppressed because it is too large Load Diff

1514
examples/api/multi_filter_select.html
View File

File diff suppressed because it is too large Load Diff

1568
examples/api/regex.html
View File

File diff suppressed because it is too large Load Diff

1084
examples/api/row_details.html
View File

File diff suppressed because it is too large Load Diff

1378
examples/api/select_row.html
View File

File diff suppressed because it is too large Load Diff

1412
examples/api/select_single_row.html
View File

File diff suppressed because it is too large Load Diff

1398
examples/api/show_hide.html
View File

File diff suppressed because it is too large Load Diff

1210
examples/api/tabs_and_scrolling.html
View File

File diff suppressed because it is too large Load Diff

1361
examples/basic_init/alt_pagination.html
View File

File diff suppressed because it is too large Load Diff

592
examples/basic_init/base_themeroller.html
View File

@@ -1,592 +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/jquery.dataTables_themeroller.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() {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables base example (CDN CSS)
</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>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre class="brush: js;">$(document).ready(function() {
$('#example').dataTable();
} );</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>

1344
examples/basic_init/complex_header.html
View File

File diff suppressed because it is too large Load Diff

1414
examples/basic_init/dom.html
View File

File diff suppressed because it is too large Load Diff

1338
examples/basic_init/filter_only.html
View File

File diff suppressed because it is too large Load Diff

1338
examples/basic_init/flexible_width.html
View File

File diff suppressed because it is too large Load Diff

1366
examples/basic_init/hidden_columns.html
View File

File diff suppressed because it is too large Load Diff

71
examples/basic_init/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">
<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="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Simple usage</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Simple usage</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 Init</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="./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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

1351
examples/basic_init/language.html
View File

File diff suppressed because it is too large Load Diff

1321
examples/basic_init/multi_col_sort.html
View File

File diff suppressed because it is too large Load Diff

949
examples/basic_init/multiple_tables.html
View File

@@ -1,416 +1,545 @@
<!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">
<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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>$5,300</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>$5,300</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>$6,730</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$3,600</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>$4,200</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>$4,200</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>$4,965</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>$4,525</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>$3,750</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>$4,080</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>$4,965</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>$3,600</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>$6,730</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>$2,875</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>$4,080</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>System Architect</td>
<td>London</td>
<td>30</td>
<td>$5,000</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>$3,750</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$3,120</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>$2,875</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>$4,080</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>$6,730</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>$4,200</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>$4,200</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
$('table.display').dataTable();
} );
</pre>
<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>
<pre class="brush: js;">
div.dataTables_wrapper {
margin-bottom: 3em;
}
</pre>
</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>
<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 Init</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="./language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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="../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/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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

1518
examples/basic_init/scroll_x.html
View File

File diff suppressed because it is too large Load Diff

1499
examples/basic_init/scroll_xy.html
View File

File diff suppressed because it is too large Load Diff

1352
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>

1343
examples/basic_init/scroll_y_theme.html
View File

File diff suppressed because it is too large Load Diff

1351
examples/basic_init/state_save.html
View File

File diff suppressed because it is too large Load Diff

1342
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>

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

@@ -0,0 +1,743 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$3,750</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$5,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>$3,120</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$3,120</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$3,600</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$4,965</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td>$4,965</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td>$2,875</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$4,525</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td>$4,080</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td>$3,750</td>
</tr>
<tr>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$2,875</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td>$3,750</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$6,730</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$6,730</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$4,080</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$3,750</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$4,080</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$4,200</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$4,965</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$5,000</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td>$3,600</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$3,600</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$4,800</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td>$6,730</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$4,800</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$2,875</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$4,800</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$3,120</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$5,300</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td>$4,080</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
</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 Init</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="./language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</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">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="../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/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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

493
examples/data_sources/ajax.html
View File

@@ -1,208 +1,299 @@
<!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">
<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option
to the address of the JSON data source.</p>
<p>The <a href="//datatables.net/init/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option also allows for more advanced configuration such as
altering how the Ajax request is made. See the <a href="//datatables.net/init/ajax"><code class=
"option" title="Initialisation option">ajax</code></a> documentation or the other Ajax examples for
DataTables 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/init/columns.data"><code class=
"option" title="Initialisation option">columns.data</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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable( {
&quot;ajax&quot;: '../ajax/data/arrays.txt'
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Data Sources</a></h3>
<ul class="toc active">
<li><a href="./dom.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="../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/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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

1329
examples/data_sources/dom.html
View File

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<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="../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 obtain data from four different fundamental sources:</p>
<ul>
<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>Where DataTables reads the data to use in the table from 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">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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

681
examples/data_sources/js_array.html
View File

@@ -1,289 +1,410 @@
<!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">
<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/init/data"><code class="option" title="Initialisation option">data</code></a> option
in the initialisation object, passing in an array of data to be used (like all other DataTables handled
data, this can be arrays or objects using the <a href="//datatables.net/init/columns.data"><code class=
"option" title="Initialisation option">columns.data</code></a> option).</p>
<p>A <code>&lt;table&gt;</code> must be available on the page for DataTables to use. This examples
shows the element being added by Javascript and then initialising the DataTable with a set of data from
a Javascript array.</p>
</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">
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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; }
]
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Data Sources</a></h3>
<ul class="toc active">
<li><a href="./dom.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="../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/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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</body>
</section>
</body>
</html>

678
examples/data_sources/server_side.html
View File

@@ -1,390 +1,302 @@
<!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">
<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/init/serverSide"><code class="option" title=
"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
source through the <a href="//datatables.net/init/ajax"><code class="option" title=
"Initialisation option">ajax</code></a> option.</p>
<p>This example shows a very simple table, matching the other examples, but in this instance using
server-side processing.</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>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="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;
} );
} );
</pre>
<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>
<pre class="brush: js;">
</pre>
</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>
<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 Init</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/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</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/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Data Sources</a></h3>
<ul class="toc active">
<li><a href="./dom.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="../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/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="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/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">Filtering API (regular expressions)</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 filter</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-2013<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)';
?>

7
examples/examples_support/index.html
View File

@@ -1,7 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<frameset rows="15%,85%">
<frame src="controller.html">
<frame>
</frameset>
</html>

97
examples/examples_support/infiniteScroll.php
View File

@@ -1,97 +0,0 @@
<?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( 'name', 'phone', 'email', 'city', 'zip' );
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "testData";
/* 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['iStart'] ) && isset( $_GET['iLength'] ) )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iStart'] ).", ".
mysql_real_escape_string( $_GET['iLength'] );
}
else
{
echo '{ "aaData": [] }';
exit();
}
/*
* SQL queries
* Get data to display
*/
$sQuery = "
SELECT ".str_replace(" , ", " ", implode(", ", $aColumns))."
FROM $sTable
ORDER BY name ASC
$sLimit
";
$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
/*
* Output
*/
$sOutput = '{';
$sOutput .= '"aaData": [ ';
while ( $aRow = mysql_fetch_array( $rResult ) )
{
$sOutput .= "[";
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
/* General output */
$sOutput .= '"'.str_replace('"', '\"', $aRow[ $aColumns[$i] ]).'",';
}
/*
* Optional Configuration:
* If you need to add any extra columns (add/edit/delete etc) to the table, that aren't in the
* database - you can do it here
*/
$sOutput = substr_replace( $sOutput, "", -1 );
$sOutput .= "],";
}
$sOutput = substr_replace( $sOutput, "", -1 );
$sOutput .= '] }';
echo $sOutput;
?>

65
examples/examples_support/jquery-ui-tabs.js vendored
View File

@@ -1,65 +0,0 @@
/*!
* jQuery UI 1.8.2
*
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI
*/
(function(c){c.ui=c.ui||{};if(!c.ui.version){c.extend(c.ui,{version:"1.8.2",plugin:{add:function(a,b,d){a=c.ui[a].prototype;for(var e in d){a.plugins[e]=a.plugins[e]||[];a.plugins[e].push([b,d[e]])}},call:function(a,b,d){if((b=a.plugins[b])&&a.element[0].parentNode)for(var e=0;e<b.length;e++)a.options[b[e][0]]&&b[e][1].apply(a.element,d)}},contains:function(a,b){return document.compareDocumentPosition?a.compareDocumentPosition(b)&16:a!==b&&a.contains(b)},hasScroll:function(a,b){if(c(a).css("overflow")==
"hidden")return false;b=b&&b=="left"?"scrollLeft":"scrollTop";var d=false;if(a[b]>0)return true;a[b]=1;d=a[b]>0;a[b]=0;return d},isOverAxis:function(a,b,d){return a>b&&a<b+d},isOver:function(a,b,d,e,f,g){return c.ui.isOverAxis(a,d,f)&&c.ui.isOverAxis(b,e,g)},keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,COMMAND:91,COMMAND_LEFT:91,COMMAND_RIGHT:93,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,MENU:93,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,
NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38,WINDOWS:91}});c.fn.extend({_focus:c.fn.focus,focus:function(a,b){return typeof a==="number"?this.each(function(){var d=this;setTimeout(function(){c(d).focus();b&&b.call(d)},a)}):this._focus.apply(this,arguments)},enableSelection:function(){return this.attr("unselectable","off").css("MozUserSelect","")},disableSelection:function(){return this.attr("unselectable","on").css("MozUserSelect",
"none")},scrollParent:function(){var a;a=c.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?this.parents().filter(function(){return/(relative|absolute|fixed)/.test(c.curCSS(this,"position",1))&&/(auto|scroll)/.test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0):this.parents().filter(function(){return/(auto|scroll)/.test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",
1))}).eq(0);return/fixed/.test(this.css("position"))||!a.length?c(document):a},zIndex:function(a){if(a!==undefined)return this.css("zIndex",a);if(this.length){a=c(this[0]);for(var b;a.length&&a[0]!==document;){b=a.css("position");if(b=="absolute"||b=="relative"||b=="fixed"){b=parseInt(a.css("zIndex"));if(!isNaN(b)&&b!=0)return b}a=a.parent()}}return 0}});c.extend(c.expr[":"],{data:function(a,b,d){return!!c.data(a,d[3])},focusable:function(a){var b=a.nodeName.toLowerCase(),d=c.attr(a,"tabindex");return(/input|select|textarea|button|object/.test(b)?
!a.disabled:"a"==b||"area"==b?a.href||!isNaN(d):!isNaN(d))&&!c(a)["area"==b?"parents":"closest"](":hidden").length},tabbable:function(a){var b=c.attr(a,"tabindex");return(isNaN(b)||b>=0)&&c(a).is(":focusable")}})}})(jQuery);
;/*!
* jQuery UI Widget 1.8.2
*
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Widget
*/
(function(b){var j=b.fn.remove;b.fn.remove=function(a,c){return this.each(function(){if(!c)if(!a||b.filter(a,[this]).length)b("*",this).add(this).each(function(){b(this).triggerHandler("remove")});return j.call(b(this),a,c)})};b.widget=function(a,c,d){var e=a.split(".")[0],f;a=a.split(".")[1];f=e+"-"+a;if(!d){d=c;c=b.Widget}b.expr[":"][f]=function(h){return!!b.data(h,a)};b[e]=b[e]||{};b[e][a]=function(h,g){arguments.length&&this._createWidget(h,g)};c=new c;c.options=b.extend({},c.options);b[e][a].prototype=
b.extend(true,c,{namespace:e,widgetName:a,widgetEventPrefix:b[e][a].prototype.widgetEventPrefix||a,widgetBaseClass:f},d);b.widget.bridge(a,b[e][a])};b.widget.bridge=function(a,c){b.fn[a]=function(d){var e=typeof d==="string",f=Array.prototype.slice.call(arguments,1),h=this;d=!e&&f.length?b.extend.apply(null,[true,d].concat(f)):d;if(e&&d.substring(0,1)==="_")return h;e?this.each(function(){var g=b.data(this,a),i=g&&b.isFunction(g[d])?g[d].apply(g,f):g;if(i!==g&&i!==undefined){h=i;return false}}):this.each(function(){var g=
b.data(this,a);if(g){d&&g.option(d);g._init()}else b.data(this,a,new c(d,this))});return h}};b.Widget=function(a,c){arguments.length&&this._createWidget(a,c)};b.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(a,c){this.element=b(c).data(this.widgetName,this);this.options=b.extend(true,{},this.options,b.metadata&&b.metadata.get(c)[this.widgetName],a);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create();
this._init()},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+"-disabled ui-state-disabled")},widget:function(){return this.element},option:function(a,c){var d=a,e=this;if(arguments.length===0)return b.extend({},e.options);if(typeof a==="string"){if(c===undefined)return this.options[a];d={};d[a]=c}b.each(d,function(f,
h){e._setOption(f,h)});return e},_setOption:function(a,c){this.options[a]=c;if(a==="disabled")this.widget()[c?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",c);return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(a,c,d){var e=this.options[a];c=b.Event(c);c.type=(a===this.widgetEventPrefix?a:this.widgetEventPrefix+a).toLowerCase();d=d||{};if(c.originalEvent){a=
b.event.props.length;for(var f;a;){f=b.event.props[--a];c[f]=c.originalEvent[f]}}this.element.trigger(c,d);return!(b.isFunction(e)&&e.call(this.element[0],c,d)===false||c.isDefaultPrevented())}}})(jQuery);
;/*
* jQuery UI Tabs 1.8.2
*
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Tabs
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function(d){function s(){return++u}function v(){return++w}var u=0,w=0;d.widget("ui.tabs",{options:{add:null,ajaxOptions:null,cache:false,cookie:null,collapsible:false,disable:null,disabled:[],enable:null,event:"click",fx:null,idPrefix:"ui-tabs-",load:null,panelTemplate:"<div></div>",remove:null,select:null,show:null,spinner:"<em>Loading&#8230;</em>",tabTemplate:'<li><a href="#{href}"><span>#{label}</span></a></li>'},_create:function(){this._tabify(true)},_setOption:function(c,e){if(c=="selected")this.options.collapsible&&
e==this.options.selected||this.select(e);else{this.options[c]=e;this._tabify()}},_tabId:function(c){return c.title&&c.title.replace(/\s/g,"_").replace(/[^A-Za-z0-9\-_:\.]/g,"")||this.options.idPrefix+s()},_sanitizeSelector:function(c){return c.replace(/:/g,"\\:")},_cookie:function(){var c=this.cookie||(this.cookie=this.options.cookie.name||"ui-tabs-"+v());return d.cookie.apply(null,[c].concat(d.makeArray(arguments)))},_ui:function(c,e){return{tab:c,panel:e,index:this.anchors.index(c)}},_cleanup:function(){this.lis.filter(".ui-state-processing").removeClass("ui-state-processing").find("span:data(label.tabs)").each(function(){var c=
d(this);c.html(c.data("label.tabs")).removeData("label.tabs")})},_tabify:function(c){function e(g,f){g.css({display:""});!d.support.opacity&&f.opacity&&g[0].style.removeAttribute("filter")}this.list=this.element.find("ol,ul").eq(0);this.lis=d("li:has(a[href])",this.list);this.anchors=this.lis.map(function(){return d("a",this)[0]});this.panels=d([]);var a=this,b=this.options,h=/^#.+/;this.anchors.each(function(g,f){var j=d(f).attr("href"),l=j.split("#")[0],p;if(l&&(l===location.toString().split("#")[0]||
(p=d("base")[0])&&l===p.href)){j=f.hash;f.href=j}if(h.test(j))a.panels=a.panels.add(a._sanitizeSelector(j));else if(j!="#"){d.data(f,"href.tabs",j);d.data(f,"load.tabs",j.replace(/#.*$/,""));j=a._tabId(f);f.href="#"+j;f=d("#"+j);if(!f.length){f=d(b.panelTemplate).attr("id",j).addClass("ui-tabs-panel ui-widget-content ui-corner-bottom").insertAfter(a.panels[g-1]||a.list);f.data("destroy.tabs",true)}a.panels=a.panels.add(f)}else b.disabled.push(g)});if(c){this.element.addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
this.list.addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");this.lis.addClass("ui-state-default ui-corner-top");this.panels.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");if(b.selected===undefined){location.hash&&this.anchors.each(function(g,f){if(f.hash==location.hash){b.selected=g;return false}});if(typeof b.selected!="number"&&b.cookie)b.selected=parseInt(a._cookie(),10);if(typeof b.selected!="number"&&this.lis.filter(".ui-tabs-selected").length)b.selected=
this.lis.index(this.lis.filter(".ui-tabs-selected"));b.selected=b.selected||(this.lis.length?0:-1)}else if(b.selected===null)b.selected=-1;b.selected=b.selected>=0&&this.anchors[b.selected]||b.selected<0?b.selected:0;b.disabled=d.unique(b.disabled.concat(d.map(this.lis.filter(".ui-state-disabled"),function(g){return a.lis.index(g)}))).sort();d.inArray(b.selected,b.disabled)!=-1&&b.disabled.splice(d.inArray(b.selected,b.disabled),1);this.panels.addClass("ui-tabs-hide");this.lis.removeClass("ui-tabs-selected ui-state-active");
if(b.selected>=0&&this.anchors.length){this.panels.eq(b.selected).removeClass("ui-tabs-hide");this.lis.eq(b.selected).addClass("ui-tabs-selected ui-state-active");a.element.queue("tabs",function(){a._trigger("show",null,a._ui(a.anchors[b.selected],a.panels[b.selected]))});this.load(b.selected)}d(window).bind("unload",function(){a.lis.add(a.anchors).unbind(".tabs");a.lis=a.anchors=a.panels=null})}else b.selected=this.lis.index(this.lis.filter(".ui-tabs-selected"));this.element[b.collapsible?"addClass":
"removeClass"]("ui-tabs-collapsible");b.cookie&&this._cookie(b.selected,b.cookie);c=0;for(var i;i=this.lis[c];c++)d(i)[d.inArray(c,b.disabled)!=-1&&!d(i).hasClass("ui-tabs-selected")?"addClass":"removeClass"]("ui-state-disabled");b.cache===false&&this.anchors.removeData("cache.tabs");this.lis.add(this.anchors).unbind(".tabs");if(b.event!="mouseover"){var k=function(g,f){f.is(":not(.ui-state-disabled)")&&f.addClass("ui-state-"+g)},n=function(g,f){f.removeClass("ui-state-"+g)};this.lis.bind("mouseover.tabs",
function(){k("hover",d(this))});this.lis.bind("mouseout.tabs",function(){n("hover",d(this))});this.anchors.bind("focus.tabs",function(){k("focus",d(this).closest("li"))});this.anchors.bind("blur.tabs",function(){n("focus",d(this).closest("li"))})}var m,o;if(b.fx)if(d.isArray(b.fx)){m=b.fx[0];o=b.fx[1]}else m=o=b.fx;var q=o?function(g,f){d(g).closest("li").addClass("ui-tabs-selected ui-state-active");f.hide().removeClass("ui-tabs-hide").animate(o,o.duration||"normal",function(){e(f,o);a._trigger("show",
null,a._ui(g,f[0]))})}:function(g,f){d(g).closest("li").addClass("ui-tabs-selected ui-state-active");f.removeClass("ui-tabs-hide");a._trigger("show",null,a._ui(g,f[0]))},r=m?function(g,f){f.animate(m,m.duration||"normal",function(){a.lis.removeClass("ui-tabs-selected ui-state-active");f.addClass("ui-tabs-hide");e(f,m);a.element.dequeue("tabs")})}:function(g,f){a.lis.removeClass("ui-tabs-selected ui-state-active");f.addClass("ui-tabs-hide");a.element.dequeue("tabs")};this.anchors.bind(b.event+".tabs",
function(){var g=this,f=d(this).closest("li"),j=a.panels.filter(":not(.ui-tabs-hide)"),l=d(a._sanitizeSelector(this.hash));if(f.hasClass("ui-tabs-selected")&&!b.collapsible||f.hasClass("ui-state-disabled")||f.hasClass("ui-state-processing")||a._trigger("select",null,a._ui(this,l[0]))===false){this.blur();return false}b.selected=a.anchors.index(this);a.abort();if(b.collapsible)if(f.hasClass("ui-tabs-selected")){b.selected=-1;b.cookie&&a._cookie(b.selected,b.cookie);a.element.queue("tabs",function(){r(g,
j)}).dequeue("tabs");this.blur();return false}else if(!j.length){b.cookie&&a._cookie(b.selected,b.cookie);a.element.queue("tabs",function(){q(g,l)});a.load(a.anchors.index(this));this.blur();return false}b.cookie&&a._cookie(b.selected,b.cookie);if(l.length){j.length&&a.element.queue("tabs",function(){r(g,j)});a.element.queue("tabs",function(){q(g,l)});a.load(a.anchors.index(this))}else throw"jQuery UI Tabs: Mismatching fragment identifier.";d.browser.msie&&this.blur()});this.anchors.bind("click.tabs",
function(){return false})},destroy:function(){var c=this.options;this.abort();this.element.unbind(".tabs").removeClass("ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible").removeData("tabs");this.list.removeClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");this.anchors.each(function(){var e=d.data(this,"href.tabs");if(e)this.href=e;var a=d(this).unbind(".tabs");d.each(["href","load","cache"],function(b,h){a.removeData(h+".tabs")})});this.lis.unbind(".tabs").add(this.panels).each(function(){d.data(this,
"destroy.tabs")?d(this).remove():d(this).removeClass("ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover ui-state-focus ui-state-disabled ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide")});c.cookie&&this._cookie(null,c.cookie);return this},add:function(c,e,a){if(a===undefined)a=this.anchors.length;var b=this,h=this.options;e=d(h.tabTemplate.replace(/#\{href\}/g,c).replace(/#\{label\}/g,e));c=!c.indexOf("#")?c.replace("#",""):this._tabId(d("a",e)[0]);e.addClass("ui-state-default ui-corner-top").data("destroy.tabs",
true);var i=d("#"+c);i.length||(i=d(h.panelTemplate).attr("id",c).data("destroy.tabs",true));i.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide");if(a>=this.lis.length){e.appendTo(this.list);i.appendTo(this.list[0].parentNode)}else{e.insertBefore(this.lis[a]);i.insertBefore(this.panels[a])}h.disabled=d.map(h.disabled,function(k){return k>=a?++k:k});this._tabify();if(this.anchors.length==1){h.selected=0;e.addClass("ui-tabs-selected ui-state-active");i.removeClass("ui-tabs-hide");
this.element.queue("tabs",function(){b._trigger("show",null,b._ui(b.anchors[0],b.panels[0]))});this.load(0)}this._trigger("add",null,this._ui(this.anchors[a],this.panels[a]));return this},remove:function(c){var e=this.options,a=this.lis.eq(c).remove(),b=this.panels.eq(c).remove();if(a.hasClass("ui-tabs-selected")&&this.anchors.length>1)this.select(c+(c+1<this.anchors.length?1:-1));e.disabled=d.map(d.grep(e.disabled,function(h){return h!=c}),function(h){return h>=c?--h:h});this._tabify();this._trigger("remove",
null,this._ui(a.find("a")[0],b[0]));return this},enable:function(c){var e=this.options;if(d.inArray(c,e.disabled)!=-1){this.lis.eq(c).removeClass("ui-state-disabled");e.disabled=d.grep(e.disabled,function(a){return a!=c});this._trigger("enable",null,this._ui(this.anchors[c],this.panels[c]));return this}},disable:function(c){var e=this.options;if(c!=e.selected){this.lis.eq(c).addClass("ui-state-disabled");e.disabled.push(c);e.disabled.sort();this._trigger("disable",null,this._ui(this.anchors[c],this.panels[c]))}return this},
select:function(c){if(typeof c=="string")c=this.anchors.index(this.anchors.filter("[href$="+c+"]"));else if(c===null)c=-1;if(c==-1&&this.options.collapsible)c=this.options.selected;this.anchors.eq(c).trigger(this.options.event+".tabs");return this},load:function(c){var e=this,a=this.options,b=this.anchors.eq(c)[0],h=d.data(b,"load.tabs");this.abort();if(!h||this.element.queue("tabs").length!==0&&d.data(b,"cache.tabs"))this.element.dequeue("tabs");else{this.lis.eq(c).addClass("ui-state-processing");
if(a.spinner){var i=d("span",b);i.data("label.tabs",i.html()).html(a.spinner)}this.xhr=d.ajax(d.extend({},a.ajaxOptions,{url:h,success:function(k,n){d(e._sanitizeSelector(b.hash)).html(k);e._cleanup();a.cache&&d.data(b,"cache.tabs",true);e._trigger("load",null,e._ui(e.anchors[c],e.panels[c]));try{a.ajaxOptions.success(k,n)}catch(m){}},error:function(k,n){e._cleanup();e._trigger("load",null,e._ui(e.anchors[c],e.panels[c]));try{a.ajaxOptions.error(k,n,c,b)}catch(m){}}}));e.element.dequeue("tabs");return this}},
abort:function(){this.element.queue([]);this.panels.stop(false,true);this.element.queue("tabs",this.element.queue("tabs").splice(-2,2));if(this.xhr){this.xhr.abort();delete this.xhr}this._cleanup();return this},url:function(c,e){this.anchors.eq(c).removeData("cache.tabs").data("load.tabs",e);return this},length:function(){return this.anchors.length}});d.extend(d.ui.tabs,{version:"1.8.2"});d.extend(d.ui.tabs.prototype,{rotation:null,rotate:function(c,e){var a=this,b=this.options,h=a._rotate||(a._rotate=
function(i){clearTimeout(a.rotation);a.rotation=setTimeout(function(){var k=b.selected;a.select(++k<a.anchors.length?k:0)},c);i&&i.stopPropagation()});e=a._unrotate||(a._unrotate=!e?function(i){i.clientX&&a.rotate(null)}:function(){t=b.selected;h()});if(c){this.element.bind("tabsshow",h);this.anchors.bind(b.event+".tabs",e);h()}else{clearTimeout(a.rotation);this.element.unbind("tabsshow",h);this.anchors.unbind(b.event+".tabs",e);delete this._rotate;delete this._unrotate}return this}})})(jQuery);
;

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