Getting started

Editor provides a wealth of options and API methods, but first we need to include the Editor source files on your pages before it can be used. The documentation on this page guides you through the process of including the required files on your web-pages and then basic initialisation of Editor. Everything needed to start editing your tables!

It is assumed here that you have successfully downloaded and installed Editor!

Javascript and CSS includes

To use DataTables the following files need to be included:

  • jQuery (Javascript only)
  • DataTables (Javascript and CSS)
  • Buttons (Javascript and CSS) - optional
  • Select (Javascript and CSS) - optional
    • Buttons and Select are often used in combination with Editor to provide buttons for control of the editing form and row selection options. The examples here will use both
  • Editor (Javascript and CSS).

The easiest way to ensure that we include all of the required software is to use the DataTables downloader. This interface will provide a single URL to include all of the required software from the DataTables CDN, with the exception of Editor which must be included locally.

The HTML to include the required CSS and Javascript will look like this:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt-1.10.15/jqc-1.12.4,dt-1.10.15,b-1.3.1,se-1.2.2/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="Editor-1.6.3/css/editor.dataTables.css">
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt-1.10.15/jqc-1.12.4,dt-1.10.15,b-1.3.1,se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src="Editor-1.6.3/js/dataTables.editor.js"></script>

Editor initialisation

A new Editor (termed an instance) is created by using:

var editor = new $.fn.dataTable.Editor( {} );

In the code above, the Editor instance is assigned to the variable editor. This isn't required, although if you want to access the API methods you will need to assign it to some variable - the name can be anything you want!

Editor is configured through the options given in an object passed in as the first parameter to the object. Below is an example which configured a very simple form with the ajax, table and two fields with fields:

new $.fn.dataTable.Editor( {
    ajax:  '/api/staff',
    table: '#staff',
    fields: [
        { label: 'First name', name: 'first_name' },
        { label: 'Last name',  name: 'last_name'  },
        // etc
    ]
} );

For more information on using Editor's configuration options, please refer to the options manual page. Additionally, the full range of options available is available in the options reference.

DataTables initialisation

DataTables initialisation is often as simple as running the $().DataTable() function on your table, but when using Editor we often want a little bit more from our table! In the most common case we want to Ajax load the data for the table, use Buttons to display New, Edit and Delete buttons and Select to provide row selection.

Consider the following DataTables initialisation:

$('#myTable').DataTable( {
    ajax: '/api/staff',
    dom: 'Bfrtip',
    columns: [
        { data: 'first_name' },
        { data: 'last_name' },
        // etc
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
} );

Although this might look a little complex initially, it is actually fairly simple if we break it down line-by-line:

  • Line 1 - Create a DataTable using the #myTable element
  • Line 2 - Load the data from /api/staff using the ajax option
  • Line 3 - Add Buttons to the table using the dom option
  • Lines 4-8 - Define the data to use for each column in the table
  • Line 9: Activate the Select extension to allow row selection.
  • Lines 10-14 - Use the three button types that Editor adds to Buttons to show buttons for each CRUD action Editor can take (create, edit and remove). Note that the editor option is used to pass in the variable we created in the Editor initialisation section above. This simply ensures that each button will trigger that Editor instance (you can use multiple instances if you wish).

For further information about the options and API of DataTables, please refer to its manual.

At this point your web-page is now loading all of the required files, and both DataTables and Editor have been configured to run!

Server-side scripts

With the client-side now ready, the server-side needs to be configured to provide the data for the table, and to accept the CRUD commands from Editor to have the data updated.

Editor has two sets of pre-built libraries that can make developing the server-side processes for handling submitted data very easy. Libraries are provided for:

Please refer to the documentation for each of these platforms to get started with them. If you are not using the provided libraries, please refer to the client / server communication documentation for the communication protocol Editor uses to exchange data with the server to implement your own server-side scripts that will handle the data submitted by Editor.