使用JSON数据表初始化X-Editable

Question

我需要使用datatable初始化xeditable，但是我无法使X-editable工作。 我正在使用来自另一个文件的JSON数据加载数据表。 这是我的JavaScript，

function listCompJson(handleData) {
        var invType = $('#inv-type-select option:selected').val();
        return $.ajax({
            type: "POST",
            dataType: 'json',
            url: "../_includes/inventory/process/process_inv_list.php",
            data: {invType: invType},
            success: function (json) {
                handleData(json);
            }
        });
    }

    //FEED JSON DATA TO DATATABLE
    function feedToTable() {
        listCompJson(function (response) {
            var initMinStock = 0;
            var table = $('#inventory-adjust-table').DataTable({
                processing: true,
                data: response,
                "columns":
                        [
                            {"data": "INV_DESC"},
                            {"data": "INV_UNIT"}
                        ],
                "columnDefs":
                        [
                            {
                                "visible": true,
                                "targets":[2],
                                "render": function (data, type,row, meta){
                                    var isi = '<a class="initStockClass" pk-data="'+row.INV_ID+'">'+row.STK_QTY+'</a>';
                                    return isi;
                                }
                            },
                            {
                                "visible": true,
                                "targets":[3],
                                "render": function (data, type,row, meta){
                                    var isi = '<a class="initMinStockClass" pk-data="'+row.INV_ID+'">'+row.MIN_STOCK+'</a>';
                                    return isi;
                                }
                            }
                        ]
            });
        });
    }

    function initEditable(){
        $('#inventory-adjust-table .initStockClass a').editable({
            type : 'text',
            title : 'enter stock'
        });
    }

    $(document).ready(function () {
        feedToTable();
        initEditable();
    });

所以当我喜欢column [2]时，我看不到xeditable弹出的问题。 请帮我在这里我做错了

Answer 1

您应该等待事件draw.dt等到表加载完毕，dt是datatable的快捷方式，然后进行可编辑的初始化：

$('#inventory-adjust-table').on( 'draw.dt', function () {
        $('#inventory-adjust-table .initStockClass a').editable({
                type : 'text',
                title : 'enter stock',
                success: function(response, newValue) {
                    console.log( response + " " + newValue);
                },
            }
        );
    } );

Answer 2

我有同样的问题，它对我有用。

var table= $('#inventory-adjust-table').DataTable();

table.on( 'draw', function () {
   $('#inventory-adjust-table .initStockClass a').editable({
                type : 'text',
                title : 'enter stock',
                success: function(response, newValue) {
                    console.log( response + " " + newValue);
                },
            }
        );
} );

数据表文档： https : //datatables.net/reference/event/draw