From 8866a3f77c4731aef66d00a19d64658cf873a115 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Fri, 27 Dec 2013 22:44:00 +0000 Subject: [PATCH] Update jQuery UI styling references - The jQueryUI option is depricated in 1.10 and will be removed in 1.11 to be replaced by style integration files int he same way that Bootstrap and Foundation use. This helps to reduce the size of the core for a feature that is no longer used that often, while also ensureing that DataTables remains modular and supports many styling libraries. - As a result of this change, I want developers to be able to implement 1.10 without needing to use a depricated option, so this highlights the newly added jQuery styling integration files from the plug-ins repo. --- .datatables-commit-sync | 2 +- examples/api/tabs_and_scrolling.html | 4 +-- examples/basic_init/scroll_y_theme.html | 4 +-- examples/styling/jqueryUI.html | 39 +++++++++++++------------ 4 files changed, 26 insertions(+), 23 deletions(-) diff --git a/.datatables-commit-sync b/.datatables-commit-sync index 1edd9b6a..b1c1c187 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -36c1b4956c69e3f29913f7a64db290f276f0d7d8 +c4451afc15c77bfc622d3999e267e7057c0e73c0 diff --git a/examples/api/tabs_and_scrolling.html b/examples/api/tabs_and_scrolling.html index bd6a0082..0f048df5 100644 --- a/examples/api/tabs_and_scrolling.html +++ b/examples/api/tabs_and_scrolling.html @@ -6,7 +6,7 @@ DataTables example - Scrolling and jQuery UI tabs - + + @@ -33,17 +32,21 @@ $(document).ready(function() {

DataTables example - jQuery UI ThemeRoller

-

DataTables has built in support for (jQuery UI ThemeRoller)[http://jqueryui.com/themeroller/] which - makes it very easy to style your tables to match other jQuery UI components. To enable the jQuery UI - styling of DataTables, simply include the jQuery stylesheet, DataTables' additions for the jQuery - stylesheet (to add row styling etc) and set the jQueryUI initialisation for your table.

+

DataTables has the ability to integrate seamlessly with almost any styling library, and integration + files are provided for several of the popular styling libraries, including jQuery UI.

-

Please note that the jQueryUI option is deprecated in DataTables 1.10. In - DataTables 1.11 it will be replaced with a styling plug-in, matching how Bootstrap and Foundation - styles are integrated into DataTables.

+

To have your table styles integrate with jQuery UI's ThemeRoller styles, simply include the + DataTables CSS and JS integration files for jQuery UI, as shown in this example. Note also that because + jQuery doesn't provide table styles like some other CSS frameworks, the CSS integration file does add + this styling information.

+ +

Please note that DataTables 1.10- actually has built-in support for jQuery UI styling integration + through the jQueryUI option. However, this option is deprecated in DataTables + 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other + libraries - a more modular, maintainable and extensible method. The method presented on this page is + the method that will be use in future.

@@ -540,9 +543,7 @@ $(document).ready(function() {

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { - $('#example').dataTable( { - jQueryUI: true - } ); + $('#example').dataTable(); } );

In addition to the above code, the following Javascript library files are loaded for use in this @@ -551,6 +552,8 @@ $(document).ready(function() {

@@ -573,7 +576,7 @@ $(document).ready(function() {
  • //code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
  • ../../media/css/jquery.dataTables_themeroller.css
    • + "../resources/jqueryui/dataTables.jqueryui.css">../resources/jqueryui/dataTables.jqueryui.css