Untitled

<script>
    $(document).ready(function() {

        //$.fn.dataTable.render.moment("M/D/YYYY");
        var editor = new $.fn.dataTable.Editor({
            table: "#example",
            fields: [
                {
                    label: 'Name:',
                    name: 'name'
                },
                {
                    label: 'Position:',
                    name: 'position'
                },
                {
                    label: 'Office:',
                    name: 'office',
                    type: 'select',
                    options: ['Tokyo', 'London']
                }
            ]
        });

        $("#example").DataTable({
            dom: "Bfrtip",
            processing: true,
            serverSide: true,
            columns: [
                { data: 'name' },
                { data: 'position' },
                { data: 'office' },
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ],
            ajax: {
                url: 'test_example.php',
                type: 'post'
            },
        });

        $('#example').on('click', 'tbody td:not(:first-child, :nth-child(2))', function(e) {
            editor.inline(this);
        });

        editor.field('office').input().on('change', function(e, data) {
            if (!data || !data.editor) {
                editor.submit();
            }
        });

    });


</script>


<body>

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