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 DataTable.Editor( {
    // ...
} );

In the code above, the Editor instance is being initialised. Generally, this occurs before DataTables is initialised so that Editor's buttons can be added to the table, however, Editor can also be used as a standalone form editor in which case there will not be a table. See the examples sections for demonstrations of these.

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:

let editor = new 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 new DataTable() (or jQuery $().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:

let table = new DataTable('#myTable', {
    ajax: '/api/staff',
    columns: [
        { data: 'first_name' },
        { data: 'last_name' },
        // etc
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit',   editor: editor },
                { extend: 'remove', editor: editor }
            ]
        }   
    },
    select: true
} );

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
Lines 3-7: Define the data to use for each column in the table
Lines 8-15: Use the layout option to place buttons at the top of the table to control editing actions. This uses 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).
Line 16: Activate the Select extension to allow row selection.

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.