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();
    });

所以当我爬到专栏[2]的问题时，我看不到xeditable弹出。请帮助我，我在这里做错了什么

Answer 1

您应该等到表格加载，等待事件draw.dt，dt是数据表的快捷方式，然后处理可编辑的初始化：

$('#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

使用JSON DataTable初始化X-Editable

2 个答案: