Bootstrap

Bootstrap is a CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. DataTables, Editor and all of the other DataTables extensions provide integration options that makes it very easy to make use of Bootstrap's style files, with all the features of DataTables and Editor on top. Integrating DataTables and Editor into your Bootstrap based site is seamless!

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

Installation

The simplest method of using a Bootstrap 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:

HTML
1
2
<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.bootstrap.js and css/editor.bootstrap.css files should be included - this is in addition to the other software required such as jQuery, Bootstrap and DataTables itself:

HTML
1
2
3
4
<link rel="stylesheet" type="text/css" href="/DataTables-2.3.1/extensions/Editor-2.4.2/css/editor.bootstrap.css">
 
<script type="text/javascript" src="/DataTables-2.3.1/extensions/Editor-2.4.2/js/dataTables.editor.js"></script>
<script type="text/javascript" src="/DataTables-2.3.1/extensions/Editor-2.4.2/js/editor.bootstrap.js"></script>

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

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.

Comments (0)