Foundation from Zurb is a CSS framework that allows rapid development of complex sites, and provides a wealth of styling options and Javascript components. Using a CSS framework such as Foundation gives you the ability to create a user interface with a unified look and feel very quickly. And DataTables, Editor and all of the DataTables extensions can be integrated directly with Foundation to ensure that it fits into the flow of your site / app perfectly!


The simplest method of using a Foundation 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/ and css/ files should be included - this is in addition to the other software required such as jQuery, Foundation and DataTables itself:

<link rel="stylesheet" type="text/css" href="/DataTables-1.10.19/extensions/Editor-1.9.0/css/">

<script type="text/javascript" src="/DataTables-1.10.19/extensions/Editor-1.9.0/js/dataTables.editor.js"></script>
<script type="text/javascript" src="/DataTables-1.10.19/extensions/Editor-1.9.0/js/"></script>

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


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