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 it does provide a common styling framework for its widgets through its ThemeRoller component.

DataTables, Editor and all other DataTables extensions provide integration options which can be used to have tables and forms 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.

As well as making use of the jQuery UI styles, the Editor jQuery UI integration also provides a display controller which uses the jQuery UI modal control to fully integrate the libraries together.

Installation

The simplest method of using a jQuery UI styled Editor is to use the DataTables downloader to create a package for you that includes all of the required files. The downloader can combine all of the required Javascript and CSS into individual files which means you simply need to include two lines of HTML in your page:

<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/> 
<script type="text/javascript" src="DataTables/datatables.min.js"></script>

Alternatively, the downloader also provides the option to include individual files which can be useful during development as it makes debugging easier.

Manual installation

If you prefer not to use the downloader and to include the required files from the Editor directory, the js/dataTables.editor.js, js/editor.jqueryui.js and css/editor.jqueryui.css files should be included - this is in addition to the other software required such as jQuery, jQuery UI and DataTables itself:

<link rel="stylesheet" type="text/css" href="/DataTables-2.1.7/extensions/Editor-2.3.2/css/editor.jqueryui.css">

<script type="text/javascript" src="/DataTables-2.1.7/extensions/Editor-2.3.2/js/dataTables.editor.js"></script>
<script type="text/javascript" src="/DataTables-2.1.7/extensions/Editor-2.3.2/js/editor.jqueryui.js"></script>

See also the DataTables styling manual for details on manually installing DataTables and its extensions with jQuery UI.

Example

An example of DataTables and Editor using this styling integration is available in the Editor examples and is included in the Editor download package.