how to use datatables editor

Basic initialisation

Editor is a Create, Read, Update and Delete (CRUD) extension forDataTables that provides the ability to easily add, edit and delete rows on a database that is displayed by a DataTable. Editor provides a clean and responsive interface for end user manipulation of data, an expressive API for complete control and a well defined server communications protocol for data submission.

This simple example shows a table with seven fields, each of which can be edited as plain text. In other examples we will explore how to add date pickers, select elements and other controls to make form input intuitive for the system user, among many other aspects of the Editor API.

• https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
• https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css
• https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css
• ../../extensions/Editor/css/editor.dataTables.min.css

<table id="example" class="display" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Extn.</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Extn.</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </tfoot>

    </table>

var editor; // use a global for the submit and return data rendering in the examples

 

$(document).ready(function() {

    editor = new $.fn.dataTable.Editor( {

        ajax: "../php/staff.php",

        table: "#example",

        fields: [ {

                label: "First name:",

                name: "first_name"

            }, {

                label: "Last name:",

                name: "last_name"

            }, {

                label: "Position:",

                name: "position"

            }, {

                label: "Office:",

                name: "office"

            }, {

                label: "Extension:",

                name: "extn"

            }, {

                label: "Start date:",

                name: "start_date",

                type: "datetime"

            }, {

                label: "Salary:",

                name: "salary"

            }

        ]

    } );

 

    $('#example').DataTable( {

        dom: "Bfrtip",

        ajax: "../php/staff.php",

        columns: [

            { data: null, render: function ( data, type, row ) {

                // Combine the first and last names into a single table field

                return data.first_name+' '+data.last_name;

            } },

            { data: "position" },

            { data: "office" },

            { data: "extn" },

            { data: "start_date" },

            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }

        ],

        select: true,

        buttons: [

            { extend: "create", editor: editor },

            { extend: "edit",   editor: editor },

            { extend: "remove", editor: editor }

        ]

    } );

} );