github/DataTables
1
1
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2026-01-12 07:48:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: github:1.10.12
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.21
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

373 Commits
1.10.12 ... 1.10.21

Author SHA1 Message Date
Allan Jardine
83e59694a1 DataTables 1.10.21 release 2020-05-21 10:08:44 +00:00
Allan Jardine
c353c308df Release 1.10.21 2020-05-21 10:03:45 +00:00
Allan Jardine
5262818302 Dev: Tweaks to renderers example 2020-05-21 10:02:16 +00:00
Allan Jardine
8059fde34c DEV created new example that shows progress bars and country flags 2020-05-21 10:01:00 +00:00
Allan Jardine
d56142f417 Dev: Patch Bootstrap 3 the same as Bootstrap 4 for bordered tables 
DD-1012
 2020-05-21 10:00:20 +00:00
Allan Jardine
998efc44b1 Dev: Update to jQuery 3.5.1 2020-05-21 09:59:45 +00:00
Allan Jardine
c44e99c4eb Fix: Bootstrap 4 table-bordered class could have a missing border on header cells which used a colspan/rowspan 
DD-1012
 2020-05-21 09:59:13 +00:00
Allan Jardine
411da6edba Fix: Avoid applying padding to non sortable items on small tables 
Merge pull request #110 from os1r1s110/patch-1
 2020-05-21 09:58:34 +00:00
Allan Jardine
14b84f6dae Fix: Bootstrap 4 styling for the paging control on smaller screens - align to center 
DD-1355
 2020-05-21 09:57:22 +00:00
Allan Jardine
15978fa6b5 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2020-05-21 09:56:41 +00:00
Allan Jardine
a0aefd5ef6 Added some tables for SearchBuilder to use to test html data types 2020-05-21 09:56:05 +00:00
Allan Jardine
12f20f0cbd Fix: Always set max-height for scrolling - allowing Scroller to read the value 2020-05-21 09:54:36 +00:00
Allan Jardine
a804e08b2d Fix: "Next" paging button was active when there were no records in the table 
DD-1241
 2020-05-21 09:53:01 +00:00
Allan Jardine
05414e1437 Update - example: Use initComplete for column filter example 2020-05-21 09:52:15 +00:00
Allan Jardine
f26ec6052f Merge branch 'master' of github.com:DataTables/DataTablesSrc 2020-05-21 09:49:49 +00:00
Allan Jardine
0e6d8ca196 Update make scipt for searchbuilder 2020-05-21 09:48:58 +00:00
Allan Jardine
f7065b99ee Fix: Protect against draw being 0 
https://datatables.net/forums/discussion/61529/question-about-serverside-draw-parameter#latest
 2020-05-21 09:47:21 +00:00
Allan Jardine
358627ae0f Fix: Arrays weren't working for -api tables() 
- DD-1403
 2020-05-21 09:46:07 +00:00
Allan Jardine
b2ca1a9d3f Fix: Table selector of 0 wasn't limiting the API to just the first table when using tables() 
- Error was the loose type checking on the selector
- https://datatables.net/forums/discussion/61468
- Thanks Kevin!
 2020-05-21 09:45:33 +00:00
Allan Jardine
0c9a4ce933 Fix - Edge: Clear in search input wasn't working 2020-05-21 09:44:51 +00:00
Allan Jardine
eaf4c89ee1 Remove deprecated jQuery event shorthandlers 2020-05-21 09:43:21 +00:00
Allan Jardine
79c4414d97 Fix: & was not being correctly encoded for the HTML entity escape 
https://datatables.net/forums/discussion/61240/how-should-html-character-entities-be-escaped-when-rendering-from-an-ajax-request
 2020-05-21 09:42:36 +00:00
Allan Jardine
cedb9e2ada Added code to deal with empty db and dt column 
Modified pluck method to skip column with empty db and map correct array for filter to be effective
Modified data_output for better process of column with empty db
Modified filter to skip empty db column
 2020-05-21 09:40:25 +00:00
Allan Jardine
560dde4217 Fix - Compact class would cause header centered text to be slightly off center 
https://datatables.net/forums/discussion/52288/datatables-compact-class-prevents-centering-of-elements#latest
 2020-05-21 09:39:41 +00:00
Allan Jardine
05acb1ba4f Merge branch 'master' of github.com:DataTables/DataTablesSrc 2020-05-21 09:38:56 +00:00
Allan Jardine
49c2ccf8c7 Dev: Use search panes release number 2020-05-21 09:38:16 +00:00
Allan Jardine
c0071db866 Material style updated to use MDC 
Jira Issue DD-1354
 2020-05-21 09:37:31 +00:00
Allan Jardine
99a20e7e01 Fix example: Pipeline needs to return the Ajax object 
https://datatables.net/forums/discussion/60074/reference-to-xhr-not-passed-for-xhr-dt-when-using-pipline-plugin#latest
 2020-05-21 09:36:00 +00:00
Allan Jardine
c1e67aec89 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2020-05-21 09:31:59 +00:00
Allan Jardine
adef96b700 Fix - docs: Typo in ColReorder link 
- Thank you Iain Twentyman
 2020-05-21 09:31:16 +00:00
Allan Jardine
68798c37ac DEV added a few tweaks for DD-1294 2020-05-21 09:30:34 +00:00
Allan Jardine
5e5295febd Slight change so that the truncated data in the ajax space contains both the start and the end of the json with a message in the middle. 
Jira Issue DD-1294
 2020-05-21 09:29:53 +00:00
Allan Jardine
f3f0a291cd Searchpanes examples testing performance have large amounts of rows, which load slowly when the ajax rendering is active, now any ajax loading will only display the first thousand rows under the ajax tab. 
Jira Issue DD-1294
 2020-05-21 09:29:10 +00:00
Allan Jardine
7779ad6488 Dev: Overflow-x only for syntax highlighter - IE11 2020-05-21 09:25:40 +00:00
Allan Jardine
6e51a62684 Avoid applying padding to non sortable items on small tables 
I don't know if there are more to this or if it would break some other rules but as of my testing it should be fine to remove this rule for headers that have no sorting applied to them.

This is the case already for "normal sized" tables as the padding-right rule is only applied if there is a sorting class to the element. But it has been forgotten for the table-sm variant. So there are two options that I can see.

Specify this rule does not apply if there is a sorting_disabled class
Do the same as what was done for the normal sized table in the following commit: 4e611f31ff
 2020-05-21 09:24:54 +00:00
Allan Jardine
9f1d1a7f49 Merge pull request #1069 from kant/patch-1 
Added closing ) at paragraph 59
 2020-03-14 08:33:13 +00:00
Darío Hereñú
f9d22a76da Added closing ) at paragraph 59 2020-03-13 12:48:34 -03:00
Allan Jardine
90a43ab2ff Update copyright date 2020-03-13 09:25:59 +00:00
Allan Jardine
99773f6d23 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-11-20 10:25:09 +00:00
Allan Jardine
37099cbf55 Dev: Syntax highlighter was overflowing in Firefox 
- DD-1251
 2019-11-20 10:24:35 +00:00
Allan Jardine
e42575bd39 DEV fixed the spelling mistake "Sidney" in the test data! 2019-11-20 10:21:49 +00:00
Allan Jardine
0f2fc016e2 Dev: 1.10.21-dev 2019-11-20 10:19:39 +00:00
Allan Jardine
1ef5d10c0c Fix: IE11 when used with a file:// file and state saving enabled would never complete the table's initialisation. It still won't work with state saving (localStorage isn't supported in IE for file://) but it will now load the table 
- https://datatables.net/forums/discussion/comment/159703#Comment_159703
 2019-11-20 10:19:06 +00:00
Allan Jardine
6ff3e3704f Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-11-20 10:18:32 +00:00
Allan Jardine
ecd2c966b9 Fix: JS error when setting data for an unrendered row 
- DD-1209
 2019-11-20 10:17:56 +00:00
Allan Jardine
bbbb276569 Added Comment 
changed the comment for removing pdo.php in local  or production environment
 2019-11-20 10:16:13 +00:00
Allan Jardine
277feb0075 Update - example: Note use of -api columns().every() in filtering example 
Thanks for the suggestion Martin
 2019-11-20 10:12:45 +00:00
Allan Jardine
ad7711746b DEV tweak to a test 2019-11-20 10:12:20 +00:00
Allan Jardine
83657a29e3 Release 1.10.20 2019-10-01 13:42:32 +00:00
Allan Jardine
03d850c226 Fix - performance: When changing column visibility via the API the header and footer should only be redrawn once per call (after the columns have been changed). State saving likewise. 
- https://datatables.net/forums/discussion/58304
 2019-10-01 13:41:33 +00:00
Allan Jardine
07a6d7f097 Fix: Regex searches can't be cummulative since the regex can alter what has gone before 2019-10-01 13:40:09 +00:00
Allan Jardine
6ec6d155f1 Dev: Fix last / end paging buttons disab;e logic was inverted 
- DD-1098
- DD-1099
 2019-10-01 13:39:44 +00:00
Allan Jardine
b42f10ce98 Dev: Fix error in api structure building 2019-10-01 13:38:49 +00:00
Allan Jardine
94d67b5ebc Fix: Disabled paging buttons should be tab index -1. 
Fixes #146
 2019-10-01 13:37:54 +00:00
Allan Jardine
a3965b5994 Dev: Remove debug 2019-10-01 13:34:23 +00:00
Allan Jardine
dbdeb68022 Performance: Optimisations in creation of API instances and extending 2019-10-01 13:33:34 +00:00
Allan Jardine
2d7be46f41 Dev fix: Correct variable naming error 
- Fix #145
 2019-10-01 13:31:27 +00:00
Allan Jardine
c5a908dbd2 Dev: Fix error in selector for multi-select 2019-10-01 13:29:29 +00:00
Allan Jardine
56af3a08b2 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 13:29:06 +00:00
Allan Jardine
c077e590d3 Adding examples.php to include updated searchPanes terminology 2019-10-01 13:28:43 +00:00
Allan Jardine
2f73d16738 Fix - JS: Strip UTF8 new line separator from filter data 
- https://datatables.net/forums/discussion/comment/155263#Comment_155263
 2019-10-01 13:26:44 +00:00
Allan Jardine
c9e595ab62 Fix - examples: Typo in JS data source example 
- Thanks Mark Partlett!
 2019-10-01 13:19:36 +00:00
Allan Jardine
b0ed3e262c missing semi-colon found when compressing 2019-10-01 13:14:17 +00:00
Allan Jardine
b8c80378c6 Fix - example: clear button support for multi-filter example 
https://www.datatables.net/forums/discussion/56137/filter-clear-not-working-on-ie11-with-individual-search-columns#latest
 2019-10-01 13:13:49 +00:00
Allan Jardine
68e41c4a6c Fix - example: Form input example doesn't use live DOM sorting, so shouldn't show the input columns as sortable 
- DD-823
 2019-10-01 13:08:42 +00:00
Allan Jardine
1ea1821bf8 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 13:07:55 +00:00
Allan Jardine
351714225c DEV nicer jasmine reporter - shows tests being executed 2019-10-01 13:07:33 +00:00
Allan Jardine
d5a2cce299 Fix: Performance regression that was introduced in 1.10.17 for the cell selector. This was particularly apparent in exporting data with Buttons which uses the cells() method. 
- DD-9
 2019-10-01 13:07:09 +00:00
Allan Jardine
94b2b2823b Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 13:03:34 +00:00
Allan Jardine
b1c03b8eae DEV added KeyTable to karma file 2019-10-01 13:03:07 +00:00
Allan Jardine
2d6d87b222 Fix: UIKit integration - better styling for filter and length inputs 
- 611c99c96e (commitcomment-32046169)
 2019-10-01 13:02:44 +00:00
Allan Jardine
cddf43257d Dev: Remove debug 2019-10-01 13:01:54 +00:00
Allan Jardine
6839b75665 Fix: API added data for an orthogonal HTML5 sourced table would not show the new content in the orthogonal data's cell. 
- test added
- https://www.datatables.net/forums/discussion/54118
 2019-10-01 13:00:17 +00:00
Allan Jardine
cafe73625c DEV oracle stuff for Node 2019-10-01 12:58:40 +00:00
Allan Jardine
d3d68f7e85 DEV updated oracle stuff so create valid syntax for 12.2.0.1 2019-10-01 12:57:41 +00:00
Allan Jardine
45a6b4e04f Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 12:56:54 +00:00
Allan Jardine
8e6d438bf0 Fix - examples: SQL Server example SQL could throw an error for servers configured with a French timezone - was read as ydm! 2019-10-01 12:56:27 +00:00
Allan Jardine
ab60d5949c Fix typo in event documentation 2019-10-01 12:55:14 +00:00
Allan Jardine
9de4f80772 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 12:50:50 +00:00
Allan Jardine
86227bc2a1 DEV reworked the unit test for column().dataSrc() 2019-10-01 12:50:26 +00:00
Allan Jardine
f94a9ba56d Fix: Support for unicode line separator as a new line character 
- https://datatables.net/forums/discussion/52654/search-filter-does-not-match-all-newline-characters#latest
- DD-669
 2019-10-01 12:49:39 +00:00
Allan Jardine
2cd1df3996 Fix: When converting from camelCase to the legacy Hungarian notation which is used internally, the top level and column properties wouldn't overwrite any existing Hungarian notation parameters. This can arise if you use the same object to initialise multiple different tables at different points (i.e. in our tests!). It is unlikely to ever happen in the realworld, and it would just result in the more modern notation being used by default. 2019-10-01 12:45:41 +00:00
Allan Jardine
bda9b88ada Dev: Fix SQLite syntax - timestamp without timezone doesn't actually do anything other than timestamp in SQLite 2019-10-01 12:44:09 +00:00
Allan Jardine
8200205ddb Fix - examples: Demo SQL syntax for Sqlite dates was wrong 2019-10-01 12:42:12 +00:00
Allan Jardine
958ecc4dea Dev: Fix link from JSONP example 2019-10-01 12:41:27 +00:00
Allan Jardine
457244d749 DEV minor spelling mistook 2019-10-01 12:41:05 +00:00
Allan Jardine
30e20ddc5b Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 12:39:08 +00:00
Allan Jardine
464f4847b3 DEV changed to allow extensions to be tested and for all tests to run 2019-10-01 12:38:45 +00:00
Allan Jardine
9f591da9e2 Fix: jQuery 3.2 deprecates direct calling of event triggers (e.g. $().scroll() in this case) 
- DD-610
 2019-10-01 12:38:21 +00:00
Allan Jardine
5e6ca62d1d Fix: Cell selector when used with options (e.g. page:'current') wasn't correctly applying those options to the row and column selectors if selecting the cell by row and column. 
- This was caused by a8d0707575b20a0a38461c1cd5edc0dd8a7a3868
- M581
 2019-10-01 12:28:50 +00:00
Allan Jardine
bc6e9e2516 1.10.20 dev (wow) 2019-10-01 12:28:01 +00:00
Allan Jardine
5d2f6fcf7d Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 12:27:36 +00:00
Allan Jardine
620e9ca8be Fix: Unable to use -tag td cells as a selector for -api row() and -api rows() 
- Thread https://datatables.net/forums/discussion/50511/
 2019-10-01 12:27:12 +00:00
Allan Jardine
bff78f4e65 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2019-10-01 12:26:49 +00:00
Allan Jardine
04fea4e9fa DEV more unit tests, day after day, like trudging uphill through mud during a landslide, will it ever end? 2019-10-01 12:26:26 +00:00
Allan Jardine
156faa8338 Latest integraiton file for consistency 2018-06-22 16:34:14 +01:00
Allan Jardine
d975139b62 DataTables 1.10.19 2018-06-22 16:31:29 +01:00
Allan Jardine
452ff3d118 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-22 16:31:12 +01:00
Allan Jardine
cf2715ec1d DEV more unit tests - finished all the fun stuff, back to this - I can retire in a few years... 2018-06-22 16:30:56 +01:00
Allan Jardine
3f193cee3e Fix: Potential for <script> tags to be executed when using the text renderer 
- Search would insert them into the document
 2018-06-22 16:29:16 +01:00
Allan Jardine
40a953edfb Version bump - packaging error in 1.10.17 2018-06-14 15:14:07 +01:00
Allan Jardine
09e03fcc54 Dev: Version 2018-06-14 15:13:52 +01:00
Allan Jardine
f0c2b1f51d Merge branch 'master' of github.com:DataTables/DataTables 2018-06-14 11:51:26 +01:00
Allan Jardine
ed848d4e9d Sync - latest files 2018-06-14 11:51:12 +01:00
Allan Jardine
2c0af470c5 DataTables 1.10.17! 2018-06-14 11:47:05 +01:00
Allan Jardine
01b7a7e952 Dev: Updating bundled jQuery 2018-06-14 11:46:46 +01:00
Allan Jardine
f663114dc4 Dev: Remove cellspacing attribute (deprecated in HTML) and move the tfoot in structure 2018-06-14 11:46:31 +01:00
Allan Jardine
6cd1fc1876 Dev: Update versions of dependencies 2018-06-14 11:45:59 +01:00
Allan Jardine
99bb425eb5 Dev: Update copyright year 2018-06-14 11:43:54 +01:00
Allan Jardine
387ee39f94 Dev - fix: position:absolute doesn't work on Android if you don't include user-scaleable:no, so FixedHeader wouldn't work at all. 
- M388
 2018-06-14 11:43:22 +01:00
Allan Jardine
d9514170ef Fix: Cell selector wouldn't apply cell specific selector-modifier properties. This wasn't a problem in DataTables core as the cell selector doesn't provide its own options, but the {selected:true} modifier from Select does, and it needs to consider the cells only. 
- M501
 2018-06-14 11:42:35 +01:00
Allan Jardine
73fd4997dd Fix: Cell selectors (-api cell() and -api cells()) could select items that were outside the selector modifier range if selecting using a cell index (i.e. the selector modifier such as {page:'current'} wouldn't be applied). 
- M503
 2018-06-14 11:42:20 +01:00
Allan Jardine
a4b056b004 Fix - Bootstrap 4: Select input for length menu should be width:auto rather than a fixed width, allowing for language in the options. 2018-06-14 11:41:32 +01:00
Allan Jardine
ce66166758 Fix: When using -api order.listener() with a string selector, an error would be thrown when the element activated the sort. 
- Many thanks kirik1007 for picking this up!
 2018-06-14 11:40:45 +01:00
Allan Jardine
1efb34501e Fix: jQuery 3.3 deprecates some $.is... methods. Use of those methods has now been removed from DataTables 2018-06-14 11:38:08 +01:00
Allan Jardine
f0f1068070 Fix - examples: Oracle demo SQL used nvarchar, which has been dropped in the db. Now uses nvarchar2. 2018-06-14 11:37:22 +01:00
Allan Jardine
145d0d6535 Fix: If another DataTable was initialised while an async load action was occurring for the state of another table, a Javascript error would occur 
- This was due to checking of parameters which had not yet been initialised
- Scrolling is only setup later, so this check for the header being present is safe
- Thread https://datatables.net/forums/discussion/comment/130261
 2018-06-14 11:36:34 +01:00
Allan Jardine
9a65e5272e Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:36:18 +01:00
Allan Jardine
321a0bb118 DEV some more unit tests 2018-06-14 11:36:02 +01:00
Allan Jardine
1689b5c41e Dev: Exposing _fnExtend as with all of the other internal methods 2018-06-14 11:35:31 +01:00
Allan Jardine
2c1763253e New: Give the cells for the row as a parameter to -init createdRow 2018-06-14 11:34:44 +01:00
Allan Jardine
37c33150cf New - JS: Row data index is passed to -init rowCallback 2018-06-14 11:33:41 +01:00
Allan Jardine
66ea7ec52d Dev: Correct name for parameter in rowCallback docs 2018-06-14 11:33:25 +01:00
Allan Jardine
45bef584b5 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:32:37 +01:00
Allan Jardine
68f0124875 Dev: Add link to blog post for example of Ajax loading child row data 2018-06-14 11:32:06 +01:00
Allan Jardine
ad31f99f07 bootstrap4: use custom select menu styling 2018-06-14 11:31:19 +01:00
Allan Jardine
ced6c2f058 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:29:59 +01:00
Allan Jardine
c9759a828a Update - example: Make it easier to change the grouping column in the grouping example (although, RowGroup is really the way forward here) 2018-06-14 11:29:43 +01:00
Allan Jardine
35d84a8785 DEV more tweaking and twirling 2018-06-14 11:29:12 +01:00
Allan Jardine
ed07c7f945 Fix: [Semantic UI] reduce label and serach input to a single line and restore space between label and input 
Merge pull request #122 from kickofitall/master
 2018-06-14 11:28:56 +01:00
Allan Jardine
f9b0b86357 Fix - styling: Remove container-fluid class from DataTable wrapper element from Bootstrap 4 integration 
Fixes #121
 2018-06-14 11:28:09 +01:00
Allan Jardine
eed346db11 restored space between label and input 2018-06-14 11:27:54 +01:00
Allan Jardine
0bc4349da6 reduce label and serach input to a single line 
With the ui form wrapper the label and input requiere two lines. After the initialization is finished, the view changes to one line. This repositions the table and bounces the page.
 2018-06-14 11:27:38 +01:00
Allan Jardine
2b644e3c67 Fix: Language options - specifying a decimal separator in the default settings rather than the init object would cause correct numeric sorting to fail 
- M475
- Forum 48223
 2018-06-14 11:26:48 +01:00
Allan Jardine
04b4e4a221 Fix: Column visibility changes did not update the colspan for the "No records" display when the table was either empty or filtered to be empty. 2018-06-14 11:25:28 +01:00
Allan Jardine
3d983d3e00 Fix: Updating an array sourced table that had id attributes on the original HTML table rows, would result in the id effectively being lost 
- Fixes DataTables/DataTables 1023
 2018-06-14 11:24:55 +01:00
Allan Jardine
2dcfd038e6 Fix - styling: Itegration with Semantic UI 2.3 - search input was not correctly styled 
- Fixes DataTables/DataTables #1024
 2018-06-14 11:24:23 +01:00
Allan Jardine
c5f9168fb3 Dev: Correct big O notation 2018-06-14 11:23:19 +01:00
Allan Jardine
83199449f4 Dev: Fix Allan's muppet change 2018-06-14 11:23:02 +01:00
Allan Jardine
d73571017a Dev: Code style updates for consistency 2018-06-14 11:22:46 +01:00
Allan Jardine
5f5525b10d Update: {search: 'removed'} selector options optimisation 
Merge pull request #119 from dagadbm/master
 2018-06-14 11:22:30 +01:00
Allan Jardine
5cc3676e27 remove extra white space 2018-06-14 11:22:14 +01:00
Allan Jardine
db1f2383ff Refactor removed search 2018-06-14 11:21:58 +01:00
Allan Jardine
05dcf4d988 Fix - styling: Comptability with Foundation 6.4's grid-xy system 2018-06-14 11:21:26 +01:00
Allan Jardine
387e55a469 DEV: minor tweaks to the styling examples 2018-06-14 11:18:59 +01:00
Allan Jardine
ec585db978 DEV more unit tests and more examples read 2018-06-14 11:18:43 +01:00
Allan Jardine
c1ae2747f2 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:17:21 +01:00
Allan Jardine
64661b706c DEV more fiddling - examples and unit tests 2018-06-14 11:17:05 +01:00
Allan Jardine
ce5e859cbd Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:16:48 +01:00
Allan Jardine
c64a7a03cb Fix - CSS: Bootstrap 4 integration with scrolling - asc icons could show up in the body table 
- DataTables/FixedColumns/issues/37
 2018-06-14 11:16:33 +01:00
Allan Jardine
02cb21017b DEV updates to the example docs 2018-06-14 11:16:02 +01:00
Allan Jardine
9f5a1fc2c3 DEV changes to the docs and a few more tests (note columns().visible() is still a WIP) 2018-06-14 11:15:46 +01:00
Allan Jardine
4c558e0a13 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:15:30 +01:00
Allan Jardine
dbcc844022 DEV more unit tests (seeing a pattren here?) 2018-06-14 11:15:13 +01:00
Allan Jardine
14436e1696 Dev: Switching to always use https rather than protocol relative for example loading libraries 2018-06-14 11:14:41 +01:00
Allan Jardine
2b781ff0bd Update: Bootstrap 4 2018-06-14 11:14:25 +01:00
Allan Jardine
df4c3d25f8 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:13:54 +01:00
Allan Jardine
4d1db22140 dev pushing today's selection of marvellous tests 2018-06-14 11:13:38 +01:00
Allan Jardine
aee9a09035 Fix - CSS: Bootstrap 4 needs border-spacing:0 if used with border-collapse and cellspacing isn't used in the HTML 2018-06-14 11:13:22 +01:00
Allan Jardine
9b95edf189 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:12:36 +01:00
Allan Jardine
5bf38afa28 dev minor updates to examples docs 2018-06-14 11:12:20 +01:00
Allan Jardine
c4dd1136fb Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:12:04 +01:00
Allan Jardine
66c6139c71 Dev: Fix for currency sorting 2018-06-14 11:11:48 +01:00
Allan Jardine
f5283f648c Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:11:17 +01:00
Allan Jardine
2024dc274b dev more progress with additional tests 2018-06-14 11:11:01 +01:00
Allan Jardine
cdc3f4137a Sorting - don't treat 0 as negative infinity 2018-06-14 11:10:30 +01:00
Allan Jardine
4aa55efc91 dev continuing with extending the unit tests - mostly around the index and indexes methods 2018-06-14 11:09:43 +01:00
Allan Jardine
5e74941660 Merge branch 'master' of github.com:DataTables/DataTablesSrc 
added new tests for cell().node()
 2018-06-14 11:08:57 +01:00
Allan Jardine
74e37c13fe added tests for cell().node() 2018-06-14 11:08:41 +01:00
Allan Jardine
fb59f8f903 Styling: UI Kit tech preview moving on to UI Kit v3 2018-06-14 11:07:53 +01:00
Allan Jardine
612c508f1f New: Support Bitcoin and Ethereum symbols for currency sorting 
Thread 46174
 2018-06-14 11:06:34 +01:00
Allan Jardine
99a313b529 Dev fix: Address scrolling issue introduced by #113. The zeroing of height should be applied to the sizer's child node 2018-06-14 11:06:18 +01:00
Allan Jardine
97e465613b Dev: use nvarchar for SQL Server demos rather than varchar 2018-06-14 11:06:03 +01:00
Allan Jardine
4eec66f677 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:05:47 +01:00
Allan Jardine
aa69bda137 Build: Add a JS Hint method for the build functions 
Fix: Typo in row selector docs
 2018-06-14 11:05:31 +01:00
Allan Jardine
3f7da1674f Remove inline styles in injected HTML 
fixes #112
 2018-06-14 11:04:58 +01:00
Allan Jardine
d7ac068183 Fix: Using a ndoe as a row selector when it had already been removed from the table could incorrectly select the row 
- Fixes GH #994
 2018-06-14 11:04:42 +01:00
Allan Jardine
609f3173f8 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2018-06-14 11:04:11 +01:00
Allan Jardine
81218f4fa3 Fix - examples: PHP demo script could use invalid SQL if an orderable:false column was ordered upon 
- Thread 45150
 2018-06-14 11:03:55 +01:00
Allan Jardine
713b7498df Fix: Correct comment for Bootstrap 4 integration (stated that it was Bootstrap 3) 2018-06-14 11:03:39 +01:00
Allan Jardine
6733264f11 Merge pull request #1002 from frederikbosch/patch-1 
missing extension
 2017-12-18 16:23:26 +00:00
Frederik Bosch
72145aba3e missing extension 2017-12-18 16:12:44 +01:00
Allan Jardine
75a665f64f DataTables 1.10.16 release 2017-08-31 14:52:17 +01:00
Allan Jardine
421a5e17ac Dev: Updating third party libraries to latest versions 2017-08-31 14:52:02 +01:00
Allan Jardine
ae945eae3d Fix: When removing rows with server-side processing and paging enabled, the client-side could request a page that no longer exists. 
- Thread 44354
 2017-08-31 14:51:46 +01:00
Allan Jardine
8e0224cf11 Fix: Large numbers shown in the length -tag select should be formatted using the built in number formatter. 
- FB 153
 2017-08-31 14:51:15 +01:00
Allan Jardine
cbec002afc Fix - styling: Bootstrap 4 integration with the table-sm class (renamed from condensed in Bootstrap 3) 2017-08-31 14:50:59 +01:00
Allan Jardine
2f2629433d Dev: Changing name of dev include file for consistency with Editor 2017-08-31 14:49:55 +01:00
Allan Jardine
d894dc7fbc Fix - examples: Server-side processing example in data sources directory wasn't showing the server-side processing script. 2017-08-31 14:49:38 +01:00
Allan Jardine
576b38ef96 Fix: Bootstrap 4 no longer just a tech preview with BS4 going beta 2017-08-31 14:49:22 +01:00
Allan Jardine
344bae3966 Fix: Revert some limited changes from 5608cc872abbc493fa2ec533510576ea8ad066d3 
Update: Bootstrap 4 beta used for examples

- Fixes #105
 2017-08-31 14:49:06 +01:00
Allan Jardine
2000e66401 Fix: Jquery UI 1.12 integration. The spelling of caret was fixed 
- Fixes DataTables/DataTables #963
 2017-08-31 14:47:47 +01:00
Allan Jardine
1900c20e5f Fix: Add class names to column header cells before extensions are initialised. This allows extensions such as Buttons' column visibility selector to operate on class names given in the column options. 
- Thread 34321
- FB 286
 2017-08-31 14:46:59 +01:00
Allan Jardine
57fd628cb7 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2017-08-31 14:46:43 +01:00
Allan Jardine
8cdb720a42 Fix - docs: 404 link error in -init columns.orderData documentation 
Thanks ianchanning!
 2017-08-31 14:46:26 +01:00
Allan Jardine
b90cfd5a2f Revert "DataTables 2 development starts" 
This reverts commit b07cbf3ad523a808ad8ad788dbacaabe456d43d1.
 2017-08-31 14:46:09 +01:00
Allan Jardine
d788695396 Revert "Update: Change -init dom default to lftrip (move the processing element after the table). This is to allow correct layering when scrolling - previously the processing element wouldn't show if scrolling was enabled without a z-index value." 
This reverts commit ff352c4b077d1e0a558c03ff36e15d787560fafa.
 2017-08-31 14:45:54 +01:00
Allan Jardine
069d24e060 Revert "Dev: Missed a few uses of jQuery UI specific code" 
This reverts commit 3690a478e5438b4c744ffb2bf1506dae35162764.
 2017-08-31 14:45:38 +01:00
Allan Jardine
114b913ad1 Revert "New: -api column().name() and -api columns().names() methods which can be used to get and set the names of columns (-init columns.name)" 
This reverts commit fa158a0030e7310837ada440c5f942406c0b4b8a.
 2017-08-31 14:45:21 +01:00
Allan Jardine
df9fdc0d4a Revert "Merge branch 'master' of github.com:DataTables/DataTablesSrc" 
This reverts commit d484e85534a1c8eb28542be5169d4c28690cae48, reversing
changes made to e84eb39f630d04259f7d5377084c2e3b1a4abe42.
 2017-08-31 14:45:06 +01:00
Allan Jardine
98fe28aeb2 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2017-08-31 14:44:50 +01:00
Allan Jardine
c00abc7cad Fix - examples: Remove parameter that isn't required from the limit() method in the demo server-side processing script 
Thanks tangerine
 2017-08-31 14:44:34 +01:00
Allan Jardine
1a3db258d4 New: -api column().name() and -api columns().names() methods which can be used to get and set the names of columns (-init columns.name) 2017-08-31 14:44:01 +01:00
Allan Jardine
df61c273c4 Dev: Missed a few uses of jQuery UI specific code 2017-08-31 14:43:45 +01:00
Allan Jardine
0aaba67759 Update: Change -init dom default to lftrip (move the processing element after the table). This is to allow correct layering when scrolling - previously the processing element wouldn't show if scrolling was enabled without a z-index value. 
- FB 91
 2017-08-31 14:43:29 +01:00
Allan Jardine
e203d67cd8 DataTables 2 development starts 2017-08-31 14:43:13 +01:00
Allan Jardine
e869cc0910 Removed: Built in jQuery UI styling option (jqueryUI) has been removed from DataTables 2. Support for styling via jQuery UI is still available - it is provided via the integration styling files, matching how Bootstrap, Foundation, Semantic UI and all other styling libraries can integrate with DataTables. 2017-08-31 14:42:41 +01:00
Allan Jardine
1d10612859 bootstrap innerfoot scroll fix 2017-08-31 14:42:09 +01:00
Allan Jardine
9f70ba35aa Update jquery.dataTables.scss 
Remove old vendor prefix
-webkit-box-sizing
 2017-08-31 14:41:37 +01:00
Allan Jardine
31db8f9f8d Update jquery.dataTables.scss 
Merge duplicate selectors
 2017-08-31 14:41:05 +01:00
Allan Jardine
7494262db1 DataTables 1.10.15 2017-04-18 09:24:18 +01:00
Allan Jardine
c289ebfcc6 Fix: Javascript error when unique() was used with a DataTables API instance. 
New: `-api slice()` utility method (required to address the above)

- Fixes DataTables/DataTables #928
 2017-04-18 09:15:24 +01:00
Allan Jardine
ea5c1456e6 DataTables 1.10.14 2017-04-17 20:23:57 +01:00
Allan Jardine
8c5c8e7c49 Dev: Update third party libraries 2017-04-17 20:23:25 +01:00
Allan Jardine
9182f8c285 Fix: API performance improvement - sigifnicantly faster API access for large tables. Testing with a table of 50'000 rows rows().count() is now 23mS executation time, while it was 996mS before! 
- The `_unique()` function was a killer because it uses nested loops to
  determine if items have been seen before in an array. In the majority
  of cases when accessing the API the items will be unique already, so
  running the nested loops is hugely detremental to performance.
- Rather than attempting to improve the performance of `_unique()`
  itself, we try to avoid running its algorithim at all. An array of the
  items is sorted and tested to see if there are unique items or not. In
  the majority of cases this means a massive performance boost since it
  is a single loop rather than a nested loop.
 2017-04-14 21:10:23 +01:00
Allan Jardine
c3cd9e8019 Fix: Make SemanticUI integration stackable 
- Fixes DataTables/DataTables #924
 2017-04-13 15:53:46 +01:00
Allan Jardine
3b24f99ac4 Fix - examples: Tighten up regex check to protect against LFI vulnerability 
Credit to Arnaud Labenne of Dotsafe.fr for finding and reporting this.
 2017-04-12 20:00:44 +01:00
Allan Jardine
e9b3c4aff1 Revert: Remove pagination-sm class from DataTables paging container - 
94d90ea3fbcb4db3449f351059abd0a087fa8180
 2017-04-12 19:59:54 +01:00
Allan Jardine
ce211f2b29 Fix - CSS: Columns which are orderable in a single direction only should show a pointer cursor 2017-04-07 11:04:03 +01:00
Allan Jardine
9ad05004b6 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2017-04-05 15:46:13 +01:00
Allan Jardine
213e2ca9b0 Fix - examples: Use https for web font 2017-04-05 15:45:48 +01:00
Allan Jardine
1bceee9662 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2017-04-05 15:45:21 +01:00
Allan Jardine
03f98a12e7 Dev: Update row grouping example to mention RowGroup 2017-04-05 15:44:31 +01:00
Allan Jardine
50d1abf4ca Merge branch 'master' of github.com:DataTables/DataTablesSrc 2017-04-05 15:43:10 +01:00
Allan Jardine
891f36ce99 Dev: Fix copy / paste error for Oracle SQL comment 2017-04-05 15:42:43 +01:00
Allan Jardine
ce77e9eb23 Dev: Adding RowGroup extension build information 2017-04-05 15:42:16 +01:00
Allan Jardine
99acaf21cb Update dataTables.bootstrap4.js 2017-04-05 15:41:25 +01:00
Allan Jardine
51882ce3fa Update - CSS: Additional Bootstrap 4 integration for alpha 6 changes 2017-04-05 15:40:33 +01:00
Allan Jardine
fffbc5eaae Update - CSS: Additional Bootstrap 4 integration for alpha 6 changes 2017-04-05 15:40:08 +01:00
Allan Jardine
b2c2d51a5a Fix: -init columns.orderData would fail if used with a target index of 0 and it was given as an integer 
- Fixes DataTablesSrc #97 and thread 22462
 2017-04-05 15:39:43 +01:00
Allan Jardine
95a99bdbeb Restricted CSS rules for .dataTables_scrollXXX 
CSS rules for scrollable data-table should not affect nested tables.
 2017-04-05 15:37:12 +01:00
Allan Jardine
5ccbb849a7 Wrong variable passed to callbacks 2017-04-05 15:36:18 +01:00
Allan Jardine
3cbfbfe0fc Update - CSS: Bootstrap 4 integration for alpha 6 changes 2017-04-05 15:35:53 +01:00
Allan Jardine
ff0f6813e6 Merge pull request #896 from 8398a7/target_all_file 
All files are subject to package
 2016-12-26 20:42:53 +00:00
839
ebef5d1a55 Target all files 2016-12-26 20:52:19 +09:00
Allan Jardine
403128c42f Adding Oracle demo SQL file 2016-12-06 19:40:44 +00:00
Allan Jardine
c295b130f2 1.10.13 release! 2016-12-06 15:15:00 +00:00
Allan Jardine
fb9185939b Dev: Update external libraries to latest 2016-12-06 15:14:42 +00:00
Allan Jardine
7208f22f54 Dev: Another daft filtering error 2016-12-06 15:14:08 +00:00
Allan Jardine
d861360bfb Dev: Fix errors in the filtering change found by the unit tests 2016-12-06 15:13:52 +00:00
Allan Jardine
08bd1e160b Fix: When assigning a handler for multiple events, automatically add the dt namespace. It worked before for single events, but not multiple. 
- Fixes DataTables/DataTables #836
 2016-12-05 13:49:18 +00:00
Allan Jardine
61ad3d7ff5 Fix: Disallow sUrl being undefined, empty string or null. 
- Fixes DataTables/DataTables #855
 2016-12-05 11:31:37 +00:00
Allan Jardine
d115844483 Fix: Make date detection a lot more strict. Only ISO8601 style strings will be detected as valid dates now. Anything else would require a plug-in. 
- This is because Chrome tries _very_ hard to make anything passed into
  `Date.parse()` a valid date, including nonesense such as "a 1".
- Fixes DataTables/DataTables #874.
 2016-12-05 11:15:09 +00:00
Allan Jardine
acf8945260 Fix: If the paging active element was index 0, it wouldn't be refocused 2016-12-02 18:00:17 +00:00
Allan Jardine
bb253155e6 Fix: If there is no active element when paging, don't attempt to refocus 
Merge pull request #76 from MuellerMatthew/patch-1
 2016-12-02 17:59:44 +00:00
Allan Jardine
28aa80521d Fix: Bootstrap 4 flexbox grid 
Merge pull request #75 from stroebjo/master
 2016-12-02 17:59:28 +00:00
Allan Jardine
be5304d057 Dev: Remove legacy CSS for old versions of Firefox 
Update dataTables.semanticui.scss
 2016-12-02 17:58:57 +00:00
Allan Jardine
9e73901c7a Fix - Remove outdated CSS for old versions of Firefox 
Remove prefixed -moz-box-sizing (not needed since ff 29)
 2016-12-02 17:58:42 +00:00
Allan Jardine
79df7b3374 Fix - performance: slice() can be quite slow when modifying arrays for the filtering, so use push() instead. 
- Fixes #84
 2016-12-02 17:58:26 +00:00
Allan Jardine
bc23e4ccae Fix: When replacing child row information, detach the element rather than removing which would destroy the event handlers. A remove action will still call $().remove() to clean up any event handlers. 
- Thread 38093
 2016-12-02 17:58:11 +00:00
Allan Jardine
b9536e692d Merge branch 'master' of github.com:DataTables/DataTablesSrc 2016-12-02 17:57:55 +00:00
Allan Jardine
31a7cf3133 Fix - docs: Typo in -init rowCallback's markup 
- Fixes DataTables/DataTables #888
 2016-12-02 17:57:39 +00:00
Allan Jardine
875b2d028c Update documentation to reflect that there are 6 built in paging options, not 4 2016-12-02 17:57:07 +00:00
Allan Jardine
ad89212439 Add first_last_numbers Pagination Option 
Add a pagination option to have just the 'First' and 'Last' buttons,
plus page numbers.
 2016-12-02 17:56:21 +00:00
Allan Jardine
1dea1904d5 Dev: Update Bootstrap 4 libraries to alpha 5 2016-12-02 17:55:33 +00:00
Allan Jardine
c5ee273be1 Update - examples: Semantic UI integration for all DataTables extensions is now complete as it will be available in Editor 1.6. This integration is no longer just a tech preview, but rather a core part of DataTables styling options and will be included on the CDN builder soon. 2016-12-02 17:55:17 +00:00
Allan Jardine
abeeda39ae Fix: caption tags should have the caption-side CSS value read from the caption tag itself, not the tabe tag. 
- See thread 38094. Thanks _puls_!
 2016-12-02 17:55:02 +00:00
Allan Jardine
69bcdf36be Fix: Using -init columns.data to access a data point which uses a backslash in its name would result in an error due to an incorrectly escaped regex. 
- Fixes DataTables/DataTables #869
 2016-12-02 17:54:46 +00:00
Allan Jardine
f7754a0d64 Dev: Include jquery-plugin in keywords for package.json 2016-12-02 17:54:30 +00:00
Allan Jardine
f433bb5ba4 New: -api $.fn.dataTable.isDataTable() will now check for DataTable API instances as well (i.e. variables passed in) 
- Thread 38053
 2016-12-02 17:54:14 +00:00
Allan Jardine
4b024ea60e Fix: If initialising a DataTable when the window was horizontally scrolled the browser detection would incorrectly determine that rtl layout was being used (effects scrolling view). 
- Issue was due to the use of `position:fixed` for the element - from
  c856d0eb232ce41c76d0c30739d33e47cc7288f4. Ironically that change just
  moved the issue that it was trying to solve!
- Fixes DataTables/DataTables #866
 2016-12-02 17:53:12 +00:00
Allan Jardine
d2e3bcec32 Dev: Fix no selector issue introduced by dfbf4fa23aa0952ee007bca06b791c2cd0ad48bb 2016-12-02 17:52:57 +00:00
Allan Jardine
946dfe85e3 Fix: Row selector would incorrectly select rows if row index 0 was passed in with a selector modifier. 
- See thread 37834. Much qudos to `guyclairbois` for spotting this and
  test case!
 2016-12-02 17:52:41 +00:00
Allan Jardine
4099cea9cd Fix: Fooundation 6 styling for the processing element needs to use the callout class 
- Fixes DataTablesSrc #82
 2016-12-02 17:51:53 +00:00
Allan Jardine
774d1e7795 Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-12-02 17:49:20 +00:00
Allan Jardine
7df20199ca Added modified tests for stateLoad/stateSave 2016-12-02 17:49:03 +00:00
Allan Jardine
417a9cf2bd Dev: 1.10.13-dev version indicator 2016-12-02 17:48:46 +00:00
Allan Jardine
e5a3a794d6 Dev: Trigger a state save on the first draw like before 
- Bug was introduced by the ordering of the code for the callback state
  loading
 2016-12-02 17:48:30 +00:00
Allan Jardine
fe0ada1535 Fix: jQuery selectors which had a comma in them were incorrectly split by DataTables causing them to be invalid or give incorrect results 
- fb-87
- Forum thread 34641
 2016-12-02 17:48:13 +00:00
Allan Jardine
70d1afe8a1 Fix: Number renderer was not correctly rounding values 
- Add number renderer tests
 2016-12-02 17:47:58 +00:00
Allan Jardine
9e015213b0 New: -init stateLoadCallback can now use a callback function for async loading of state data, rather than requiring it to be sync. 
- async is deprecated in the XHR spec and will be removed from Chrome
  (m53 I think).
 2016-12-02 17:47:26 +00:00
Allan Jardine
9e45850c8d Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-12-02 17:44:50 +00:00
Allan Jardine
048d94836c Fixed several typos in documentation 2016-12-02 17:44:34 +00:00
Allan Jardine
f2f1a88c5c Fix: Remove deprecated jQuery $().bind() and $().unbind() use, replaced with the $().on() and $().off() methods. 
- DataTables explicitly supports only jQuery 1.7+. `on` and `off` were
  introduced in 1.7, so this isn't a problem.
- jQuery migrate shows warnings if bind and unbind are used
- Fixes DataTables/DataTables #853
 2016-12-02 17:44:02 +00:00
Allan Jardine
2cefd489fd Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-12-02 17:43:31 +00:00
Allan Jardine
1a174977ca Modified tests for columnDefs 2016-12-02 17:43:00 +00:00
Allan Jardine
00a4506d95 Performance: Faster row selection for multiple rows (-api rows()) by reusing the allowed row index array 2016-12-02 17:42:29 +00:00
Allan Jardine
7edd896e92 Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-12-02 17:41:42 +00:00
Allan Jardine
02e28fd14e Added new tests for callbacks, first pass complete. 
(will need to add more tests for stateLoad/save)
 2016-12-02 17:41:11 +00:00
Allan Jardine
3e88556062 Fix: Improve column selector when used with a complex jQuery selector for pseudo selectors 
- Many thanks to chrisaeg for pointing this out!
 2016-12-02 17:40:40 +00:00
Allan Jardine
530dd14e94 Dev: Revert 6f6b3d4b14fbba4a8818d8a24dc71763f9e92c80 - it was completely wrong! 2016-12-02 17:38:19 +00:00
Allan Jardine
b41687e3bc Fix - example: Typo in row callback example 2016-12-02 17:36:46 +00:00
Allan Jardine
5dcd176847 Dev: Correct internal parameter names - they we misleading in the code 2016-12-02 17:36:30 +00:00
Allan Jardine
9676200fa9 Update: Upload examples to latest jQuery 1.x release 2016-12-02 17:35:43 +00:00
Allan Jardine
ac15162e3c Fix - docs: Typo in description of -init columns.orderable 
- Thanks _wongjas_
 2016-12-02 17:35:27 +00:00
Allan Jardine
9bc6d5df8a Added new callback tests- 
*drawCallback
	*footerCallback
	*headerCallback
	*infoCallback
	*createdRow (incomplete)
	*drawCallback (incomplete)
 2016-12-02 17:35:11 +00:00
Allan Jardine
348c44230c Dev: Updating jQuery used in examples to 1.12.4 2016-12-02 17:34:40 +00:00
Allan Jardine
e2dd3bef57 Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-12-02 17:34:24 +00:00
Allan Jardine
03d3f4edb9 Added new test 
Callbacks- createRow.js
 2016-12-02 17:34:08 +00:00
Allan Jardine
da861f3604 Merge pull request #80 from aij/master 
Fix: When sorting a date column, an empty string would be incorrectly used as 1970-01-01.
 2016-12-02 17:33:21 +00:00
Allan Jardine
75556f9eca Added new tests for columns options. 
Includes-

columns.orderable
columns.className
columns.name
columns.orderData
columns.searchable
columns.title
columns.visible
columns.width
 2016-12-02 17:32:49 +00:00
Allan Jardine
42ae4bf0c5 Fix date sorting of empty fields 
Previously, date sorting of values that
failed to parse as a date were sorted as
if they were 1970-01-01 (Unix and JS epoch).

Now, they sort before other dates.

Example:
https://jsfiddle.net/qae6zjty/1/
 2016-12-02 17:32:32 +00:00
Allan Jardine
1c3dacae1d Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-12-02 17:31:30 +00:00
Allan Jardine
a1966cca5d Added news tests 2016-12-02 17:31:14 +00:00
Allan Jardine
a934d74d1d Dev: Updating Semantic UI libraries to 2.2.1 
- Fixes issue with the "show x entries" input
- Thread 33814
 2016-12-02 17:29:55 +00:00
Allan Jardine
9005dadaef Dev: Update moment and add note about test files 2016-12-02 17:23:26 +00:00
Allan Jardine
8d662b2229 DataTables 1.10.12! 2016-12-02 17:22:55 +00:00
Allan Jardine
635aad30cc Fix: Align "show entries" text correctly for cases where the Semantic UI JS is not available on the page 2016-12-02 17:22:39 +00:00
Allan Jardine
4865de6399 Fix: Semantic UI styling with a scrolling table 2016-12-02 17:22:08 +00:00
Allan Jardine
63f8c2d9ae Dev: Apply previous fix to Bootstrap 4 as well 2016-12-02 17:21:52 +00:00
Allan Jardine
d014c19992 Fix: Apply border-collapse: separate to Bootstrap styled DataTables 
- Previously it was only used for tables which were marked with the
  `table-bordered`, but that caused issues with scrolling tables which
  are borderless.
- See DataTables/FixedColumns #57
 2016-12-02 17:21:37 +00:00
Allan Jardine
627ca5aef6 Fix: Remove MySQL specific commands from demo SSP class 
- SQL_CALC_FOUND_ROWS was used to try and speed the queries up, and that
  works well for MySQL, but it confuses anyone who tries to modify this
  script for other databases.
- Field escaping should possibly be considered in future as well
 2016-12-02 17:21:21 +00:00
Allan Jardine
632f449467 New: $.fn.dataTable.util methods are now overridable (throttle and escapeRegex) 
- It is useful to be able to replace some of the utility methods with
  your own custom ones - for example a debounce rather than tha throttle
  for filtering.
- This commit reorders the code a little to make that possible. No new
  code is present at such - its really about reordering the current code
  to make `$.fn.dataTable.util` the host for the original functions.
  Backwards compatiblity is provided by assigning the util methods to
  their old variables. With the next major update they should be removed
  and the util methods used directly.
- Other util methods should be added at the same time, escapeHtml,
  unique, etc.
- Fixes DataTables/DataTables #810
 2016-12-02 17:20:34 +00:00
Allan Jardine
275d326cc8 Update: Update to jQuery 1.12.3 2016-12-02 17:20:03 +00:00
Allan Jardine
83af61dd4b Dev: Updating the styling of the code blocks in the examples 2016-12-02 17:19:48 +00:00
Allan Jardine
61ab42e4b2 Fix - example: Server-side pipelining didn't work when all data is requested 
- Although this mitigates any benefits of using server-side processing
  it is something that should be handled.
- Thanks Hormah for pointing this out.
 2016-12-02 17:19:00 +00:00
Allan Jardine
452ab2b541 Update dataTables.bootstrap4.js 2016-12-02 17:18:45 +00:00
Allan Jardine
a3722981df fixing pagination focus issue 2016-12-02 17:18:29 +00:00
Allan Jardine
327d71584b Fix: dt-api order() called with an empty array would cause a JS error 
- Fixes DataTables/DataTables #800
- Its safe to check for `.length` on `orders` at this point since it can
  be either a number, an array or undefined. The number and undefined
  conditions have already been checked, so it must be an array (of
  whatever length).
 2016-12-02 17:18:14 +00:00
Allan Jardine
16c081d889 Dev: Fix recursion error with Responsive from last commit. Need to be 
more selective about when we fire `column-visiblity`!
 2016-12-02 17:17:58 +00:00
Allan Jardine
e9fc9dab2f Dev: A JS error was introduced with the column visiblity change - undefined variable. 
- Need to use two iterators for the columns visible unfortunately
 2016-12-02 17:17:26 +00:00
Allan Jardine
d9775c4085 Fix: Performance issue when using columns.visible() as a setter. 
The column resize was being called for every column.
 2016-12-02 17:16:39 +00:00
Allan Jardine
76c4283b47 Fix: Bootstrap 4 flexbox grid 
The flexbox enabled grid in bootstap 4 requires the lowest `.col-` to be set. https://github.com/twbs/bootstrap/issues/17603#issuecomment-180862254
 2016-12-02 17:16:23 +00:00
Allan Jardine
1071d82541 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2016-12-02 17:16:08 +00:00
Allan Jardine
9a8636af2a Fix - example: Direct link to dt-init ajax.data from its example 2016-12-02 17:15:49 +00:00
Allan Jardine
38d7e00e30 Merge pull request #70 from markvantilburg/patch-7 
Fix: Remove obsolete CSS option for Firefox
 2016-12-02 17:15:33 +00:00
Allan Jardine
aa23ed8744 Merge pull request #71 from markvantilburg/patch-6 
Fix: Remove obsolete CSS option for Firefox
 2016-12-02 17:15:17 +00:00
Allan Jardine
03c918d92e Merge pull request #72 from markvantilburg/patch-4 
Fix: Remove obsolete CSS option for Firefox
 2016-12-02 17:15:02 +00:00
Allan Jardine
7e9ef80c58 Merge pull request #73 from markvantilburg/patch-2 
Fix: Remove obsolete CSS option for Firefox
 2016-12-02 17:14:46 +00:00
Allan Jardine
d7c1892cb2 Update jquery.dataTables.scss 2016-12-02 17:14:29 +00:00
Allan Jardine
ef61fb5ded Update dataTables.uikit.scss 2016-12-02 17:14:13 +00:00
Allan Jardine
31c7312f9f Update dataTables.semanticui.scss 2016-12-02 17:13:57 +00:00
Allan Jardine
1416aabcc9 Update dataTables.foundation.scss 2016-12-02 17:13:24 +00:00
Allan Jardine
3f0245edd6 Update dataTables.bootstrap4.scss 2016-12-02 17:13:08 +00:00
Allan Jardine
aa14a9e50d Dev: Update markdown to allow a line break with a single line. 
- This is primarily for the forum
- This is quite common in markdown extensions now and has plenty of
  backup from Stackoverflow etc to suggest it is a good idea. About time
  I did it as well!
 2016-12-02 17:12:34 +00:00
Allan Jardine
321be3bdb3 Remove prefixed -moz-box-sizing (not needed since ff 29) 
https://developer.mozilla.org/en-US/Firefox/Releases/29
 2016-12-02 16:46:11 +00:00
Allan Jardine
130687eeef Fix: caption tags should have the caption-side CSS value read from the caption tag itself, not the tabe tag. 
- See thread 38094. Thanks _puls_!
 2016-09-30 11:15:24 +01:00
Allan Jardine
0034f6c63e Fix: Using -init columns.data to access a data point which uses a backslash in its name would result in an error due to an incorrectly escaped regex. 
- Fixes DataTables/DataTables #869
 2016-09-29 16:22:53 +01:00
Allan Jardine
6e6705da26 Dev: Include jquery-plugin in keywords for package.json 2016-09-29 15:40:29 +01:00
Allan Jardine
deaf51cef5 New: -api $.fn.dataTable.isDataTable() will now check for DataTable API instances as well (i.e. variables passed in) 
- Thread 38053
 2016-09-29 11:28:42 +01:00
Allan Jardine
62b6cb1b56 Fix: If initialising a DataTable when the window was horizontally scrolled the browser detection would incorrectly determine that rtl layout was being used (effects scrolling view). 
- Issue was due to the use of `position:fixed` for the element - from
  c856d0eb232ce41c76d0c30739d33e47cc7288f4. Ironically that change just
  moved the issue that it was trying to solve!
- Fixes DataTables/DataTables #866
 2016-09-21 10:57:59 +01:00
Allan Jardine
1e4dccb54d Dev: Fix no selector issue introduced by dfbf4fa23aa0952ee007bca06b791c2cd0ad48bb 2016-09-20 09:14:08 +01:00
Allan Jardine
f7d4b8a9cc Fix: Row selector would incorrectly select rows if row index 0 was passed in with a selector modifier. 
- See thread 37834. Much qudos to `guyclairbois` for spotting this and
  test case!
 2016-09-19 16:30:12 +01:00
Allan Jardine
010e070ff0 Merge branch 'master' of github.com:DataTables/DataTablesSrc 2016-09-19 16:29:36 +01:00
Allan Jardine
46d10406a2 Added tests for columns API 2016-09-19 16:27:30 +01:00
Allan Jardine
71fcdec54b Fix: Fooundation 6 styling for the processing element needs to use the callout class 
- Fixes DataTablesSrc #82
 2016-09-16 14:54:19 +01:00
Allan Jardine
ad129699b6 Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-09-16 14:51:45 +01:00
Allan Jardine
3987e441b8 Added modified tests for stateLoad/stateSave 2016-09-16 14:51:28 +01:00
Allan Jardine
ddec443008 Dev: 1.10.13-dev version indicator 2016-08-23 16:01:42 +01:00
Allan Jardine
19a3832792 Dev: Trigger a state save on the first draw like before 
- Bug was introduced by the ordering of the code for the callback state
  loading
 2016-08-23 16:01:25 +01:00
Allan Jardine
02e5dbcf7a Fix: jQuery selectors which had a comma in them were incorrectly split by DataTables causing them to be invalid or give incorrect results 
- fb-87
- Forum thread 34641
 2016-08-23 14:32:50 +01:00
Allan Jardine
fb708efe7e Fix: Number renderer was not correctly rounding values 
- Add number renderer tests
 2016-08-23 11:25:50 +01:00
Allan Jardine
55e0c4da2c Merge branch 'master' of github.com:DataTables/DataTablesSrc 2016-08-23 11:25:33 +01:00
Allan Jardine
f4d266b5c7 Added test plans for table api 2016-08-23 11:25:16 +01:00
Allan Jardine
26fb2b9524 New: -init stateLoadCallback can now use a callback function for async loading of state data, rather than requiring it to be sync. 
- async is deprecated in the XHR spec and will be removed from Chrome
  (m53 I think).
 2016-08-22 16:31:19 +01:00
Allan Jardine
cd3719e3a9 Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-08-22 16:28:29 +01:00
Allan Jardine
3d425d98b5 Fixed several typos in documentation 2016-08-22 16:28:11 +01:00
Allan Jardine
be6d4820ee Merge branch 'master' of github.com:DataTables/DataTablesSrc 2016-08-22 16:27:54 +01:00
Allan Jardine
b5ce731f1d Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-08-22 16:27:20 +01:00
Allan Jardine
267b8bc843 Modified tests for columnDefs 2016-08-22 16:26:46 +01:00
Allan Jardine
cb09b1871b Fix: Remove deprecated jQuery $().bind() and $().unbind() use, replaced with the $().on() and $().off() methods. 
- DataTables explicitly supports only jQuery 1.7+. `on` and `off` were
  introduced in 1.7, so this isn't a problem.
- jQuery migrate shows warnings if bind and unbind are used
- Fixes DataTables/DataTables #853
 2016-08-09 17:58:41 +01:00
Allan Jardine
a588b58ec3 Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-08-09 17:58:10 +01:00
Allan Jardine
b41e559175 Modified tests for columnDefs 2016-08-09 17:57:39 +01:00
Allan Jardine
3511506728 Performance: Faster row selection for multiple rows (-api rows()) by reusing the allowed row index array 2016-08-09 17:57:08 +01:00
Allan Jardine
3bab6dcffd Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-08-09 17:56:21 +01:00
Allan Jardine
e7b656d3f2 Added new tests for callbacks, first pass complete. 
(will need to add more tests for stateLoad/save)
 2016-08-09 17:55:50 +01:00
Allan Jardine
269bf01da0 Fix: Improve column selector when used with a complex jQuery selector for pseudo selectors 
- Many thanks to chrisaeg for pointing this out!
 2016-08-09 17:55:19 +01:00
Allan Jardine
15baf23757 Dev: Revert 6f6b3d4b14fbba4a8818d8a24dc71763f9e92c80 - it was completely wrong! 2016-08-09 17:52:59 +01:00
Allan Jardine
e05df36acf Fix - example: Typo in row callback example 2016-08-09 17:51:23 +01:00
Allan Jardine
dfd7241083 Dev: Correct internal parameter names - they we misleading in the code 2016-08-09 17:51:07 +01:00
Allan Jardine
58b09f70cb Update: Upload examples to latest jQuery 1.x release 2016-08-09 17:50:18 +01:00
Allan Jardine
6b706f1b47 Fix - docs: Typo in description of -init columns.orderable 
- Thanks _wongjas_
 2016-08-09 17:50:01 +01:00
Allan Jardine
5dd079e5f0 Added new callback tests- 
*drawCallback
	*footerCallback
	*headerCallback
	*infoCallback
	*createdRow (incomplete)
	*drawCallback (incomplete)
 2016-08-09 17:49:45 +01:00
Allan Jardine
9afea0b6d0 Dev: Updating jQuery used in examples to 1.12.4 2016-08-09 17:49:13 +01:00
Allan Jardine
66e1e89ed7 Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-08-09 17:48:56 +01:00
Allan Jardine
429b623190 Added new test 
Callbacks- createRow.js
 2016-08-09 17:48:40 +01:00
Allan Jardine
00682a585e Merge pull request #80 from aij/master 
Fix: When sorting a date column, an empty string would be incorrectly used as 1970-01-01.
 2016-08-09 17:47:52 +01:00
Allan Jardine
50d14fc06c Added new tests for columns options. 
Includes-

columns.orderable
columns.className
columns.name
columns.orderData
columns.searchable
columns.title
columns.visible
columns.width
 2016-08-09 17:47:19 +01:00
Allan Jardine
df8192e3be Fix date sorting of empty fields 
Previously, date sorting of values that
failed to parse as a date were sorted as
if they were 1970-01-01 (Unix and JS epoch).

Now, they sort before other dates.

Example:
https://jsfiddle.net/qae6zjty/1/
 2016-08-09 17:47:03 +01:00
Allan Jardine
c256a3d63e Merge branch 'master' of https://github.com/DataTables/DataTablesSrc 2016-08-09 17:45:58 +01:00
Allan Jardine
7d6decd2ce Added news tests 2016-08-09 17:45:42 +01:00
Allan Jardine
e42e6f40b4 Dev: Updating Semantic UI libraries to 2.2.1 
- Fixes issue with the "show x entries" input
- Thread 33814
 2016-08-09 17:44:18 +01:00
Allan Jardine
be84e18e8b Dev: Update moment and add note about test files 2016-08-09 17:37:25 +01:00
168 changed files with 599714 additions and 4042 deletions
Expand all files Collapse all files

2
.datatables-commit-sync
View File

@@ -1 +1 @@
8a8d846fa776b40fde206001c7cb0bbd156de324
561f618389f1dc30eef9c4622a5d32a1c6f73d31

2
Readme.md
View File

@@ -56,4 +56,4 @@ Support for DataTables is available through the [DataTables forums](//datatables
## 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 `/*!`.
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 `/*!`).

4
composer.json
View File

@@ -1,6 +1,6 @@
{
"name": "datatables/datatables",
"version": "1.10.12",
"version": "1.10.21",
"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",
@@ -12,4 +12,4 @@
"forum": "https://datatables.net/forums",
"source": "https://github.com/DataTables/DataTablesSrc/"
}
}
}

4
dataTables.jquery.json
View File

@@ -1,6 +1,6 @@
{
"name": "DataTables",
"version": "1.10.12",
"version": "1.10.21",
"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/",
@@ -29,4 +29,4 @@
"page",
"internationalisable"
]
}
}

66
examples/advanced_init/column_render.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Column rendering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -55,7 +51,8 @@ $(document).ready(function() {
<p>This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links,
assigning colours based on content rules and any other form of text manipulation you require.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -66,16 +63,6 @@ $(document).ready(function() {
<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>
@@ -264,7 +251,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -320,7 +307,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -534,6 +521,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -563,7 +560,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -636,6 +633,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -684,10 +684,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -742,23 +742,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -915,7 +915,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/advanced_init/complex_header.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Complex headers with column visibility</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -41,7 +37,7 @@ $(document).ready(function() {
<div class="info">
<p>Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used to group columns of similar information in DataTables, creating a very powerful
visual effect.</p>
<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code>s into account when working with hidden columns. The
<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code> into account when working with hidden columns. The
<code>colspan</code> and <code>rowspan</code> attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href=
"//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account
@@ -50,7 +46,8 @@ $(document).ready(function() {
it to apply ordering.</p>
<p>The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th rowspan="2">Name</th>
@@ -65,16 +62,6 @@ $(document).ready(function() {
<th>E-mail</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
@@ -264,7 +251,7 @@ $(document).ready(function() {
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>$85,600</td>
<td>Sidney</td>
<td>Sydney</td>
<td>3023</td>
<td>d.wilder@datatables.net</td>
</tr>
@@ -320,7 +307,7 @@ $(document).ready(function() {
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>$95,400</td>
<td>Sidney</td>
<td>Sydney</td>
<td>2769</td>
<td>m.house@datatables.net</td>
</tr>
@@ -533,6 +520,16 @@ $(document).ready(function() {
<td>d.snider@datatables.net</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -554,7 +551,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -627,6 +624,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -675,10 +675,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -733,23 +733,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -906,7 +906,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/advanced_init/defaults.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Setting defaults</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -46,7 +42,8 @@ $(document).ready(function() {
initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
<p>This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -57,16 +54,6 @@ $(document).ready(function() {
<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>
@@ -255,7 +242,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -311,7 +298,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -525,6 +512,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -547,7 +544,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -620,6 +617,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -668,10 +668,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -726,23 +726,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -899,7 +899,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/advanced_init/dom_multiple_elements.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Multiple table control elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -19,14 +19,10 @@
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -50,9 +46,10 @@ $(document).ready(function() {
"DataTables initialisation option">dom</code></a> to create multiple instances of these table controls. Simply include the feature's identification letter where
you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (<code class="string" title="String">t</code>)
should be included only once).</p>
<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
<p>This is shown in the demo below where the four key built-in features are duplicated above and below the table.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -63,16 +60,6 @@ $(document).ready(function() {
<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>
@@ -261,7 +248,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -317,7 +304,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -531,6 +518,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -549,7 +546,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -628,6 +625,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -676,10 +676,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -734,23 +734,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -907,7 +907,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/advanced_init/dom_toolbar.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Custom toolbar elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -17,14 +17,10 @@
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -56,7 +52,8 @@ $(document).ready(function() {
"//datatables.net/extensions/buttons">Buttons</a> is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to
Excel / PDF, and more).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -67,16 +64,6 @@ $(document).ready(function() {
<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>
@@ -265,7 +252,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -321,7 +308,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -535,6 +522,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -555,7 +552,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -630,6 +627,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -678,10 +678,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -736,23 +736,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -909,7 +909,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

69
examples/advanced_init/dt_events.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - DataTables events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -54,8 +50,10 @@ $(document).ready(function() {
"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page</code></a> events by adding a notification that the event fired to an
element on the page to show that they have indeed fired.</p>
</div>
<div id="demo_info" class="box"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html">
<div id="demo_info" class="box"></div>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -66,16 +64,6 @@ $(document).ready(function() {
<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>
@@ -264,7 +252,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -320,7 +308,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -534,6 +522,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -560,7 +558,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -633,6 +631,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -681,10 +682,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -739,23 +740,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -912,7 +913,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/advanced_init/events_live.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - DOM / jQuery events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -46,7 +42,8 @@ $(document).ready(function() {
also uses the DataTables <a href="//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to
retrieve information about the selected row - the row's data so we can show it in the <code>alert</code> message in this case.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -57,16 +54,6 @@ $(document).ready(function() {
<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>
@@ -255,7 +242,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -311,7 +298,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -525,6 +512,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -546,7 +543,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -619,6 +616,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -667,10 +667,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -725,23 +725,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -898,7 +898,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

58
examples/advanced_init/footer_callback.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Footer callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -13,14 +13,10 @@
th { white-space: nowrap; }
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -78,7 +74,8 @@ $(document).ready(function() {
"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()</code></a> for writing the value into the
footer.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -88,12 +85,6 @@ $(document).ready(function() {
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger</td>
@@ -260,7 +251,7 @@ $(document).ready(function() {
<td>Doris</td>
<td>Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>$85,600</td>
</tr>
<tr>
@@ -309,7 +300,7 @@ $(document).ready(function() {
<td>Michelle</td>
<td>House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>$95,400</td>
</tr>
<tr>
@@ -495,6 +486,12 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -544,7 +541,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -617,6 +614,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -665,10 +665,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -723,23 +723,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -896,7 +896,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - HTML5 data-* attributes - cell data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -49,7 +45,8 @@ $(document).ready(function() {
has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it,
the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -60,23 +57,13 @@ $(document).ready(function() {
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td data-search="Tiger Nixon">T. Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td data-order="1303686000">Mon 25th Apr 11</td>
<td data-order="1303689600">Mon 25th Apr 11</td>
<td data-order="320800">$320,800/y</td>
</tr>
<tr>
@@ -84,7 +71,7 @@ $(document).ready(function() {
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td data-order="1311548400">Mon 25th Jul 11</td>
<td data-order="1311552000">Mon 25th Jul 11</td>
<td data-order="170750">$170,750/y</td>
</tr>
<tr>
@@ -100,7 +87,7 @@ $(document).ready(function() {
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td data-order="1332975600">Thu 29th Mar 12</td>
<td data-order="1332979200">Thu 29th Mar 12</td>
<td data-order="433060">$433,060/y</td>
</tr>
<tr>
@@ -124,7 +111,7 @@ $(document).ready(function() {
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td data-order="1344207600">Mon 6th Aug 12</td>
<td data-order="1344211200">Mon 6th Aug 12</td>
<td data-order="137500">$137,500/y</td>
</tr>
<tr>
@@ -132,7 +119,7 @@ $(document).ready(function() {
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td data-order="1287010800">Thu 14th Oct 10</td>
<td data-order="1287014400">Thu 14th Oct 10</td>
<td data-order="327900">$327,900/y</td>
</tr>
<tr>
@@ -140,7 +127,7 @@ $(document).ready(function() {
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td data-order="1252969200">Tue 15th Sep 09</td>
<td data-order="1252972800">Tue 15th Sep 09</td>
<td data-order="205500">$205,500/y</td>
</tr>
<tr>
@@ -172,7 +159,7 @@ $(document).ready(function() {
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td data-order="1224111600">Thu 16th Oct 08</td>
<td data-order="1224115200">Thu 16th Oct 08</td>
<td data-order="470600">$470,600/y</td>
</tr>
<tr>
@@ -204,7 +191,7 @@ $(document).ready(function() {
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td data-order="1276038000">Wed 9th Jun 10</td>
<td data-order="1276041600">Wed 9th Jun 10</td>
<td data-order="725000">$725,000/y</td>
</tr>
<tr>
@@ -212,7 +199,7 @@ $(document).ready(function() {
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td data-order="1239318000">Fri 10th Apr 09</td>
<td data-order="1239321600">Fri 10th Apr 09</td>
<td data-order="237500">$237,500/y</td>
</tr>
<tr>
@@ -220,7 +207,7 @@ $(document).ready(function() {
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td data-order="1350082800">Sat 13th Oct 12</td>
<td data-order="1350086400">Sat 13th Oct 12</td>
<td data-order="132000">$132,000/y</td>
</tr>
<tr>
@@ -228,7 +215,7 @@ $(document).ready(function() {
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td data-order="1348614000">Wed 26th Sep 12</td>
<td data-order="1348617600">Wed 26th Sep 12</td>
<td data-order="217500">$217,500/y</td>
</tr>
<tr>
@@ -236,7 +223,7 @@ $(document).ready(function() {
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td data-order="1315004400">Sat 3rd Sep 11</td>
<td data-order="1315008000">Sat 3rd Sep 11</td>
<td data-order="345000">$345,000/y</td>
</tr>
<tr>
@@ -244,7 +231,7 @@ $(document).ready(function() {
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td data-order="1245884400">Thu 25th Jun 09</td>
<td data-order="1245888000">Thu 25th Jun 09</td>
<td data-order="675000">$675,000/y</td>
</tr>
<tr>
@@ -258,9 +245,9 @@ $(document).ready(function() {
<tr>
<td data-search="Doris Wilder">D. Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td data-order="1284937200">Mon 20th Sep 10</td>
<td data-order="1284940800">Mon 20th Sep 10</td>
<td data-order="85600">$85,600/y</td>
</tr>
<tr>
@@ -268,7 +255,7 @@ $(document).ready(function() {
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td data-order="1255042800">Fri 9th Oct 09</td>
<td data-order="1255046400">Fri 9th Oct 09</td>
<td data-order="1200000">$1,200,000/y</td>
</tr>
<tr>
@@ -292,7 +279,7 @@ $(document).ready(function() {
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td data-order="1307401200">Tue 7th Jun 11</td>
<td data-order="1307404800">Tue 7th Jun 11</td>
<td data-order="206850">$206,850/y</td>
</tr>
<tr>
@@ -308,15 +295,15 @@ $(document).ready(function() {
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td data-order="1313276400">Sun 14th Aug 11</td>
<td data-order="1313280000">Sun 14th Aug 11</td>
<td data-order="163000">$163,000/y</td>
</tr>
<tr>
<td data-search="Michelle House">M. House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td data-order="1306969200">Thu 2nd Jun 11</td>
<td data-order="1306972800">Thu 2nd Jun 11</td>
<td data-order="95400">$95,400/y</td>
</tr>
<tr>
@@ -324,7 +311,7 @@ $(document).ready(function() {
<td>Developer</td>
<td>London</td>
<td>53</td>
<td data-order="1256166000">Thu 22nd Oct 09</td>
<td data-order="1256169600">Thu 22nd Oct 09</td>
<td data-order="114500">$114,500/y</td>
</tr>
<tr>
@@ -332,7 +319,7 @@ $(document).ready(function() {
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td data-order="1304722800">Sat 7th May 11</td>
<td data-order="1304726400">Sat 7th May 11</td>
<td data-order="145000">$145,000/y</td>
</tr>
<tr>
@@ -340,7 +327,7 @@ $(document).ready(function() {
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td data-order="1224975600">Sun 26th Oct 08</td>
<td data-order="1224979200">Sun 26th Oct 08</td>
<td data-order="235500">$235,500/y</td>
</tr>
<tr>
@@ -396,7 +383,7 @@ $(document).ready(function() {
<td>Director</td>
<td>New York</td>
<td>65</td>
<td data-order="1222383600">Fri 26th Sep 08</td>
<td data-order="1222387200">Fri 26th Sep 08</td>
<td data-order="645750">$645,750/y</td>
</tr>
<tr>
@@ -412,7 +399,7 @@ $(document).ready(function() {
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td data-order="1304377200">Tue 3rd May 11</td>
<td data-order="1304380800">Tue 3rd May 11</td>
<td data-order="163500">$163,500/y</td>
</tr>
<tr>
@@ -420,7 +407,7 @@ $(document).ready(function() {
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td data-order="1250636400">Wed 19th Aug 09</td>
<td data-order="1250640000">Wed 19th Aug 09</td>
<td data-order="139575">$139,575/y</td>
</tr>
<tr>
@@ -428,7 +415,7 @@ $(document).ready(function() {
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td data-order="1376175600">Sun 11th Aug 13</td>
<td data-order="1376179200">Sun 11th Aug 13</td>
<td data-order="98540">$98,540/y</td>
</tr>
<tr>
@@ -436,7 +423,7 @@ $(document).ready(function() {
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td data-order="1246921200">Tue 7th Jul 09</td>
<td data-order="1246924800">Tue 7th Jul 09</td>
<td data-order="87500">$87,500/y</td>
</tr>
<tr>
@@ -444,7 +431,7 @@ $(document).ready(function() {
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td data-order="1333926000">Mon 9th Apr 12</td>
<td data-order="1333929600">Mon 9th Apr 12</td>
<td data-order="138575">$138,575/y</td>
</tr>
<tr>
@@ -460,7 +447,7 @@ $(document).ready(function() {
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td data-order="1338505200">Fri 1st Jun 12</td>
<td data-order="1338508800">Fri 1st Jun 12</td>
<td data-order="115000">$115,000/y</td>
</tr>
<tr>
@@ -500,7 +487,7 @@ $(document).ready(function() {
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td data-order="1279062000">Wed 14th Jul 10</td>
<td data-order="1279065600">Wed 14th Jul 10</td>
<td data-order="86500">$86,500/y</td>
</tr>
<tr>
@@ -516,7 +503,7 @@ $(document).ready(function() {
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td data-order="1309129200">Mon 27th Jun 11</td>
<td data-order="1309132800">Mon 27th Jun 11</td>
<td data-order="183000">$183,000/y</td>
</tr>
<tr>
@@ -528,6 +515,16 @@ $(document).ready(function() {
<td data-order="112000">$112,000/y</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -544,7 +541,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -617,6 +614,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -664,12 +664,12 @@ $(document).ready(function() {
<li>
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li class="active">
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
</li>
@@ -723,23 +723,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -896,7 +896,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

48
examples/advanced_init/html5-data-options.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - HTML5 data-* attributes - table options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -37,9 +33,9 @@ $(document).ready(function() {
<p>As of DataTables 1.10.5 it is now possible to define <a href="//datatables.net/reference/option">initialisation options</a> using HTML5 <code>data-*</code>
attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the
<code>data-*</code> attributes taking priority).</p>
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by <a href=
"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a> - this means that double quotes should be used inside the attribute if needed
for a string (see the <code>data-order</code> example below).</p>
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive, as required by <a href=
"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a>. This means that double quotes should be used inside the attribute if needed
for a string (see the <code>data-order</code> in this example).</p>
<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is
used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
@@ -48,6 +44,7 @@ $(document).ready(function() {
<a href="//datatables.net/reference/option/columns.orderable"><code class="option" title="DataTables initialisation option">columns.orderable</code></a> option on
the fifth column below.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" width="100%" data-page-length="25" data-order="[[ 1, &quot;asc&quot; ]]">
<thead>
<tr>
@@ -543,7 +540,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -616,6 +613,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -663,12 +663,12 @@ $(document).ready(function() {
<li>
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li class="active">
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li class="active">
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
</li>
@@ -722,23 +722,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -895,7 +895,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

17
examples/advanced_init/index.html
View File

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Advanced initialisation</title>
</head>
<body class="dt-example">
@@ -57,10 +54,10 @@
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -90,7 +87,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/advanced_init/language_file.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Language file</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -44,7 +40,8 @@ $(document).ready(function() {
option.</p>
<p>The following example shows DataTables reading a German language file which is hosted on the <a href="http://cdn.datatables.net">DataTables CDN</a></p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -55,16 +52,6 @@ $(document).ready(function() {
<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>
@@ -253,7 +240,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -309,7 +296,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -523,6 +510,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -543,7 +540,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -616,6 +613,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -664,10 +664,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li class="active">
<a href="./language_file.html">Language file</a>
@@ -722,23 +722,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -895,7 +895,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/advanced_init/length_menu.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Page length options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -46,7 +42,8 @@ $(document).ready(function() {
</ul>
<p>The example below shows a 2D array being used to include a "Show all" records option.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -57,16 +54,6 @@ $(document).ready(function() {
<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>
@@ -255,7 +242,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -311,7 +298,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -525,6 +512,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -543,7 +540,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -616,6 +613,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -664,10 +664,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -722,23 +722,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -895,7 +895,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

72
examples/advanced_init/object_dom_read.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Read HTML to data objects</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -52,8 +48,7 @@ $(document).ready(function() {
from, but as can be seen here it also tells DataTables where to write the data to.</p>
<p>This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.</p>
<p>In the example shown here, the data read from each row in the table is read into a Javascript object with the structure:</p>
<pre>
<code class="multiline language-js">{
<pre><code class="multiline language-js">{
"name": "...",
"position": "...",
"office": "...",
@@ -61,11 +56,11 @@ $(document).ready(function() {
"start_date": "...",
"salary": "..."
}
</code>
</pre>
</code></pre>
<p>Please note that this feature requires DataTables 1.10.3 or newer.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -76,16 +71,6 @@ $(document).ready(function() {
<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>
@@ -274,7 +259,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -330,7 +315,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -544,6 +529,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -569,7 +564,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -642,6 +637,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -690,10 +688,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -748,23 +746,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -921,7 +919,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/advanced_init/row_callback.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Row created callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -16,14 +16,10 @@
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -48,11 +44,12 @@ $(document).ready(function() {
<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the
<a href="//datatables.net/reference/option/createdRow"><code class="option" title="DataTables initialisation option">createdRow</code></a> function is called once
and once only. It is passed the create row node which can then be modified.</p>
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $4,000.
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $150,000.
Note that <a href="//datatables.net/reference/option/columns.createdCell"><code class="option" title=
"DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -63,16 +60,6 @@ $(document).ready(function() {
<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>
@@ -261,7 +248,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -317,7 +304,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -531,6 +518,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -553,7 +550,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -629,6 +626,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -677,10 +677,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -735,23 +735,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -908,7 +908,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

97
examples/advanced_init/row_grouping.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Row grouping</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -16,30 +16,27 @@ tr.group:hover {
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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 groupColumn = 2;
var table = $('#example').DataTable({
"columnDefs": [
{ "visible": false, "targets": 2 }
{ "visible": false, "targets": groupColumn }
],
"order": [[ 2, 'asc' ]],
"order": [[ groupColumn, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
@@ -54,11 +51,11 @@ $(document).ready(function() {
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
table.order( [ groupColumn, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
table.order( [ groupColumn, 'asc' ] ).draw();
}
} );
} );
@@ -77,8 +74,14 @@ $(document).ready(function() {
is added by the <a href="//datatables.net/reference/option/drawCallback"><code class="option" title="DataTables initialisation option">drawCallback</code></a>
function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event handler is
added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.</p>
<h3 data-anchor="RowGroup-extension"><a name="RowGroup-extension" id="RowGroup-extension"></a>RowGroup extension</h3>
<p>Important note: DataTables now has a <a href="https://datatables.net/extensions/rowgroup">RowGroup</a> extension that provides a formal API for the abilities in
this demo and extends upon them in a number of significant and useful ways. This example is retained as a useful demonstration of how the <a href=
"//datatables.net/reference/option/drawCallback"><code class="option" title="DataTables initialisation option">drawCallback</code></a> option can be used, but for
new sites that make use of row grouping, it is suggested that you use the new RowGroup extension.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -89,16 +92,6 @@ $(document).ready(function() {
<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>
@@ -287,7 +280,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -343,7 +336,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -557,6 +550,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -568,18 +571,19 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var groupColumn = 2;
var table = $('#example').DataTable({
&quot;columnDefs&quot;: [
{ &quot;visible&quot;: false, &quot;targets&quot;: 2 }
{ &quot;visible&quot;: false, &quot;targets&quot;: groupColumn }
],
&quot;order&quot;: [[ 2, 'asc' ]],
&quot;order&quot;: [[ groupColumn, 'asc' ]],
&quot;displayLength&quot;: 25,
&quot;drawCallback&quot;: function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'&lt;tr class=&quot;group&quot;&gt;&lt;td colspan=&quot;5&quot;&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
@@ -594,18 +598,18 @@ $(document).ready(function() {
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
table.order( [ 2, 'desc' ] ).draw();
if ( currentOrder[0] === groupColumn &amp;&amp; currentOrder[1] === 'asc' ) {
table.order( [ groupColumn, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
table.order( [ groupColumn, 'asc' ] ).draw();
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -681,6 +685,9 @@ tr.group:hover {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -729,10 +736,10 @@ tr.group:hover {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -787,23 +794,23 @@ tr.group:hover {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -960,7 +967,7 @@ tr.group:hover {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/advanced_init/sort_direction_control.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -57,9 +53,10 @@ $(document).ready(function() {
<li>Column 6 - default ordering</li>
</ul>
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows
how these options can be use and therefore applied across all columns.</p>
how these options can be used and therefore applied across all columns.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -70,16 +67,6 @@ $(document).ready(function() {
<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>
@@ -268,7 +255,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -324,7 +311,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -538,6 +525,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -563,7 +560,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -636,6 +633,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -684,10 +684,10 @@ $(document).ready(function() {
<a href="./object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./language_file.html">Language file</a>
@@ -742,23 +742,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -915,7 +915,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

42
examples/ajax/custom_data_flat.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -60,7 +56,8 @@ $(document).ready(function() {
"DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an
object with an array inside it as is the default.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -110,7 +107,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -183,6 +180,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -231,10 +231,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -289,23 +289,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -462,7 +462,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

46
examples/ajax/custom_data_property.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -38,7 +34,7 @@ $(document).ready(function() {
<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=
<code>{ "data": [...] }</code>). This can easily be changed by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
of ways in which it can be used:</p>
@@ -50,10 +46,11 @@ $(document).ready(function() {
</ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"DataTables initialisation option">ajax.dataSrc</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>
"string" title="String">demo</code>, but it could be any value, including a nested property using standard dotted Javascript object notation.</p>
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -95,7 +92,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -168,6 +165,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -216,10 +216,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -274,23 +274,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -447,7 +447,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

4
examples/ajax/data/arrays.txt
View File

@@ -187,7 +187,7 @@
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"Sydney",
"3023",
"2010\/09\/20",
"$85,600"
@@ -243,7 +243,7 @@
[
"Michelle House",
"Integration Specialist",
"Sidney",
"Sydney",
"2769",
"2011\/06\/02",
"$95,400"

4
examples/ajax/data/arrays_custom_prop.txt
View File

@@ -187,7 +187,7 @@
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"Sydney",
"3023",
"2010\/09\/20",
"$85,600"
@@ -243,7 +243,7 @@
[
"Michelle House",
"Integration Specialist",
"Sidney",
"Sydney",
"2769",
"2011\/06\/02",
"$95,400"

4
examples/ajax/data/arrays_subobjects.txt
View File

@@ -284,7 +284,7 @@
"start_date": "2010\/09\/20"
},
"contact": {
"office": "Sidney",
"office": "Sydney",
"extn": "3023"
}
},
@@ -368,7 +368,7 @@
"start_date": "2011\/06\/02"
},
"contact": {
"office": "Sidney",
"office": "Sydney",
"extn": "2769"
}
},

90004
examples/ajax/data/data_10k.txt Normal file
View File

File diff suppressed because it is too large Load Diff

9004
examples/ajax/data/data_1k.txt Normal file
View File

File diff suppressed because it is too large Load Diff

450004
examples/ajax/data/data_50k.txt Normal file
View File

File diff suppressed because it is too large Load Diff

45004
examples/ajax/data/data_5k.txt Normal file
View File

File diff suppressed because it is too large Load Diff

61
examples/ajax/data/objects.txt
View File

@@ -1,6 +1,7 @@
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
@@ -9,6 +10,7 @@
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
@@ -17,6 +19,7 @@
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
@@ -25,6 +28,7 @@
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
@@ -33,6 +37,7 @@
"extn": "6224"
},
{
"id": "5",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
@@ -41,6 +46,7 @@
"extn": "5407"
},
{
"id": "6",
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
@@ -49,6 +55,7 @@
"extn": "4804"
},
{
"id": "7",
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
@@ -57,6 +64,7 @@
"extn": "9608"
},
{
"id": "8",
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
@@ -65,6 +73,7 @@
"extn": "6200"
},
{
"id": "9",
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$205,500",
@@ -73,6 +82,7 @@
"extn": "2360"
},
{
"id": "10",
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$103,600",
@@ -81,6 +91,7 @@
"extn": "1667"
},
{
"id": "11",
"name": "Jena Gaines",
"position": "Office Manager",
"salary": "$90,560",
@@ -89,6 +100,7 @@
"extn": "3814"
},
{
"id": "12",
"name": "Quinn Flynn",
"position": "Support Lead",
"salary": "$342,000",
@@ -97,6 +109,7 @@
"extn": "9497"
},
{
"id": "13",
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$470,600",
@@ -105,6 +118,7 @@
"extn": "6741"
},
{
"id": "14",
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$313,500",
@@ -113,6 +127,7 @@
"extn": "3597"
},
{
"id": "15",
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$385,750",
@@ -121,6 +136,7 @@
"extn": "1965"
},
{
"id": "16",
"name": "Michael Silva",
"position": "Marketing Designer",
"salary": "$198,500",
@@ -129,6 +145,7 @@
"extn": "1581"
},
{
"id": "17",
"name": "Paul Byrd",
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
@@ -137,6 +154,7 @@
"extn": "3059"
},
{
"id": "18",
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$237,500",
@@ -145,6 +163,7 @@
"extn": "1721"
},
{
"id": "19",
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$132,000",
@@ -153,6 +172,7 @@
"extn": "2558"
},
{
"id": "20",
"name": "Dai Rios",
"position": "Personnel Lead",
"salary": "$217,500",
@@ -161,6 +181,7 @@
"extn": "2290"
},
{
"id": "21",
"name": "Jenette Caldwell",
"position": "Development Lead",
"salary": "$345,000",
@@ -169,6 +190,7 @@
"extn": "1937"
},
{
"id": "22",
"name": "Yuri Berry",
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
@@ -177,6 +199,7 @@
"extn": "6154"
},
{
"id": "23",
"name": "Caesar Vance",
"position": "Pre-Sales Support",
"salary": "$106,450",
@@ -185,14 +208,16 @@
"extn": "8330"
},
{
"id": "24",
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010\/09\/20",
"office": "Sidney",
"office": "Sydney",
"extn": "3023"
},
{
"id": "25",
"name": "Angelica Ramos",
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
@@ -201,6 +226,7 @@
"extn": "5797"
},
{
"id": "26",
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$92,575",
@@ -209,6 +235,7 @@
"extn": "8822"
},
{
"id": "27",
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$357,650",
@@ -217,6 +244,7 @@
"extn": "9239"
},
{
"id": "28",
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$206,850",
@@ -225,6 +253,7 @@
"extn": "1314"
},
{
"id": "29",
"name": "Fiona Green",
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
@@ -233,6 +262,7 @@
"extn": "2947"
},
{
"id": "30",
"name": "Shou Itou",
"position": "Regional Marketing",
"salary": "$163,000",
@@ -241,14 +271,16 @@
"extn": "8899"
},
{
"id": "31",
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011\/06\/02",
"office": "Sidney",
"office": "Sydney",
"extn": "2769"
},
{
"id": "32",
"name": "Suki Burks",
"position": "Developer",
"salary": "$114,500",
@@ -257,6 +289,7 @@
"extn": "6832"
},
{
"id": "33",
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$145,000",
@@ -265,6 +298,7 @@
"extn": "3606"
},
{
"id": "34",
"name": "Gavin Cortez",
"position": "Team Leader",
"salary": "$235,500",
@@ -273,6 +307,7 @@
"extn": "2860"
},
{
"id": "35",
"name": "Martena Mccray",
"position": "Post-Sales support",
"salary": "$324,050",
@@ -281,6 +316,7 @@
"extn": "8240"
},
{
"id": "36",
"name": "Unity Butler",
"position": "Marketing Designer",
"salary": "$85,675",
@@ -289,6 +325,7 @@
"extn": "5384"
},
{
"id": "37",
"name": "Howard Hatfield",
"position": "Office Manager",
"salary": "$164,500",
@@ -297,6 +334,7 @@
"extn": "7031"
},
{
"id": "38",
"name": "Hope Fuentes",
"position": "Secretary",
"salary": "$109,850",
@@ -305,6 +343,7 @@
"extn": "6318"
},
{
"id": "39",
"name": "Vivian Harrell",
"position": "Financial Controller",
"salary": "$452,500",
@@ -313,6 +352,7 @@
"extn": "9422"
},
{
"id": "40",
"name": "Timothy Mooney",
"position": "Office Manager",
"salary": "$136,200",
@@ -321,6 +361,7 @@
"extn": "7580"
},
{
"id": "41",
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$645,750",
@@ -329,6 +370,7 @@
"extn": "1042"
},
{
"id": "42",
"name": "Olivia Liang",
"position": "Support Engineer",
"salary": "$234,500",
@@ -337,6 +379,7 @@
"extn": "2120"
},
{
"id": "43",
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$163,500",
@@ -345,6 +388,7 @@
"extn": "6222"
},
{
"id": "44",
"name": "Sakura Yamamoto",
"position": "Support Engineer",
"salary": "$139,575",
@@ -353,6 +397,7 @@
"extn": "9383"
},
{
"id": "45",
"name": "Thor Walton",
"position": "Developer",
"salary": "$98,540",
@@ -361,6 +406,7 @@
"extn": "8327"
},
{
"id": "46",
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$87,500",
@@ -369,6 +415,7 @@
"extn": "2927"
},
{
"id": "47",
"name": "Serge Baldwin",
"position": "Data Coordinator",
"salary": "$138,575",
@@ -377,6 +424,7 @@
"extn": "8352"
},
{
"id": "48",
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$125,250",
@@ -385,6 +433,7 @@
"extn": "7439"
},
{
"id": "49",
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$115,000",
@@ -393,6 +442,7 @@
"extn": "4389"
},
{
"id": "50",
"name": "Jennifer Acosta",
"position": "Junior Javascript Developer",
"salary": "$75,650",
@@ -401,6 +451,7 @@
"extn": "3431"
},
{
"id": "51",
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$145,600",
@@ -409,6 +460,7 @@
"extn": "3990"
},
{
"id": "52",
"name": "Hermione Butler",
"position": "Regional Director",
"salary": "$356,250",
@@ -417,6 +469,7 @@
"extn": "1016"
},
{
"id": "53",
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$103,500",
@@ -425,6 +478,7 @@
"extn": "6733"
},
{
"id": "54",
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$86,500",
@@ -433,6 +487,7 @@
"extn": "8196"
},
{
"id": "55",
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$183,000",
@@ -441,6 +496,7 @@
"extn": "6373"
},
{
"id": "56",
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
@@ -449,6 +505,7 @@
"extn": "5384"
},
{
"id": "57",
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",

4
examples/ajax/data/objects_deep.txt
View File

@@ -284,7 +284,7 @@
"start_date": "2010\/09\/20"
},
"contact": [
"Sidney",
"Sydney",
"3023"
]
},
@@ -368,7 +368,7 @@
"start_date": "2011\/06\/02"
},
"contact": [
"Sidney",
"Sydney",
"2769"
]
},

61
examples/ajax/data/objects_root_array.txt
View File

@@ -1,5 +1,6 @@
[
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
@@ -8,6 +9,7 @@
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
@@ -16,6 +18,7 @@
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
@@ -24,6 +27,7 @@
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
@@ -32,6 +36,7 @@
"extn": "6224"
},
{
"id": "5",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
@@ -40,6 +45,7 @@
"extn": "5407"
},
{
"id": "6",
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
@@ -48,6 +54,7 @@
"extn": "4804"
},
{
"id": "7",
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
@@ -56,6 +63,7 @@
"extn": "9608"
},
{
"id": "8",
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
@@ -64,6 +72,7 @@
"extn": "6200"
},
{
"id": "9",
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$205,500",
@@ -72,6 +81,7 @@
"extn": "2360"
},
{
"id": "10",
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$103,600",
@@ -80,6 +90,7 @@
"extn": "1667"
},
{
"id": "11",
"name": "Jena Gaines",
"position": "Office Manager",
"salary": "$90,560",
@@ -88,6 +99,7 @@
"extn": "3814"
},
{
"id": "12",
"name": "Quinn Flynn",
"position": "Support Lead",
"salary": "$342,000",
@@ -96,6 +108,7 @@
"extn": "9497"
},
{
"id": "13",
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "$470,600",
@@ -104,6 +117,7 @@
"extn": "6741"
},
{
"id": "14",
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "$313,500",
@@ -112,6 +126,7 @@
"extn": "3597"
},
{
"id": "15",
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "$385,750",
@@ -120,6 +135,7 @@
"extn": "1965"
},
{
"id": "16",
"name": "Michael Silva",
"position": "Marketing Designer",
"salary": "$198,500",
@@ -128,6 +144,7 @@
"extn": "1581"
},
{
"id": "17",
"name": "Paul Byrd",
"position": "Chief Financial Officer (CFO)",
"salary": "$725,000",
@@ -136,6 +153,7 @@
"extn": "3059"
},
{
"id": "18",
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "$237,500",
@@ -144,6 +162,7 @@
"extn": "1721"
},
{
"id": "19",
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "$132,000",
@@ -152,6 +171,7 @@
"extn": "2558"
},
{
"id": "20",
"name": "Dai Rios",
"position": "Personnel Lead",
"salary": "$217,500",
@@ -160,6 +180,7 @@
"extn": "2290"
},
{
"id": "21",
"name": "Jenette Caldwell",
"position": "Development Lead",
"salary": "$345,000",
@@ -168,6 +189,7 @@
"extn": "1937"
},
{
"id": "22",
"name": "Yuri Berry",
"position": "Chief Marketing Officer (CMO)",
"salary": "$675,000",
@@ -176,6 +198,7 @@
"extn": "6154"
},
{
"id": "23",
"name": "Caesar Vance",
"position": "Pre-Sales Support",
"salary": "$106,450",
@@ -184,14 +207,16 @@
"extn": "8330"
},
{
"id": "24",
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010\/09\/20",
"office": "Sidney",
"office": "Sydney",
"extn": "3023"
},
{
"id": "25",
"name": "Angelica Ramos",
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
@@ -200,6 +225,7 @@
"extn": "5797"
},
{
"id": "26",
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$92,575",
@@ -208,6 +234,7 @@
"extn": "8822"
},
{
"id": "27",
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$357,650",
@@ -216,6 +243,7 @@
"extn": "9239"
},
{
"id": "28",
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$206,850",
@@ -224,6 +252,7 @@
"extn": "1314"
},
{
"id": "29",
"name": "Fiona Green",
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
@@ -232,6 +261,7 @@
"extn": "2947"
},
{
"id": "30",
"name": "Shou Itou",
"position": "Regional Marketing",
"salary": "$163,000",
@@ -240,14 +270,16 @@
"extn": "8899"
},
{
"id": "31",
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011\/06\/02",
"office": "Sidney",
"office": "Sydney",
"extn": "2769"
},
{
"id": "32",
"name": "Suki Burks",
"position": "Developer",
"salary": "$114,500",
@@ -256,6 +288,7 @@
"extn": "6832"
},
{
"id": "33",
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$145,000",
@@ -264,6 +297,7 @@
"extn": "3606"
},
{
"id": "34",
"name": "Gavin Cortez",
"position": "Team Leader",
"salary": "$235,500",
@@ -272,6 +306,7 @@
"extn": "2860"
},
{
"id": "35",
"name": "Martena Mccray",
"position": "Post-Sales support",
"salary": "$324,050",
@@ -280,6 +315,7 @@
"extn": "8240"
},
{
"id": "36",
"name": "Unity Butler",
"position": "Marketing Designer",
"salary": "$85,675",
@@ -288,6 +324,7 @@
"extn": "5384"
},
{
"id": "37",
"name": "Howard Hatfield",
"position": "Office Manager",
"salary": "$164,500",
@@ -296,6 +333,7 @@
"extn": "7031"
},
{
"id": "38",
"name": "Hope Fuentes",
"position": "Secretary",
"salary": "$109,850",
@@ -304,6 +342,7 @@
"extn": "6318"
},
{
"id": "39",
"name": "Vivian Harrell",
"position": "Financial Controller",
"salary": "$452,500",
@@ -312,6 +351,7 @@
"extn": "9422"
},
{
"id": "40",
"name": "Timothy Mooney",
"position": "Office Manager",
"salary": "$136,200",
@@ -320,6 +360,7 @@
"extn": "7580"
},
{
"id": "41",
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$645,750",
@@ -328,6 +369,7 @@
"extn": "1042"
},
{
"id": "42",
"name": "Olivia Liang",
"position": "Support Engineer",
"salary": "$234,500",
@@ -336,6 +378,7 @@
"extn": "2120"
},
{
"id": "43",
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "$163,500",
@@ -344,6 +387,7 @@
"extn": "6222"
},
{
"id": "44",
"name": "Sakura Yamamoto",
"position": "Support Engineer",
"salary": "$139,575",
@@ -352,6 +396,7 @@
"extn": "9383"
},
{
"id": "45",
"name": "Thor Walton",
"position": "Developer",
"salary": "$98,540",
@@ -360,6 +405,7 @@
"extn": "8327"
},
{
"id": "46",
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "$87,500",
@@ -368,6 +414,7 @@
"extn": "2927"
},
{
"id": "47",
"name": "Serge Baldwin",
"position": "Data Coordinator",
"salary": "$138,575",
@@ -376,6 +423,7 @@
"extn": "8352"
},
{
"id": "48",
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "$125,250",
@@ -384,6 +432,7 @@
"extn": "7439"
},
{
"id": "49",
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "$115,000",
@@ -392,6 +441,7 @@
"extn": "4389"
},
{
"id": "50",
"name": "Jennifer Acosta",
"position": "Junior Javascript Developer",
"salary": "$75,650",
@@ -400,6 +450,7 @@
"extn": "3431"
},
{
"id": "51",
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "$145,600",
@@ -408,6 +459,7 @@
"extn": "3990"
},
{
"id": "52",
"name": "Hermione Butler",
"position": "Regional Director",
"salary": "$356,250",
@@ -416,6 +468,7 @@
"extn": "1016"
},
{
"id": "53",
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "$103,500",
@@ -424,6 +477,7 @@
"extn": "6733"
},
{
"id": "54",
"name": "Jonas Alexander",
"position": "Developer",
"salary": "$86,500",
@@ -432,6 +486,7 @@
"extn": "8196"
},
{
"id": "55",
"name": "Shad Decker",
"position": "Regional Director",
"salary": "$183,000",
@@ -440,6 +495,7 @@
"extn": "6373"
},
{
"id": "56",
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
@@ -448,6 +504,7 @@
"extn": "5384"
},
{
"id": "57",
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",

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

@@ -0,0 +1,460 @@
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "320800",
"start_date": "2011\/04\/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "170750",
"start_date": "2011\/07\/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "86000",
"start_date": "2009\/01\/12",
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "433060",
"start_date": "2012\/03\/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Airi Satou",
"position": "Accountant",
"salary": "162700",
"start_date": "2008\/11\/28",
"office": "Tokyo",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "372000",
"start_date": "2012\/12\/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "137500",
"start_date": "2012\/08\/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "327900",
"start_date": "2010\/10\/14",
"office": "Tokyo",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "205500",
"start_date": "2009\/09\/15",
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "103600",
"start_date": "2008\/12\/13",
"office": "Edinburgh",
"extn": "1667"
},
{
"name": "Jena Gaines",
"position": "Office Manager",
"salary": "90560",
"start_date": "2008\/12\/19",
"office": "London",
"extn": "3814"
},
{
"name": "Quinn Flynn",
"position": "Support Lead",
"salary": "342000",
"start_date": "2013\/03\/03",
"office": "Edinburgh",
"extn": "9497"
},
{
"name": "Charde Marshall",
"position": "Regional Director",
"salary": "470600",
"start_date": "2008\/10\/16",
"office": "San Francisco",
"extn": "6741"
},
{
"name": "Haley Kennedy",
"position": "Senior Marketing Designer",
"salary": "313500",
"start_date": "2012\/12\/18",
"office": "London",
"extn": "3597"
},
{
"name": "Tatyana Fitzpatrick",
"position": "Regional Director",
"salary": "385750",
"start_date": "2010\/03\/17",
"office": "London",
"extn": "1965"
},
{
"name": "Michael Silva",
"position": "Marketing Designer",
"salary": "198500",
"start_date": "2012\/11\/27",
"office": "London",
"extn": "1581"
},
{
"name": "Paul Byrd",
"position": "Chief Financial Officer (CFO)",
"salary": "725000",
"start_date": "2010\/06\/09",
"office": "New York",
"extn": "3059"
},
{
"name": "Gloria Little",
"position": "Systems Administrator",
"salary": "237500",
"start_date": "2009\/04\/10",
"office": "New York",
"extn": "1721"
},
{
"name": "Bradley Greer",
"position": "Software Engineer",
"salary": "132000",
"start_date": "2012\/10\/13",
"office": "London",
"extn": "2558"
},
{
"name": "Dai Rios",
"position": "Personnel Lead",
"salary": "217500",
"start_date": "2012\/09\/26",
"office": "Edinburgh",
"extn": "2290"
},
{
"name": "Jenette Caldwell",
"position": "Development Lead",
"salary": "345000",
"start_date": "2011\/09\/03",
"office": "New York",
"extn": "1937"
},
{
"name": "Yuri Berry",
"position": "Chief Marketing Officer (CMO)",
"salary": "675000",
"start_date": "2009\/06\/25",
"office": "New York",
"extn": "6154"
},
{
"name": "Caesar Vance",
"position": "Pre-Sales Support",
"salary": "106450",
"start_date": "2011\/12\/12",
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "85600",
"start_date": "2010\/09\/20",
"office": "Sydney",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "Chief Executive Officer (CEO)",
"salary": "1200000",
"start_date": "2009\/10\/09",
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "92575",
"start_date": "2010\/12\/22",
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "357650",
"start_date": "2010\/11\/14",
"office": "Argentina",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "206850",
"start_date": "2011\/06\/07",
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Fiona Green",
"position": "Chief Operating Officer (COO)",
"salary": "850000",
"start_date": "2010\/03\/11",
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Shou Itou",
"position": "Regional Marketing",
"salary": "163000",
"start_date": "2011\/08\/14",
"office": "Tokyo",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "95400",
"start_date": "2011\/06\/02",
"office": "Sydney",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "114500",
"start_date": "2009\/10\/22",
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "145000",
"start_date": "2011\/05\/07",
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Team Leader",
"salary": "235500",
"start_date": "2008\/10\/26",
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Post-Sales support",
"salary": "324050",
"start_date": "2011\/03\/09",
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Marketing Designer",
"salary": "85675",
"start_date": "2009\/12\/09",
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Office Manager",
"salary": "164500",
"start_date": "2008\/12\/16",
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Secretary",
"salary": "109850",
"start_date": "2010\/02\/12",
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "Financial Controller",
"salary": "452500",
"start_date": "2009\/02\/14",
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Office Manager",
"salary": "136200",
"start_date": "2008\/12\/11",
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "645750",
"start_date": "2008\/09\/26",
"office": "New York",
"extn": "1042"
},
{
"name": "Olivia Liang",
"position": "Support Engineer",
"salary": "234500",
"start_date": "2011\/02\/03",
"office": "Argentina",
"extn": "2120"
},
{
"name": "Bruno Nash",
"position": "Software Engineer",
"salary": "163500",
"start_date": "2011\/05\/03",
"office": "London",
"extn": "6222"
},
{
"name": "Sakura Yamamoto",
"position": "Support Engineer",
"salary": "139575",
"start_date": "2009\/08\/19",
"office": "Tokyo",
"extn": "9383"
},
{
"name": "Thor Walton",
"position": "Developer",
"salary": "98540",
"start_date": "2013\/08\/11",
"office": "New York",
"extn": "8327"
},
{
"name": "Finn Camacho",
"position": "Support Engineer",
"salary": "87500",
"start_date": "2009\/07\/07",
"office": "San Francisco",
"extn": "2927"
},
{
"name": "Serge Baldwin",
"position": "Data Coordinator",
"salary": "138575",
"start_date": "2012\/04\/09",
"office": "Argentina",
"extn": "8352"
},
{
"name": "Zenaida Frank",
"position": "Software Engineer",
"salary": "125250",
"start_date": "2010\/01\/04",
"office": "New York",
"extn": "7439"
},
{
"name": "Zorita Serrano",
"position": "Software Engineer",
"salary": "115000",
"start_date": "2012\/06\/01",
"office": "San Francisco",
"extn": "4389"
},
{
"name": "Jennifer Acosta",
"position": "Junior Javascript Developer",
"salary": "75650",
"start_date": "2013\/02\/01",
"office": "Edinburgh",
"extn": "3431"
},
{
"name": "Cara Stevens",
"position": "Sales Assistant",
"salary": "145600",
"start_date": "2011\/12\/06",
"office": "New York",
"extn": "3990"
},
{
"name": "Hermione Butler",
"position": "Regional Director",
"salary": "356250",
"start_date": "2011\/03\/21",
"office": "London",
"extn": "1016"
},
{
"name": "Lael Greer",
"position": "Systems Administrator",
"salary": "103500",
"start_date": "2009\/02\/27",
"office": "London",
"extn": "6733"
},
{
"name": "Jonas Alexander",
"position": "Developer",
"salary": "86500",
"start_date": "2010\/07\/14",
"office": "San Francisco",
"extn": "8196"
},
{
"name": "Shad Decker",
"position": "Regional Director",
"salary": "183000",
"start_date": "2008\/11\/13",
"office": "Edinburgh",
"extn": "6373"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "183000",
"start_date": "2011\/06\/27",
"office": "Argentina",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "112000",
"start_date": "2011\/01\/25",
"office": "New York",
"extn": "4226"
}
]
}

4
examples/ajax/data/objects_subarrays.txt
View File

@@ -309,7 +309,7 @@
"$85,600",
"2010\/09\/20"
],
"office": "Sidney",
"office": "Sydney",
"extn": "3023"
},
{
@@ -400,7 +400,7 @@
"$95,400",
"2011\/06\/02"
],
"office": "Sidney",
"office": "Sydney",
"extn": "2769"
},
{

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

@@ -6,7 +6,7 @@
"salary": "$320,800",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303686000"
"timestamp": "1303689600"
},
"office": "Edinburgh",
"extn": "5421"
@@ -17,7 +17,7 @@
"salary": "$170,750",
"start_date": {
"display": "Mon 25th Jul 11",
"timestamp": "1311548400"
"timestamp": "1311552000"
},
"office": "Tokyo",
"extn": "8422"
@@ -39,7 +39,7 @@
"salary": "$433,060",
"start_date": {
"display": "Thu 29th Mar 12",
"timestamp": "1332975600"
"timestamp": "1332979200"
},
"office": "Edinburgh",
"extn": "6224"
@@ -72,7 +72,7 @@
"salary": "$137,500",
"start_date": {
"display": "Mon 6th Aug 12",
"timestamp": "1344207600"
"timestamp": "1344211200"
},
"office": "San Francisco",
"extn": "9608"
@@ -83,7 +83,7 @@
"salary": "$327,900",
"start_date": {
"display": "Thu 14th Oct 10",
"timestamp": "1287010800"
"timestamp": "1287014400"
},
"office": "Tokyo",
"extn": "6200"
@@ -94,7 +94,7 @@
"salary": "$205,500",
"start_date": {
"display": "Tue 15th Sep 09",
"timestamp": "1252969200"
"timestamp": "1252972800"
},
"office": "San Francisco",
"extn": "2360"
@@ -138,7 +138,7 @@
"salary": "$470,600",
"start_date": {
"display": "Thu 16th Oct 08",
"timestamp": "1224111600"
"timestamp": "1224115200"
},
"office": "San Francisco",
"extn": "6741"
@@ -182,7 +182,7 @@
"salary": "$725,000",
"start_date": {
"display": "Wed 9th Jun 10",
"timestamp": "1276038000"
"timestamp": "1276041600"
},
"office": "New York",
"extn": "3059"
@@ -193,7 +193,7 @@
"salary": "$237,500",
"start_date": {
"display": "Fri 10th Apr 09",
"timestamp": "1239318000"
"timestamp": "1239321600"
},
"office": "New York",
"extn": "1721"
@@ -204,7 +204,7 @@
"salary": "$132,000",
"start_date": {
"display": "Sat 13th Oct 12",
"timestamp": "1350082800"
"timestamp": "1350086400"
},
"office": "London",
"extn": "2558"
@@ -215,7 +215,7 @@
"salary": "$217,500",
"start_date": {
"display": "Wed 26th Sep 12",
"timestamp": "1348614000"
"timestamp": "1348617600"
},
"office": "Edinburgh",
"extn": "2290"
@@ -226,7 +226,7 @@
"salary": "$345,000",
"start_date": {
"display": "Sat 3rd Sep 11",
"timestamp": "1315004400"
"timestamp": "1315008000"
},
"office": "New York",
"extn": "1937"
@@ -237,7 +237,7 @@
"salary": "$675,000",
"start_date": {
"display": "Thu 25th Jun 09",
"timestamp": "1245884400"
"timestamp": "1245888000"
},
"office": "New York",
"extn": "6154"
@@ -259,9 +259,9 @@
"salary": "$85,600",
"start_date": {
"display": "Mon 20th Sep 10",
"timestamp": "1284937200"
"timestamp": "1284940800"
},
"office": "Sidney",
"office": "Sydney",
"extn": "3023"
},
{
@@ -270,7 +270,7 @@
"salary": "$1,200,000",
"start_date": {
"display": "Fri 9th Oct 09",
"timestamp": "1255042800"
"timestamp": "1255046400"
},
"office": "London",
"extn": "5797"
@@ -303,7 +303,7 @@
"salary": "$206,850",
"start_date": {
"display": "Tue 7th Jun 11",
"timestamp": "1307401200"
"timestamp": "1307404800"
},
"office": "San Francisco",
"extn": "1314"
@@ -325,7 +325,7 @@
"salary": "$163,000",
"start_date": {
"display": "Sun 14th Aug 11",
"timestamp": "1313276400"
"timestamp": "1313280000"
},
"office": "Tokyo",
"extn": "8899"
@@ -336,9 +336,9 @@
"salary": "$95,400",
"start_date": {
"display": "Thu 2nd Jun 11",
"timestamp": "1306969200"
"timestamp": "1306972800"
},
"office": "Sidney",
"office": "Sydney",
"extn": "2769"
},
{
@@ -347,7 +347,7 @@
"salary": "$114,500",
"start_date": {
"display": "Thu 22nd Oct 09",
"timestamp": "1256166000"
"timestamp": "1256169600"
},
"office": "London",
"extn": "6832"
@@ -358,7 +358,7 @@
"salary": "$145,000",
"start_date": {
"display": "Sat 7th May 11",
"timestamp": "1304722800"
"timestamp": "1304726400"
},
"office": "London",
"extn": "3606"
@@ -369,7 +369,7 @@
"salary": "$235,500",
"start_date": {
"display": "Sun 26th Oct 08",
"timestamp": "1224975600"
"timestamp": "1224979200"
},
"office": "San Francisco",
"extn": "2860"
@@ -446,7 +446,7 @@
"salary": "$645,750",
"start_date": {
"display": "Fri 26th Sep 08",
"timestamp": "1222383600"
"timestamp": "1222387200"
},
"office": "New York",
"extn": "1042"
@@ -468,7 +468,7 @@
"salary": "$163,500",
"start_date": {
"display": "Tue 3rd May 11",
"timestamp": "1304377200"
"timestamp": "1304380800"
},
"office": "London",
"extn": "6222"
@@ -479,7 +479,7 @@
"salary": "$139,575",
"start_date": {
"display": "Wed 19th Aug 09",
"timestamp": "1250636400"
"timestamp": "1250640000"
},
"office": "Tokyo",
"extn": "9383"
@@ -490,7 +490,7 @@
"salary": "$98,540",
"start_date": {
"display": "Sun 11th Aug 13",
"timestamp": "1376175600"
"timestamp": "1376179200"
},
"office": "New York",
"extn": "8327"
@@ -501,7 +501,7 @@
"salary": "$87,500",
"start_date": {
"display": "Tue 7th Jul 09",
"timestamp": "1246921200"
"timestamp": "1246924800"
},
"office": "San Francisco",
"extn": "2927"
@@ -512,7 +512,7 @@
"salary": "$138,575",
"start_date": {
"display": "Mon 9th Apr 12",
"timestamp": "1333926000"
"timestamp": "1333929600"
},
"office": "Singapore",
"extn": "8352"
@@ -534,7 +534,7 @@
"salary": "$115,000",
"start_date": {
"display": "Fri 1st Jun 12",
"timestamp": "1338505200"
"timestamp": "1338508800"
},
"office": "San Francisco",
"extn": "4389"
@@ -589,7 +589,7 @@
"salary": "$86,500",
"start_date": {
"display": "Wed 14th Jul 10",
"timestamp": "1279062000"
"timestamp": "1279065600"
},
"office": "San Francisco",
"extn": "8196"
@@ -611,7 +611,7 @@
"salary": "$183,000",
"start_date": {
"display": "Mon 27th Jun 11",
"timestamp": "1309129200"
"timestamp": "1309132800"
},
"office": "Singapore",
"extn": "5384"

48
examples/ajax/deep.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -52,8 +48,7 @@ $(document).ready(function() {
<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">{
<pre><code class="multiline">{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
@@ -65,10 +60,10 @@ $(document).ready(function() {
"5421"
]
}
</code>
</pre>
</code></pre>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -116,7 +111,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -189,6 +184,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -237,10 +235,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -295,23 +293,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -468,7 +466,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

42
examples/ajax/defer_render.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -45,7 +41,8 @@ $(document).ready(function() {
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit
significantly from simply enabling this parameter.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -85,7 +82,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -158,6 +155,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -206,10 +206,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -264,23 +264,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -437,7 +437,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

13
examples/ajax/index.html
View File

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Ajax sourced data</title>
</head>
<body class="dt-example">
@@ -68,7 +65,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

44
examples/ajax/null_data_source.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -62,9 +58,10 @@ $(document).ready(function() {
bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</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>
contained in the data source object.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -113,7 +110,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -186,6 +183,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -234,10 +234,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -292,23 +292,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -465,7 +465,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

48
examples/ajax/objects.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -50,8 +46,7 @@ $(document).ready(function() {
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">{
<pre><code class="multiline">{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
@@ -59,11 +54,11 @@ $(document).ready(function() {
"office": "Edinburgh",
"extn": "5421"
}
</code>
</pre>
</code></pre>
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -110,7 +105,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -183,6 +178,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -231,10 +229,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -289,23 +287,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -462,7 +460,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

48
examples/ajax/objects_subarrays.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -60,8 +56,7 @@ $(document).ready(function() {
<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">{
<pre><code class="multiline">{
"name": [
"Nixon",
"Tiger"
@@ -74,10 +69,10 @@ $(document).ready(function() {
"office": "Edinburgh",
"extn": "5421"
}
</code>
</pre>
</code></pre>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -124,7 +119,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -197,6 +192,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -245,10 +243,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -303,23 +301,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -476,7 +474,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Orthogonal data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -53,8 +49,7 @@ $(document).ready(function() {
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">{
<pre><code class="multiline">{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
@@ -65,10 +60,10 @@ $(document).ready(function() {
"office": "Edinburgh",
"extn": "5421"
}
</code>
</pre>
</code></pre>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -118,7 +113,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -191,6 +186,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -239,10 +237,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -297,23 +295,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -470,7 +468,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

50
examples/ajax/simple.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -41,12 +37,11 @@ $(document).ready(function() {
advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array
using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href=
using the column index, making working with arrays very simple (note that this can be changed, or objects may use the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other
examples).</p>
<p>The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:</p>
<pre>
<code class="multiline">[
<pre><code class="multiline">[
"Tiger Nixon",
"System Architect",
"Edinburgh",
@@ -54,11 +49,11 @@ $(document).ready(function() {
"2011/04/25",
"$3,120"
]
</code>
</pre>
</code></pre>
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -97,7 +92,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -170,6 +165,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -218,10 +216,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -276,23 +274,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -449,7 +447,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

60
examples/api/add_row.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -50,19 +46,22 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Add rows</span></h1>
<div class="info">
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object).
Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
<p>New rows can be added to a DataTable using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data for the new row (be it an array or object). Multiple rows can
be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a> method (note the
plural). Data can likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
"DataTables API method">row().remove()</code></a> methods.</p>
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API employs.</p>
<p>This example shows a single row being added each time the button below is clicked upon.</p>
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
DataTable.</p>
</div><button id="addRow">Add new row</button>
<table id="example" class="display" cellspacing="0" width="100%">
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls to a DataTable, including creating, editing and deleting
rows.</p>
</div>
<div class="demo-html">
<button id="addRow">Add new row</button>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Column 1</th>
@@ -113,7 +112,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -186,6 +185,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -234,10 +236,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -292,23 +294,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -465,7 +467,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/api/api_in_init.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Using API in callbacks</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -53,7 +49,8 @@ $(document).ready(function() {
<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example
shows the use of the API inside the callbacks!</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -64,16 +61,6 @@ $(document).ready(function() {
<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>
@@ -262,7 +249,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -318,7 +305,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -532,6 +519,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -555,7 +552,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -628,6 +625,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -676,10 +676,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -734,23 +734,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -907,7 +907,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/api/counter_columns.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -47,7 +43,7 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Index column</span></h1>
<div class="info">
<p>Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. This column should not be sortable, and will
<p>Highly-interactive tables often require a 'counter' column that contains the position for each row in the table. This column should not be sortable, and will
change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs.
This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href=
@@ -57,7 +53,8 @@ $(document).ready(function() {
Note that the <code>filter</code> and <code>order</code> options are using in the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
@@ -68,16 +65,6 @@ $(document).ready(function() {
<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>
@@ -267,7 +254,7 @@ $(document).ready(function() {
<td></td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>$85,600</td>
</tr>
@@ -323,7 +310,7 @@ $(document).ready(function() {
<td></td>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>$95,400</td>
</tr>
@@ -536,6 +523,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -565,7 +562,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -638,6 +635,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -686,10 +686,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -744,23 +744,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -917,7 +917,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

76
examples/api/form.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Form inputs</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,19 +11,20 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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();
var table = $('#example').DataTable({
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$('button').click( function() {
var data = table.$('input, select').serialize();
@@ -52,8 +53,11 @@ $(document).ready(function() {
<code>alert()</code> is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.</p>
<p>If you are interested in a complete CRUD editing suit for DataTables have a look at the <a href="//editor.datatables.net">Editor extension</a> which provides
simple setup and complete integration with DataTables.</p>
</div><button type="submit">Submit form</button>
<table id="example" class="display" cellspacing="0" width="100%">
</div>
<div class="demo-html">
<button type="submit">Submit form</button>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -62,14 +66,6 @@ $(document).ready(function() {
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
@@ -1326,6 +1322,14 @@ $(document).ready(function() {
</select></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -1337,7 +1341,12 @@ $(document).ready(function() {
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable();
var table = $('#example').DataTable({
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$('button').click( function() {
var data = table.$('input, select').serialize();
@@ -1351,7 +1360,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -1424,6 +1433,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -1472,10 +1484,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -1530,23 +1542,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -1703,7 +1715,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

72
examples/api/highlight.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Highlighting rows and columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -17,14 +17,10 @@ td.highlight {
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -48,15 +44,16 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Highlighting rows and columns</span></h1>
<div class="info">
<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow
columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
<p>This example shows that in action on DataTable by making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
<p>Highlighting rows and columns can be useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns.
Highlighting a row is easy using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
<p>This example shows DataTables making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
"DataTables API method">cell().index()</code></a> method to get the index of the column that is to be operated on, and then the <a href=
"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()</code></a> and <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> methods to remove old classes and
apply the new highlighted class, respectively.</p>
</div>
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="row-border hover order-column" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -67,16 +64,6 @@ $(document).ready(function() {
<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>
@@ -265,7 +252,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -321,7 +308,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -535,6 +522,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -559,7 +556,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -634,6 +631,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -682,10 +682,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -740,23 +740,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -913,7 +913,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

13
examples/api/index.html
View File

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - API</title>
</head>
<body class="dt-example">
@@ -78,7 +75,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

130
examples/api/multi_filter.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Individual column searching (text inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -17,14 +17,10 @@
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -36,20 +32,23 @@ $(document).ready(function() {
} );
// DataTable
var table = $('#example').DataTable();
var table = $('#example').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
@@ -60,19 +59,22 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
<div class="info">
<p>The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is
global, and you may wish to present controls to search on specific columns only.</p>
<p>The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may
wish to present controls that search on specific columns.</p>
<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code> since <a href=
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code>, since <a href=
"//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p>
<p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options
to be presented to the user.</p>
<p>This examples shows text elements being used with the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()</code></a> method to add input controls in the footer of the table for each column. Note that the
<code>*index*:visible</code> option is used for the column selector to ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon. <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is used to allow for any
asynchronous actions, such as Ajax loading of data or language information.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -83,16 +85,6 @@ $(document).ready(function() {
<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>
@@ -281,7 +273,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -337,7 +329,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -551,6 +543,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -569,25 +571,28 @@ $(document).ready(function() {
} );
// DataTable
var table = $('#example').DataTable();
var table = $('#example').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -664,6 +669,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -712,10 +720,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -770,23 +778,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -943,7 +951,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

85
examples/api/multi_filter_select.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Individual column searching (select inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -57,26 +53,30 @@ $(document).ready(function() {
<div class="info">
<p>This example is almost identical to text based individual column example and provides the same functionality, but in this case using <code class="tag" title=
"HTML tag">select</code> input controls.</p>
<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of the <a href=
"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> method to get the data for each column
in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of <a href=
"//datatables.net/reference/api/columns().every()"><code class="api" title="DataTables API method">columns().every()</code></a> to loop over the columns (the
<a href="//datatables.net/reference/api/columns()"><code class="api" title="DataTables API method">columns()</code></a> selector can also be used to limit the
selected columns if required), then the <a href="//datatables.net/reference/api/column().data()"><code class="api" title=
"DataTables API method">column().data()</code></a> method is used to get the data for each column in turn. The helper methods <a href=
"//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
"//datatables.net/reference/api/sort()"><code class="api" title="DataTables API method">sort()</code></a> are also used to reduce the data for set input to unique
and ordered elements. Finally the <code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search
using the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method.</p>
<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information
on the search options in DataTables API please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built-in smart searching. For more information
on the search options in DataTables API, please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
"DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
"DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions
respectively.</p>
<p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete</code></a> a callback function that is triggered when the table has fully loaded. Use of this callback isn't
actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
<p>Also note this example demonstrates the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete</code></a>, a callback function triggered when the table has fully loaded. Use of this callback isn't required in
this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code
after the data has been loaded.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -87,16 +87,6 @@ $(document).ready(function() {
<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>
@@ -285,7 +275,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -341,7 +331,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -555,6 +545,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -592,7 +592,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -665,6 +665,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -713,10 +716,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -771,23 +774,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -944,7 +947,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

175
examples/api/regex.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Search API (regular expressions)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -69,61 +65,63 @@ $(document).ready(function() {
intuitive.</p>
<p>This example allows you to "play" with the various searching options that DataTables provides.</p>
</div>
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
<thead>
<tr>
<th>Target</th>
<th>Search text</th>
<th>Treat as regex</th>
<th>Use smart search</th>
</tr>
</thead>
<tbody>
<tr id="filter_global">
<td>Global search</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
</tr>
<tr id="filter_col1" data-column="0">
<td>Column - Name</td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
</tr>
<tr id="filter_col2" data-column="1">
<td>Column - Position</td>
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
</tr>
<tr id="filter_col3" data-column="2">
<td>Column - Office</td>
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
</tr>
<tr id="filter_col4" data-column="3">
<td>Column - Age</td>
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
</tr>
<tr id="filter_col5" data-column="4">
<td>Column - Start date</td>
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
</tr>
<tr id="filter_col6" data-column="5">
<td>Column - Salary</td>
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
</tr>
</tbody>
</table>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html">
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
<thead>
<tr>
<th>Target</th>
<th>Search text</th>
<th>Treat as regex</th>
<th>Use smart search</th>
</tr>
</thead>
<tbody>
<tr id="filter_global">
<td>Global search</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
</tr>
<tr id="filter_col1" data-column="0">
<td>Column - Name</td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
</tr>
<tr id="filter_col2" data-column="1">
<td>Column - Position</td>
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
</tr>
<tr id="filter_col3" data-column="2">
<td>Column - Office</td>
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
</tr>
<tr id="filter_col4" data-column="3">
<td>Column - Age</td>
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
</tr>
<tr id="filter_col5" data-column="4">
<td>Column - Start date</td>
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
</tr>
<tr id="filter_col6" data-column="5">
<td>Column - Salary</td>
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
</tr>
</tbody>
</table>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -134,16 +132,6 @@ $(document).ready(function() {
<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>
@@ -332,7 +320,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -388,7 +376,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -602,6 +590,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -642,7 +640,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -715,6 +713,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -763,10 +764,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -821,23 +822,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -994,7 +995,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

54
examples/api/row_details.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -19,14 +19,10 @@ tr.shown td.details-control {
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -93,16 +89,17 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
<div class="info">
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional
information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
<p>The DataTables API has a number of methods for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional information
about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
methods to first check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
"DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but
you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra
information to show.</p>
"DataTables API method">row().child.show()</code></a>). The content of the child row in this example is defined by the <code>format()</code> function, but you
would replace that with whatever content you wanted to show, possibly including, for example, <a href="https://www.datatables.net/blog/2017-03-31">an Ajax call to
the server</a> to obtain any extra information.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
@@ -188,7 +185,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -267,6 +264,9 @@ tr.shown td.details-control {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -315,10 +315,10 @@ tr.shown td.details-control {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -373,23 +373,23 @@ tr.shown td.details-control {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -546,7 +546,7 @@ tr.shown td.details-control {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

82
examples/api/select_row.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Row selection (multiple 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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -42,14 +38,17 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
<div class="info">
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add /
remove a class on the table rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
"DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
selected rows, but much more complex interactions can easily be developed.</p>
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
</div><button id="button">Row count</button>
<table id="example" class="display" cellspacing="0" width="100%">
<p>It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the table
rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title="DataTables API method">rows().data()</code></a> method can then be used
to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be
developed.</p>
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
an API that is fully integrated with DataTables for selecting rows and acting upon that secletion.</p>
</div>
<div class="demo-html">
<button id="button">Row count</button>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -60,16 +59,6 @@ $(document).ready(function() {
<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>
@@ -258,7 +247,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -314,7 +303,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -528,6 +517,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -552,7 +551,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -625,6 +624,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -673,10 +675,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -731,23 +733,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -904,7 +906,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

83
examples/api/select_single_row.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Row selection and deletion (single row)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -48,17 +44,19 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
<div class="info">
<p>This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the
row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to
the row to be selected.</p>
<p>This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has
a selected class, and if so removing it, but if not then the class is removed from all other rows in the table and then applied to the row being selected.</p>
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which
will delete a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
deletes a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method with
<code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
reset to the first page).</p>
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
</div><button id="button">Delete selected row</button>
<table id="example" class="display" cellspacing="0" width="100%">
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
an API that is fully integrated with DataTables for selecting rows and acting upon that selection.</p>
</div>
<div class="demo-html">
<button id="button">Delete selected row</button>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -69,16 +67,6 @@ $(document).ready(function() {
<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>
@@ -267,7 +255,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -323,7 +311,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -537,6 +525,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -567,7 +565,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -640,6 +638,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -688,10 +689,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -746,23 +747,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -919,7 +920,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

85
examples/api/show_hide.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Show / hide columns dynamically</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -49,19 +45,21 @@ $(document).ready(function() {
<div class="info">
<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
"DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it
enabled with this API method, although that is not required for the API function to work.</p>
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
enabled with this API method, although it's not required for the API function to work.</p>
<p>In addition, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api" title=
"DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
<p>If you are looking for a more complete column visibility interaction controls, check out the <a href="https://datatables.net/extras/buttons">Buttons extension
for DataTables</a> provides a comprehensive module for column visibility control.</p>
<p>If you are looking for a more complete column visibility interaction controls, the <a href="https://datatables.net/extras/buttons">Buttons extension for
DataTables</a> provides a comprehensive module for column visibility control.</p>
</div>
<div>
Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
"5">Salary</a>
<div class="demo-html">
<div>
Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
"5">Salary</a>
</div>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -72,16 +70,6 @@ $(document).ready(function() {
<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>
@@ -270,7 +258,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -326,7 +314,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -540,6 +528,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -569,7 +567,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -642,6 +640,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -690,10 +691,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -748,23 +749,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -921,7 +922,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

53
examples/api/tabs_and_scrolling.html
View File

@@ -3,27 +3,21 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Scrolling and Bootstrap tabs</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
@@ -62,6 +56,7 @@ $(document).ready(function() {
method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method
on them.</p>
</div>
<div class="demo-html"></div>
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
@@ -129,10 +124,10 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</a>
<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -153,7 +148,8 @@ $(document).ready(function() {
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css</a>
<a href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>
</li>
<li>
<a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a>
@@ -211,6 +207,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -259,10 +258,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -317,23 +316,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -490,7 +489,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

71
examples/basic_init/alt_pagination.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Alternative pagination</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -37,15 +33,16 @@ $(document).ready(function() {
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are
cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the <a href=
"//datatables.net/reference/option/pagingType"><code class="option" title="DataTables initialisation option">pagingType</code></a> option.</p>
<p>There are four built-in options for which pagination controls DataTables should show:</p>
<p>There are six built-in options for which pagination controls DataTables should show:</p>
<ul class="markdown">
<li><code class="string" title="String">numbers</code> - Page number buttons only</li>
<li><code class="string" title="String">simple</code> - 'Previous' and 'Next' buttons only</li>
<li><code class="string" title="String">simple_numbers</code> - 'Previous' and 'Next' buttons, plus page numbers</li>
<li><code class="string" title="String">full</code> - 'First', 'Previous', 'Next' and 'Last' buttons</li>
<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers</li>
<li><code class="string" title="String">first_last_numbers</code> - 'First' and 'Last' buttons, plus page numbers</li>
</ul>
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; <a href=
<p>The language strings of 'First', 'Previous' etc can be optionally changed through the internationalisation options of DataTables; <a href=
"//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
"DataTables initialisation option">language.paginate.previous</code></a> etc.</p>
@@ -53,7 +50,8 @@ $(document).ready(function() {
be altered through the use of plug-in pagination renderers.</p>
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -64,16 +62,6 @@ $(document).ready(function() {
<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>
@@ -262,7 +250,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -318,7 +306,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -532,6 +520,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -550,7 +548,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -623,6 +621,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li class="active">
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -671,10 +672,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -729,23 +730,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -902,7 +903,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Language - Comma decimal place</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -50,7 +46,8 @@ $(document).ready(function() {
required.</p>
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -61,16 +58,6 @@ $(document).ready(function() {
<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>
@@ -259,7 +246,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85.600,00</td>
@@ -315,7 +302,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95.400,00</td>
@@ -529,6 +516,16 @@ $(document).ready(function() {
<td>$112.000,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -550,7 +547,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -623,6 +620,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -671,10 +671,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -729,23 +729,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -902,7 +902,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/basic_init/complex_header.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Complex headers (rowspan and colspan)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -39,7 +35,8 @@ $(document).ready(function() {
"DataTables initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th rowspan="2">Name</th>
@@ -54,16 +51,6 @@ $(document).ready(function() {
<th>E-mail</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
@@ -253,7 +240,7 @@ $(document).ready(function() {
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>$85,600</td>
<td>Sidney</td>
<td>Sydney</td>
<td>3023</td>
<td>d.wilder@datatables.net</td>
</tr>
@@ -309,7 +296,7 @@ $(document).ready(function() {
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>$95,400</td>
<td>Sidney</td>
<td>Sydney</td>
<td>2769</td>
<td>m.house@datatables.net</td>
</tr>
@@ -522,6 +509,16 @@ $(document).ready(function() {
<td>d.snider@datatables.net</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -538,7 +535,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -611,6 +608,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -659,10 +659,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -717,23 +717,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -890,7 +890,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

582
examples/basic_init/data_rendering.html Normal file
View File

@@ -0,0 +1,582 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Data rendering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://github.com/downloads/lafeber/world-flags-sprite/flags32.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">
.f32 .flag {
vertical-align: middle;
margin: -8px 0;
}
progress {
width: 100%;
}
</style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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/objects_salary.txt',
columns: [
{
data: 'name'
},
{
data: 'position'
},
{
className: 'f32', // used by world-flags-sprite library
data: 'office',
render: function(data, type) {
if (type === 'display') {
var country = '';
switch (data) {
case 'Argentina':
country = 'ar';
break;
case 'Edinburgh':
country = '_Scotland';
break;
case 'London':
country = '_England';
break;
case 'New York':
case 'San Francisco':
country = 'us';
break;
case 'Sydney':
country = 'au';
break;
case 'Tokyo':
country = 'jp';
break;
}
return '<span class="flag ' + country + '"></span> ' + data;
}
return data;
}
},
{
data: 'extn',
render: function(data, type, row, meta) {
return type === 'display' ?
'<progress value="' + data + '" max="9999"></progress>' :
data;
}
},
{
data: "start_date"
},
{
data: "salary",
render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
}
]
});
});
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Data rendering</span></h1>
<div class="info">
<p>Data within DataTables can be easily rendered to add graphics or colour to your tables, as demonstrated in the example on this page. These examples make use of
<a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> to customise the
cells in three ways:</p>
<ul class="markdown">
<li>A flag is added to the <em>Office</em> column</li>
<li>a HTML5 progress bar is added to the <em>Progress</em> column</li>
<li>and the built-in number renderer is used for format the <em>Salary</em>.</li>
</ul>
<p>See the <a href="https://datatables.net/manual/data/renderers">data rendering manual page</a> for more details on how to use data renderers. Also, this example
uses <a href="https://datatables.net/manual/ajax">Ajax to load the data</a>. More <a href="../ajax">Ajax examples are available</a>.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Progress</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Progress</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable({
ajax: '../ajax/data/objects_salary.txt',
columns: [
{
data: 'name'
},
{
data: 'position'
},
{
className: 'f32', // used by world-flags-sprite library
data: 'office',
render: function(data, type) {
if (type === 'display') {
var country = '';
switch (data) {
case 'Argentina':
country = 'ar';
break;
case 'Edinburgh':
country = '_Scotland';
break;
case 'London':
country = '_England';
break;
case 'New York':
case 'San Francisco':
country = 'us';
break;
case 'Sydney':
country = 'au';
break;
case 'Tokyo':
country = 'jp';
break;
}
return '&lt;span class=&quot;flag ' + country + '&quot;&gt;&lt;/span&gt; ' + data;
}
return data;
}
},
{
data: 'extn',
render: function(data, type, row, meta) {
return type === 'display' ?
'&lt;progress value=&quot;' + data + '&quot; max=&quot;9999&quot;&gt;&lt;/progress&gt;' :
data;
}
},
{
data: &quot;start_date&quot;
},
{
data: &quot;salary&quot;,
render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
}
]
});
});</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">.f32 .flag {
vertical-align: middle;
margin: -8px 0;
}
progress {
width: 100%;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
<li>
<a href="https://github.com/downloads/lafeber/world-flags-sprite/flags32.css">https://github.com/downloads/lafeber/world-flags-sprite/flags32.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Basic initialisation</a></h3>
<ul class="toc active">
<li>
<a href="./zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="./filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="./table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="./multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="./multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="./hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="./dom.html">DOM positioning</a>
</li>
<li>
<a href="./flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="./state_save.html">State saving</a>
</li>
<li class="active">
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="./scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="./scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="./comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="./language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server-side</a></h3>
<ul class="toc">
<li>
<a href="../server_side/simple.html">Server-side processing</a>
</li>
<li>
<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="../server_side/post.html">POST data</a>
</li>
<li>
<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="../server_side/object_data.html">Object data source</a>
</li>
<li>
<a href="../server_side/row_details.html">Row details</a>
</li>
<li>
<a href="../server_side/select_rows.html">Row selection</a>
</li>
<li>
<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="../server_side/defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

90
examples/basic_init/dom.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - DOM positioning</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -56,29 +52,22 @@ $(document).ready(function() {
<li><code>&lt;"#id.class"</code> and <code>&gt;</code> - div with an id and class</li>
</ul>
<p>Example 1:</p>
<pre>
<code class="multiline">&lt;"wrapper"flipt&gt;
</code>
</pre>
<pre><code class="multiline">&lt;"wrapper"flipt&gt;
</code></pre>
<p>This results in the following DOM structure:</p>
<pre>
<code class="multiline">&lt;div class="wrapper"&gt;
<pre><code class="multiline">&lt;div class="wrapper"&gt;
{ filter }
{ length }
{ info }
{ paging }
{ table }
&lt;/div&gt;
</code>
</pre>
</code></pre>
<p>Example 2:</p>
<pre>
<code class="multiline">&lt;lf&lt;t&gt;ip&gt;
</code>
</pre>
<pre><code class="multiline">&lt;lf&lt;t&gt;ip&gt;
</code></pre>
<p>This results in the following DOM structure:</p>
<pre>
<code class="multiline">&lt;div&gt;
<pre><code class="multiline">&lt;div&gt;
{ length }
{ filter }
&lt;div&gt;
@@ -87,8 +76,7 @@ $(document).ready(function() {
{ info }
{ paging }
&lt;/div&gt;
</code>
</pre>
</code></pre>
<p>All options (with the exception of the <code>t</code> (table) option can be specified multiple times, for if you want to show the same control multiple times
(pagination at the top and bottom of the table for example).</p>
<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>
@@ -96,7 +84,8 @@ $(document).ready(function() {
<p>In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container
<code>div</code>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -107,16 +96,6 @@ $(document).ready(function() {
<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>
@@ -305,7 +284,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -361,7 +340,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -575,6 +554,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -593,7 +582,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -666,6 +655,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -714,10 +706,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -772,23 +764,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -945,7 +937,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

70
examples/basic_init/filter_only.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Feature enable / disable</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -36,11 +32,12 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Feature enable / disable</span></h1>
<div class="info">
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. A full list of the
options that can be used is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. The full list of
available options is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
<p>In the following example only the search feature is left enabled (which it is by default).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -51,16 +48,6 @@ $(document).ready(function() {
<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>
@@ -249,7 +236,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -305,7 +292,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -519,6 +506,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -539,7 +536,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -612,6 +609,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -660,10 +660,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -718,23 +718,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -891,7 +891,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/basic_init/flexible_width.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Flexible table width</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -15,14 +15,10 @@
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -40,10 +36,11 @@ $(document).ready(function() {
presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the <code>width</code>
attribute to the HTML table tag or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS
styles).</p>
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
<p>This example shows a table with <code>width="80%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
dynamically.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -54,16 +51,6 @@ $(document).ready(function() {
<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>
@@ -252,7 +239,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -308,7 +295,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -522,6 +509,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -538,7 +535,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -613,6 +610,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -661,10 +661,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -719,23 +719,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -892,7 +892,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/basic_init/hidden_columns.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Hidden columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -54,7 +50,8 @@ $(document).ready(function() {
information for a row entry might used).</p>
<p>In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -65,16 +62,6 @@ $(document).ready(function() {
<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>
@@ -263,7 +250,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -319,7 +306,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -533,6 +520,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -561,7 +558,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -634,6 +631,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -682,10 +682,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -740,23 +740,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -913,7 +913,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

18
examples/basic_init/index.html
View File

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Basic initialisation</title>
</head>
<body class="dt-example">
@@ -19,7 +16,7 @@
<section>
<h1>DataTables example <span>Basic initialisation</span></h1>
<div class="info">
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of
<p>DataTables is a simple-to-use jQuery plug-in with a huge range of customisable options. 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>
@@ -62,6 +59,9 @@
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -90,7 +90,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/basic_init/language.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Language options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -42,9 +38,10 @@ $(document).ready(function() {
<div class="info">
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option"
title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
<p>The example above shows a different set of English string being used, rather than the defaults.</p>
<p>This example shows a different set of English string being used, rather than the defaults.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -55,16 +52,6 @@ $(document).ready(function() {
<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>
@@ -253,7 +240,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -309,7 +296,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -523,6 +510,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -547,7 +544,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -620,6 +617,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -668,10 +668,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -726,23 +726,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -899,7 +899,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

46
examples/basic_init/multi_col_sort.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Multi-column ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -61,7 +57,8 @@ $(document).ready(function() {
<p>The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied
directly to the first and the salary column to the first name column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -237,7 +234,7 @@ $(document).ready(function() {
<td>Doris</td>
<td>Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>$85,600</td>
</tr>
<tr>
@@ -286,7 +283,7 @@ $(document).ready(function() {
<td>Michelle</td>
<td>House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>$95,400</td>
</tr>
<tr>
@@ -499,7 +496,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -572,6 +569,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -620,10 +620,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -678,23 +678,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -851,7 +851,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

82
examples/basic_init/multiple_tables.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -15,14 +15,10 @@
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -44,7 +40,8 @@ $(document).ready(function() {
<p>The example below shows two tables initialised with a single line of code, through the use of the <code>table.display</code> selector (i.e. select all elements
which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
</div>
<table id="" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -54,15 +51,6 @@ $(document).ready(function() {
<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>
@@ -128,17 +116,6 @@ $(document).ready(function() {
<td>$183,000</td>
</tr>
</tbody>
</table>
<table id="" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
@@ -148,6 +125,17 @@ $(document).ready(function() {
<th>Salary</th>
</tr>
</tfoot>
</table>
<table id="" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jena Gaines</td>
@@ -234,6 +222,15 @@ $(document).ready(function() {
<td>$103,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -250,7 +247,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -325,6 +322,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -373,10 +373,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -431,23 +431,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -604,7 +604,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

46
examples/basic_init/scroll_x.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Scroll - horizontal</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -16,14 +16,10 @@
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -46,7 +42,8 @@ $(document).ready(function() {
<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of <code>th, td { white-space: nowrap; }</code> is
also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).</p>
</div>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -318,7 +315,7 @@ $(document).ready(function() {
<td>Doris</td>
<td>Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -395,7 +392,7 @@ $(document).ready(function() {
<td>Michelle</td>
<td>House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -707,7 +704,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -783,6 +780,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -831,10 +831,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -889,23 +889,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -1062,7 +1062,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

46
examples/basic_init/scroll_xy.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Scroll - horizontal and vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -16,14 +16,10 @@
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -43,7 +39,8 @@ $(document).ready(function() {
<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and
the scrolling accounts for this.</p>
</div>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -315,7 +312,7 @@ $(document).ready(function() {
<td>Doris</td>
<td>Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -392,7 +389,7 @@ $(document).ready(function() {
<td>Michelle</td>
<td>House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -705,7 +702,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -781,6 +778,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -829,10 +829,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -887,23 +887,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -1060,7 +1060,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/basic_init/scroll_y.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Scroll - vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -47,7 +43,8 @@ $(document).ready(function() {
the table if that height is smaller than that given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
"DataTables initialisation option">scrollY</code></a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -58,16 +55,6 @@ $(document).ready(function() {
<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>
@@ -256,7 +243,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -312,7 +299,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -526,6 +513,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -546,7 +543,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -619,6 +616,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -667,10 +667,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -725,23 +725,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -898,7 +898,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/basic_init/scroll_y_dynamic.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Scroll - vertical, dynamic height</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -43,7 +39,8 @@ $(document).ready(function() {
<p>A relatively modern browser is <a href="http://caniuse.com/#feat=viewport-units">required for <code>vh</code> units</a> to operate correctly. IE9+ supports the
<code>vh</code> unit and all other evergreen browsers.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -54,16 +51,6 @@ $(document).ready(function() {
<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>
@@ -252,7 +239,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -308,7 +295,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -522,6 +509,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -542,7 +539,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -615,6 +612,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -663,10 +663,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -721,23 +721,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -894,7 +894,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/basic_init/state_save.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - State saving</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -48,7 +44,8 @@ $(document).ready(function() {
<p>The example below simply shows state saving enabled in DataTables with the <a href="//datatables.net/reference/option/stateSave"><code class="option" title=
"DataTables initialisation option">stateSave</code></a> option.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -59,16 +56,6 @@ $(document).ready(function() {
<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>
@@ -257,7 +244,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -313,7 +300,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -527,6 +514,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -545,7 +542,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -618,6 +615,9 @@ $(document).ready(function() {
<li class="active">
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -666,10 +666,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -724,23 +724,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -897,7 +897,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/basic_init/table_sorting.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Default ordering (sorting)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -43,7 +39,8 @@ $(document).ready(function() {
title="DataTables initialisation option">order</code></a> is a 2D array to allow multi-column ordering to be defined.</p>
<p>The table below is ordered (descending) by the Age column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -54,16 +51,6 @@ $(document).ready(function() {
<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>
@@ -252,7 +239,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -308,7 +295,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -522,6 +509,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -540,7 +537,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -613,6 +610,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -661,10 +661,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -719,23 +719,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -892,7 +892,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

66
examples/basic_init/zero_configuration.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -38,7 +34,8 @@ $(document).ready(function() {
<code>$().DataTable();</code>.</p>
<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -49,16 +46,6 @@ $(document).ready(function() {
<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>
@@ -247,7 +234,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -303,7 +290,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -517,6 +504,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -533,7 +530,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -606,6 +603,9 @@ $(document).ready(function() {
<li>
<a href="./state_save.html">State saving</a>
</li>
<li>
<a href="./data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./alt_pagination.html">Alternative pagination</a>
</li>
@@ -654,10 +654,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -712,23 +712,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -885,7 +885,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

42
examples/data_sources/ajax.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -45,7 +41,8 @@ $(document).ready(function() {
<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -84,7 +81,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -157,6 +154,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -205,10 +205,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -263,23 +263,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -436,7 +436,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

68
examples/data_sources/dom.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - HTML (DOM) 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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -37,9 +33,10 @@ $(document).ready(function() {
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it
is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p>
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and
<a href="../advanced_init">advanced</a> examples.</p>
<a href="../advanced_init">advanced initialisation</a> examples.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -50,16 +47,6 @@ $(document).ready(function() {
<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>
@@ -248,7 +235,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -304,7 +291,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -518,6 +505,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -534,7 +531,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -607,6 +604,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -655,10 +655,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -713,23 +713,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -886,7 +886,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

17
examples/data_sources/index.html
View File

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Data sources</title>
</head>
<body class="dt-example">
@@ -26,8 +23,8 @@
<li>Ajax sourced data with client-side processing</li>
<li>Ajax sourced data with server-side processing</li>
</ul>
<p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
data source types.</p>
<p>Which of these options is used to populate the table data depends upon how the table is initialised. The examples in this section show these four different data
source types.</p>
</div>
</section>
</div>
@@ -58,7 +55,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

48
examples/data_sources/js_array.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -46,14 +42,14 @@ var dataSet = [
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
[ "Doris Wilder", "Sales Assistant", "Sydney", "3023", "2010/09/20", "$85,600" ],
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
[ "Michelle House", "Integration Specialist", "Sydney", "2769", "2011/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
@@ -92,6 +88,7 @@ $(document).ready(function() {
based on the <a href="//datatables.net/reference/option/columns.title"><code class="option" title="DataTables initialisation option">columns.title</code></a>
configuration option.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" width="100%"></table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -126,14 +123,14 @@ $(document).ready(function() {
[ &quot;Jenette Caldwell&quot;, &quot;Development Lead&quot;, &quot;New York&quot;, &quot;1937&quot;, &quot;2011/09/03&quot;, &quot;$345,000&quot; ],
[ &quot;Yuri Berry&quot;, &quot;Chief Marketing Officer (CMO)&quot;, &quot;New York&quot;, &quot;6154&quot;, &quot;2009/06/25&quot;, &quot;$675,000&quot; ],
[ &quot;Caesar Vance&quot;, &quot;Pre-Sales Support&quot;, &quot;New York&quot;, &quot;8330&quot;, &quot;2011/12/12&quot;, &quot;$106,450&quot; ],
[ &quot;Doris Wilder&quot;, &quot;Sales Assistant&quot;, &quot;Sidney&quot;, &quot;3023&quot;, &quot;2010/09/20&quot;, &quot;$85,600&quot; ],
[ &quot;Doris Wilder&quot;, &quot;Sales Assistant&quot;, &quot;Sydney&quot;, &quot;3023&quot;, &quot;2010/09/20&quot;, &quot;$85,600&quot; ],
[ &quot;Angelica Ramos&quot;, &quot;Chief Executive Officer (CEO)&quot;, &quot;London&quot;, &quot;5797&quot;, &quot;2009/10/09&quot;, &quot;$1,200,000&quot; ],
[ &quot;Gavin Joyce&quot;, &quot;Developer&quot;, &quot;Edinburgh&quot;, &quot;8822&quot;, &quot;2010/12/22&quot;, &quot;$92,575&quot; ],
[ &quot;Jennifer Chang&quot;, &quot;Regional Director&quot;, &quot;Singapore&quot;, &quot;9239&quot;, &quot;2010/11/14&quot;, &quot;$357,650&quot; ],
[ &quot;Brenden Wagner&quot;, &quot;Software Engineer&quot;, &quot;San Francisco&quot;, &quot;1314&quot;, &quot;2011/06/07&quot;, &quot;$206,850&quot; ],
[ &quot;Fiona Green&quot;, &quot;Chief Operating Officer (COO)&quot;, &quot;San Francisco&quot;, &quot;2947&quot;, &quot;2010/03/11&quot;, &quot;$850,000&quot; ],
[ &quot;Shou Itou&quot;, &quot;Regional Marketing&quot;, &quot;Tokyo&quot;, &quot;8899&quot;, &quot;2011/08/14&quot;, &quot;$163,000&quot; ],
[ &quot;Michelle House&quot;, &quot;Integration Specialist&quot;, &quot;Sidney&quot;, &quot;2769&quot;, &quot;2011/06/02&quot;, &quot;$95,400&quot; ],
[ &quot;Michelle House&quot;, &quot;Integration Specialist&quot;, &quot;Sydney&quot;, &quot;2769&quot;, &quot;2011/06/02&quot;, &quot;$95,400&quot; ],
[ &quot;Suki Burks&quot;, &quot;Developer&quot;, &quot;London&quot;, &quot;6832&quot;, &quot;2009/10/22&quot;, &quot;$114,500&quot; ],
[ &quot;Prescott Bartlett&quot;, &quot;Technical Author&quot;, &quot;London&quot;, &quot;3606&quot;, &quot;2011/05/07&quot;, &quot;$145,000&quot; ],
[ &quot;Gavin Cortez&quot;, &quot;Team Leader&quot;, &quot;San Francisco&quot;, &quot;2860&quot;, &quot;2008/10/26&quot;, &quot;$235,500&quot; ],
@@ -157,7 +154,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -230,6 +227,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -278,10 +278,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -336,23 +336,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -509,7 +509,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

42
examples/data_sources/server_side.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -46,7 +42,8 @@ $(document).ready(function() {
<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of
using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -87,7 +84,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -160,6 +157,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -208,10 +208,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -266,23 +266,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -439,7 +439,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

34
examples/index.html
View File

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="./resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="./resources/demo.js"></script>
<title>DataTables examples - Examples index</title>
</head>
<body class="dt-example">
@@ -63,6 +60,9 @@
<li>
<a href="./basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="./basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="./basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -111,10 +111,10 @@
<a href="./advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="./advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="./advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="./advanced_init/language_file.html">Language file</a>
@@ -169,23 +169,23 @@
<li>
<a href="./styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="./styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="./styling/foundation.html">Foundation</a>
</li>
<li>
<a href="./styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="./styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="./styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="./styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="./styling/uikit.html">UIKit (Tech. preview)</a>
<a href="./styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -342,7 +342,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - API plug-in methods</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -57,14 +53,16 @@ $(document).ready(function() {
<div class="info">
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function.
This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p>
<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
<p>This example shows how a <code>sum()</code> method can easily be added to the API so you can get the sum of a column in a single line:
<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column,
and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href=
"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>
<p>For more information about API plug-ins; creating them and their requirements, please refer to the plug-in development documentation.</p>
</div>
<div id="demo"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html">
<div id="demo"></div>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -75,16 +73,6 @@ $(document).ready(function() {
<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>
@@ -273,7 +261,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -329,7 +317,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -543,6 +531,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -580,7 +578,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -653,6 +651,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -701,10 +702,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -759,23 +760,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -932,7 +933,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Live DOM ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -74,18 +70,19 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Live DOM ordering</span></h1>
<div class="info">
<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's
<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during its
initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not
reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is
much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
<p>The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different
<p>The example below shows the first column as normal text with ordering as you would expect. The following columns all have a form input element of different
kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.</p>
<p>This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit
yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling <a href=
<p>This is a fairly simple example, but you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit
yourself. You could also update the ordering live as a user enters data into a form by using an event handler calling <a href=
"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href=
"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -94,14 +91,6 @@ $(document).ready(function() {
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
@@ -1358,6 +1347,14 @@ $(document).ready(function() {
</select></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -1414,7 +1411,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -1487,6 +1484,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -1535,10 +1535,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -1593,23 +1593,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -1766,7 +1766,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Plug-ins</title>
</head>
<body class="dt-example">
@@ -56,7 +53,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Custom filtering - range search</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -57,22 +53,24 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Custom filtering - range search</span></h1>
<div class="info">
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two
numbers) and date range search. DataTables provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range searches (in between two
numbers) and date range searches. DataTables provides an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.</p>
<p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
</div>
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Minimum age:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>Maximum age:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</table>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Minimum age:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>Maximum age:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</table>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -83,16 +81,6 @@ $(document).ready(function() {
<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>
@@ -281,7 +269,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
@@ -337,7 +325,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
@@ -551,6 +539,16 @@ $(document).ready(function() {
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -590,7 +588,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -663,6 +661,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -711,10 +712,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -769,23 +770,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -942,7 +943,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Ordering plug-ins (with type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -52,15 +48,15 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
<div class="info">
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.</p>
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, when dealing with more complex formatted
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you can have DataTables sort data in any manner you wish.</p>
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type
detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in
development documentation.</p>
detection abilities. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in development documentation.</p>
<p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -71,16 +67,6 @@ $(document).ready(function() {
<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>
@@ -269,7 +255,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>Low</td>
@@ -325,7 +311,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>Low</td>
@@ -539,6 +525,16 @@ $(document).ready(function() {
<td>Low</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -573,7 +569,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -646,6 +642,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -694,10 +693,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -752,23 +751,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -925,7 +924,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Ordering plug-ins (no type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -48,17 +44,18 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
<div class="info">
<p>Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define
the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>Although DataTables will order a number of data types using the built in methods, when dealing with more complex formatted data, it can be desirable to define
the ordering order yourself. Using plug-in ordering functions, you can have DataTables order data in any manner you wish.</p>
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title=
"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of
"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be of any level of
complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in
development documentation.</p>
<p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
@@ -69,16 +66,6 @@ $(document).ready(function() {
<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>
@@ -267,7 +254,7 @@ $(document).ready(function() {
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>Low</td>
@@ -323,7 +310,7 @@ $(document).ready(function() {
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>Sydney</td>
<td>37</td>
<td>2011/06/02</td>
<td>Low</td>
@@ -537,6 +524,16 @@ $(document).ready(function() {
<td>Low</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -567,7 +564,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -640,6 +637,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -688,10 +688,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -746,23 +746,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -919,7 +919,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

2
examples/resources/demo.css
View File

@@ -1,5 +1,5 @@
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
@import url(https://fonts.googleapis.com/css?family=Raleway:100);
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;

20
examples/resources/demo.js
View File

@@ -28,9 +28,16 @@ if ( window.$ ) {
// init html
var table = $('<p/>').append( $('table').clone() ).html();
var demoHtml = $.trim( $('div.demo-html').html() );
if ( demoHtml ) {
demoHtml = demoHtml+'\n\n';
}
$('div.tabs div.table').append(
'<code class="multiline language-html">\t\t\t'+
escapeHtml( table )+
escapeHtml( demoHtml + table )+
'</code>'
);
//SyntaxHighlighter.highlight({}, $('#display-init-html')[0]);
@@ -57,6 +64,15 @@ if ( window.$ ) {
str = JSON.stringify( str, null, 2 );
} catch ( e ) {}
var strArr = str.split('\n');
if(strArr.length > 1000){
var first = strArr.splice(0, 500);
var second = strArr.splice(strArr.length - 499, 499);
first.push("\n\n... Truncated for brevity - look at your browser's network inspector to see the full source ...\n\n");
str = first.concat(second).join('\n');
}
$('div.tabs div.ajax').append(
$('<code class="multiline language-js"/>').text( str )
);
@@ -88,7 +104,7 @@ if ( window.$ ) {
}
if ( settings.oFeatures.bServerSide ) {
if ( $.isFunction( settings.ajax ) ) {
if ( typeof settings.ajax === 'function' ) {
return;
}
$.ajax( {

6
examples/resources/examples.php
View File

@@ -1,8 +1,12 @@
<?php
if ( isset( $_POST['src'] ) && preg_match( '/scripts\/[a-zA-Z_\-_]+\.php/', $_POST['src'] ) !== 0 ) {
if ( isset( $_POST['src'] ) && (
preg_match( '/^scripts\/[a-zA-Z_\-_]+\.php$/', $_POST['src'] ) !== 0 ||
preg_match( '/^\.\.\/server_side\/scripts\/[a-zA-Z_\-_]+\.php$/', $_POST['src'] ) !== 0
) ) {
echo htmlspecialchars( file_get_contents( '../server_side/'.$_POST['src'] ) );
}
else {
echo '';
}

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

@@ -87,13 +87,15 @@
}
.syntaxhighlighter table td.code {
width: 100% !important;
position: relative !important;
}
.syntaxhighlighter table td.code .container {
position: relative !important;
overflow: auto !important;
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
position: relative !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
@@ -103,6 +105,18 @@
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
line-height: 1.4em !important;
}
.syntaxhighlighter.source table td.code .container {
position: absolute !important;
overflow-x: auto !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
.syntaxhighlighter.source table td.code .container div.line {
display: none !important;
}
.syntaxhighlighter table td.gutter .line {
text-align: right !important;
@@ -390,6 +404,5 @@
.syntaxhighlighter table td.code {
width: auto !important;
overflow: auto !important;
}

42
examples/server_side/custom_vars.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Custom HTTP variables</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -54,7 +50,8 @@ $(document).ready(function() {
<p>The example below shows server-side processing being used with an extra parameter being sent to the server by using the <code>ajax.data</code> option as a
function.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -102,7 +99,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -175,6 +172,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -223,10 +223,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -281,23 +281,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -454,7 +454,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

64
examples/server_side/defer_loading.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Deferred loading of 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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -46,9 +42,10 @@ $(document).ready(function() {
to be displayed correctly).</p>
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
data is available and that it should wait for user interaction (ordering, paging etc) before making an Ajax call.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -59,16 +56,6 @@ $(document).ready(function() {
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tr class="odd">
<td>Airi</td>
<td>Satou</td>
@@ -149,6 +136,16 @@ $(document).ready(function() {
<td>29th Mar 12</td>
<td>$433,060</td>
</tr>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
@@ -170,7 +167,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -243,6 +240,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -291,10 +291,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -349,23 +349,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -522,7 +522,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

42
examples/server_side/ids.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Automatic addition of row ID 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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -52,7 +48,8 @@ $(document).ready(function() {
"https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -101,7 +98,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -174,6 +171,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -222,10 +222,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -280,23 +280,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -453,7 +453,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

21
examples/server_side/index.html
View File

@@ -3,15 +3,12 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<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="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Server-side processing</title>
</head>
<body class="dt-example">
@@ -20,13 +17,13 @@
<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 etc 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>
options that DataTables provides. With server-side processing enabled, all actions that DataTables performs (such as paging, searching and ordering) 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 to get the required data.</p>
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
<p>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
<p>The examples in this section show server-side processing in use and how it can be customised to suit your needs.</p>
</div>
</section>
</div>
@@ -75,7 +72,7 @@
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

44
examples/server_side/jsonp.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - JSONP data source for remote domains</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -39,7 +35,7 @@ $(document).ready(function() {
<section>
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
<div class="info">
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server
<p><a href="https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about">JSONP</a> is one of several methods to allow the use of JSON data from any server
(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
@@ -50,7 +46,8 @@ $(document).ready(function() {
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -94,7 +91,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -167,6 +164,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -215,10 +215,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -273,23 +273,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -446,7 +446,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

42
examples/server_side/object_data.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Object 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">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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() {
@@ -51,7 +47,8 @@ $(document).ready(function() {
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -100,7 +97,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -173,6 +170,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -221,10 +221,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -279,23 +279,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -452,7 +452,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

50
examples/server_side/pipeline.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>DataTables example - Pipelining data to reduce Ajax calls for paging</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@@ -11,14 +11,10 @@
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.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">
@@ -85,7 +81,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables.
if ( $.isFunction ( conf.data ) ) {
if ( typeof conf.data === 'function' ) {
// As a function it is executed with the data object as an arg
// for manipulation. If an object is returned, it is used as the
// data object to submit
@@ -99,7 +95,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
$.extend( request, conf.data );
}
settings.jqXHR = $.ajax( {
return $.ajax( {
"type": conf.method,
"url": conf.url,
"data": request,
@@ -171,7 +167,8 @@ $(document).ready(function() {
<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set,
when using server-side processing, is only available at the server.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<div class="demo-html"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
@@ -265,7 +262,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables.
if ( $.isFunction ( conf.data ) ) {
if ( typeof conf.data === 'function' ) {
// As a function it is executed with the data object as an arg
// for manipulation. If an object is returned, it is used as the
// data object to submit
@@ -279,7 +276,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
$.extend( request, conf.data );
}
settings.jqXHR = $.ajax( {
return $.ajax( {
&quot;type&quot;: conf.method,
&quot;url&quot;: conf.url,
&quot;data&quot;: request,
@@ -335,7 +332,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.1.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -408,6 +405,9 @@ $(document).ready(function() {
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/data_rendering.html">Data rendering</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
@@ -456,10 +456,10 @@ $(document).ready(function() {
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
@@ -514,23 +514,23 @@ $(document).ready(function() {
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
</li>
</ul>
</div>
@@ -687,7 +687,7 @@ $(document).ready(function() {
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2020<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>

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