jQuery UI
jQuery UI is a popular suite of Javascript widgets such as DatePicker, AutoComplete and Dialog. Although jQuery UI isn't a CSS framework in the same sense as Bootstrap or Foundation it does provide a common styling framework for its widgets through its ThemeRoller component.
DataTables provides integration files which can be used to have tables styled in the same manner as other jQuery UI widgets, ensuring a consistent look-and-feel across components on your site / app, if you are already using jQuery UI. DataTables augments the ThemeRoller provided CSS with information for styling the DataTables enhanced tables since ThemeRoller does not provide this information, and as such, you can use the same styling classes as with the default DataTables CSS.
Installation
The simplest way to include the jQuery UI integration for DataTables and its extensions is to use the DataTables download builder. This is a point and click interface that lets you select what styling and what software you wish to use.
The download builder has the option of hosting the required files on the DataTables CDN, downloading a package that you can host locally, or using a package manager such as NPM.
Manual installation
If you wish to use the DataTables Git repo or download package, rather than the download builder, DataTables and all of its extensions share a similar file naming conventions that can be used to include the required files.
DataTables
The main DataTables file has the name dataTables.js. There is also a styling integration file for the various styling libraries supported by DataTables, this has the format dataTables.{style}.js (dataTables.jqueryui.js for jQuery UI for example).
Both of these Javascript files should be included - the main file to include the basic DataTables functionality and the styling file to set defaults as appropriate for the styling library.
For CSS only a single file should be included as the styling library will provide the core styling options for the table. The CSS files have the format dataTables.{style}.css (dataTables.jqueryui.css for jQuery UI for example).
Extensions
The file naming conventions described above are also applied to the extensions.
For Javascript we have: dataTables.{extension}.js and {extension}.{style}.js - for example for Buttons the files to include are dataTables.buttons.js and buttons.jqueryui.js - again the core library is included and the styling file to set appropriate defaults.
In the case of the CSS, only a single file should be included - the appropriate file for the styling being used - {extension}.{style}.css - buttons.jqueryui.css for example.
Please note that not all extensions require Javascript and / or CSS for the styling libraries. If the styling libraries are not present in the repo or package, then they are not required.
Details
Should you be interested in the dry details of the DataTables file name conventions, please refer to this technical note.
Example
An example of a DataTable styled by jQuery UI is shown below.
Legacy support
DataTables actually has jQuery UI support directly integrated into the core Javascript through the jQueryUI option. However, this option is deprecated in DataTables 1.10 and will be removed in 1.11 in favour of the method described on this page which is more modular and matches how the integration is provided for other CSS frameworks such as Bootstrap and Foundation. As such, it is recommended that you make use of the jQuery UI integration files provided here, rather than the jQueryUI option.