javascript - Editor_dataTables - 多个表的内联编辑

Question

我正在使用数据表编辑器，但内联编辑不适用于所有表。
只有第二个表允许内联编辑。 我如何才能从同一页面上的所有表格中进行内联编辑？ 两个表都填充了数据。 是 变量编辑器；//在示例中使用全局提交和返回数据渲染

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
    ajax: "../php/staff2.php",
     "bProcessing": true,
    "bServerSide": true,
    table: "#example1",
    fields: [ {
            label: "subject:",
            name: "subject"
        }, {
            label: "ApplicationDate:",
            name: "ApplicationDate"
        }, {
            label: "PreferedPaymentDate:",
            name: "PreferedPaymentDate"
        }, {
            label: "Ledger:",
            name: "Ledger"
        }, {
            label: "BranchName:",
            name: "BranchName"
        }, {
            label: "AppNumber:",
            name: "AppNumber",
        }
    ]
} );

// Activate an inline edit on click of a table cell
    $('#example1').on( 'click', 'tbody tb', function () {
editor.inline( this );
    } );

$('#example1').DataTable( {
    dom: "Tfrtip",
    "searching": false,
    "bInfo" : false,
    "bPaginate": false,
    "bSort": false,
    "bVisible": false,
    ajax: "../php/staff2.php",
    columns: [
        { data: null, defaultContent: '', orderable: false },
        { data: "subject" },
        { data: "ApplicationDate" },
        { data: "PreferedPaymentDate" },
        { data: "Ledger" },
        { data: "BranchName" },
        { data: "AppNumber", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },

    ],
    order: [ 1, 'asc' ],
    tableTools: {
        sRowSelect: "os",
        sRowSelector: 'td:first-child',
        aButtons: [
            { sExtends: "editor_create", editor: editor },
            { sExtends: "editor_edit",   editor: editor },
            { sExtends: "editor_remove", editor: editor }
        ]
    }
} )
                     } );

      $(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
    ajax: "../php/staff2.php",
    table: "#example2",
    "bProcessing": true,
    "bServerSide": true,
    fields: [ {
            label: "subject:",
            name: "subject"
        }, {
            label: "ApplicationDate:",
            name: "ApplicationDate"
        }, {
            label: "PreferedPaymentDate:",
            name: "PreferedPaymentDate"
        }, {
            label: "Ledger:",
            name: "Ledger"
        }, {
            label: "BranchName:",
            name: "BranchName"
        }, {
            label: "AppNumber:",
            name: "AppNumber",
        }
    ]
          } );

// Activate an inline edit on click of a table cell
     $('#example2').on( 'click', 'tbody td', function () {
editor.inline( this );
     } );

$('#example2').DataTable( {
    dom: "Tfrtip",
    "searching": false,
    "bInfo" : false,
    "bPaginate": false,
    "bSort": false,
    "bVisible": false,
    ajax: "../php/staff2.php",
    columns: [
        { data: null, defaultContent: '', orderable: false },
        { data: "subject" },
        { data: "ApplicationDate" },
        { data: "PreferedPaymentDate" },
        { data: "Ledger" },
        { data: "BranchName" },
        { data: "AppNumber", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },

    ],
    order: [ 1, 'asc' ],
    tableTools: {
        sRowSelect: "os",
        sRowSelector: 'td:first-child',
        aButtons: [
            { sExtends: "editor_create", editor: editor },
            { sExtends: "editor_edit",   editor: editor },
            { sExtends: "editor_remove", editor: editor }
        ]
    }
} );
              } );

<div class="container">
    <section>
        <table id="example1" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th width="18%">Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
        </table>

<div class="container">
    <section>   
        <table id="example2" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>

                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th width="18%">Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
        </table>

Answer 1

这样试试

editor1 = new $.fn.dataTable.Editor( { ....for example1 table
editor2 = new $.fn.dataTable.Editor( { ....for example2 table