DataTables & X-Editable 使焦点项目可编辑答案

【问题标题】：DataTables & X-Editable making out of focus items editableDataTables & X-Editable 使焦点项目可编辑
【发布时间】：2013-08-09 19:01:22
【问题描述】：

我有一个用于数据表和 x-editable 的工作设置，允许用户在从数据库加载的表中内联编辑数据。一旦页面加载下面的代码，我的代码就会触发并使所有可编辑选项都可编辑，但它似乎只适用于结果的第一页。当您单击下一步、更改结果数量或进行搜索时，不在第一页上的任何项目都无法编辑。我假设这是因为数据表隐藏了不在当前页面上的数据，将其从文档流中删除。如何确保表格中的所有数据都是可编辑的？

$(document).ready(function () {
    $.fn.editable.defaults.mode = 'inline';
    $('.LocatorID').editable();
    $('.Title').editable();
    $('.Latitude').editable();
    $('.Longitude').editable();
    $('.Website').editable();
    $('.Address').editable();
    $('.City').editable();
    $('.State').editable();
    $('.Zip').editable();
    $('.Country').editable();
    $('.Phone').editable();
});

【问题讨论】：

标签： javascript jquery html datatables

【解决方案1】：

首先，将您的 x-editable 设置移动到它自己的函数中：

function setupXedit() {
    $.fn.editable.defaults.mode = 'inline';
    $('.LocatorID').editable();
    $('.Title').editable();
    ...
}

然后设置，以便在每次绘制时调用该函数：

$('#example').dataTable({
    "fnDrawCallback": function( oSettings ) {
     setupXedit();
     }
});

【讨论】：

哇。仍然没有解决这个问题。我把它作为一个错误留下来并进行了修复。谢谢。

【解决方案2】：

这样做：一个 $('.edit').editable(); 在 Datatable fnDrawCallback 内部，一个在 .Datatable 函数外部

var table = $('#tbldivdsthietlap').DataTable({

            "fnDrawCallback": function( oSettings ) {
                $('.edit').editable();
            }
        });

$('.edit').editable();

【讨论】：