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

$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
    ajax: "../WebService1.asmx/UpdateTable",
    table: "#example",
    fields: [{
        label: "First name:",
        name: "FirstName"
    }, {
        label: "Last name:",
        name: "LastName"
    }
    ]
});
});
// Activate an inline edit on click of a table cell
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});

$.ajax({
url: '../WebService1.asmx/GetTable',
method: 'post',
dataType: 'json',
success: function (data) {
    $('#example').dataTable({

        dom: "Bfrtip",
        paging: true,
        sort: true,
        searching: true,
        scrollY: 200,
        data: data,
        columns: [
            {
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "FirstName" },
            { data: "LastName" }
        ]
        ,
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit", editor: editor },
            { extend: "remove", editor: editor }
        ]
    });
}
});