数据表&X-Editable使焦点外项目可编辑

DataTables & X-Editable making out of focus items editable

本文关键字：项目 编辑 焦点 amp X-Editable 数据表      更新时间：2023-09-26

我有一个数据表和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();
});

首先，将您的x可编辑设置移动到其自己的功能中：

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

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

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

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

var table = $('#tbldivdsthietlap').DataTable({
            "fnDrawCallback": function( oSettings ) {
                $('.edit').editable();
            }
        });
$('.edit').editable();
相关文章：