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!

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:

var editor = new $.fn.dataTable.Editor( {
    ajax:  '/api/staff',
    table: '#myTable',
    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 you want to add edit functions, like Buttons to display New, Edit and Delete buttons and Select to provide row selection., Editor provides these features on a simple declarative basis.

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 three 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.