jQuery Datatable jEditable 刷新页面

Question

我正在使用 jQuery 数据表和 Jeditable 插件来编辑我的表的第一列。 Jeditable 工作正常，它更新 db 表并在表上显示编辑后的值，但它仅在刷新页面后才会这样做。我希望在不刷新页面的情况下更新它。这是我的代码：

JavaScript

$(document).ready(function()
{
var objTable = $(".example").DataTable(
{
    "info": false,
    "scrollCollapse": true,
    "paging": false,
    "order": [[ 1, "asc" ]]
});

$( '.edit' ).each( function()
{

$( this ).editable( 'UpdateDBTableURL',
    {

    'width' : '90%',
    'height' : '80%',
    'tooltip' : 'Click to Edit',
     submit : 'Save',
     cancel : 'Cancel',
     cssclass : "editable",
    'submitdata' :
        {
        'sCompanyID': CompanyID,
        'sAction': 'EditLabel'
        },
     'onClick' : 'submit'

    } );

} );

});

HTML 代码

<table class="example" width="100%">
  <thead>
    <tr>
        <th>Label</th>
        <th>Name</th>
        <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="edit" id="101">&nbsp;</td>
      <td>Mary Kom</td>
      <td>2401 N Main St</td>   
    </tr>
    <tr>
     <td class="edit" id="102"></td>
     <td>David Kom</td>
     <td>2401 N Main St</td>    
    </tr>
 </tbody>
</table>

Answer 1

您可能需要对此进行微调，但我使用数据表 createRow 函数在构建行时添加 jedit。

    $(document).ready(function () {
        var objTable = $(".example").DataTable(
        {
            "info": false,
            "scrollCollapse": true,
            "paging": false,
            "order": [[1, "asc"]],
            "createdRow": function (row, data) {

                $(row).children(":nth-child(1)").editable('UpdateDBTableURL',
                {

                    'width': '90%',
                    'height': '80%',
                    'tooltip': 'Click to Edit',
                    submit: 'Save',
                    cancel: 'Cancel',
                    cssclass: "editable",
                    'submitdata':
                        {
                            'sCompanyID': CompanyID,
                            'sAction': 'EditLabel'
                        },
                    'onClick': 'submit'

                });
            }
        });
    });