Блог

Использовал Jquery Datatable для извлечения данных с помощью ajax. А также с помощью плагина редактирования встроенной таблицы с этим datatable для инициализации встроенной функции редактирования. Проблема в том, что один раз нажмите кнопку сохранить, чтобы выполнить обновление во встроенном редактировании, перезагрузите datatable для получения динамических данных, при перезагрузке таблицы мы снова запускаем встроенную функцию редактирования, чтобы получить встроенную функциональность в таблице, в противном случае встроенная функция не работает в datatable. После этой инициализации встроенной таблицы нажмите кнопку сохранить, она срабатывает два раза. При каждой инициализации событие нажатия кнопки сохранения срабатывает каждый раз. Вот мой код,

Инициализируйте datatable после завершения ajax, инициализируйте встроенную таблицу.

 function purchase_payments_table(id) {
var i = 1;
pay_trans_table = $('#pay_trans_table').DataTable({
    searching: false,
    paging: false,
    info: false,
    ordering: false,
    processing: true,
    serverSide: true,
    "language": {
        "emptyTable": "No transaction for this bill"
    },
    // ajax: get_purchase_payments   '/'   id,
    "ajax": {
        "url": get_purchase_payments   '/'   id,
        dataSrc: function(data) {
            records_total = data.recordsTotal;
            return data.data;
        },
        complete: function() {
            init_tabeledit();
            i = 1;
            if (records_total != 0) {
                $('.tabledit-toolbar-column').css("display", "table-cell");
                $('.tabledit-toolbar').css("display", "block");
            } else {
                $('.tabledit-toolbar-column').css("display", "none");
                $('.tabledit-toolbar').css("display", "none");
            }
        },
        error: function(jqXHR, XMLHttpRequest, textStatus, errorThrown) {
            custom_err(jqXHR, XMLHttpRequest, textStatus, errorThrown);
        }
    },
    columns: [{
            data: 'id',
            name: 'id',
            className: 'hide_column'
        },
        {
            render: function(data, type, row, meta) {
                return meta.row   meta.settings._iDisplayStart   1;
            }
        },
        {
            data: 'created_at',
            name: 'created_at',
            render: function(data, type, row) {
                return moment(data).format('DD/MM/YYYY');
            }
        },
        {
            data: 'paid_amt',
            name: 'paid_amt'
        },
        {
            data: 'adj_amt',
            name: 'adj_amt'
        },
    ],
    responsive: true,
    initComplete: function() {
        $("#pay_trans_table").show();
        // init_tabeledit();
    }
});}
  

Функция для встроенной таблицы,

 function init_tabeledit() {
$('#pay_trans_table').Tabledit({
    url: update_purchase_payments,
    dataType: "json",
    columns: {
        identifier: [0, 'id'],
        editable: [
            [3, 'paid_amt'],
            [4, 'adj_amt']
        ]
    },
    restoreButton: false,
    onSuccess: function(data, textStatus, jqXHR) {
        console.log(data);
        if (data.action == 'edit') {
            $(".tabledit-delete-button").css("display", "block");

            $('.tabledit-edit-button').each(function() {
                $(this).children("span").remove();
                $(this).append('<span class="glyphicon glyphicon-pencil"></span>');
            });
            // pay_trans_table.ajax.reload();
            // bills_table.ajax.reload();
            success_notify();
        }
        if (data.action == 'delete') {
            $('#'   data.id).remove();
            // pay_trans_table.ajax.reload();
            // bills_table.ajax.reload();
            danger_notify();
        }
        pay_trans_table.ajax.reload();
        bills_table.ajax.reload();
        var bill_id = $('#bill_id').val();
        fetchpaymnt_on_focout(bill_id);
    },
    error: function(jqXHR, XMLHttpRequest, textStatus, errorThrown) {
        custom_err(jqXHR, XMLHttpRequest, textStatus, errorThrown);
    }
});}
  

Сохраните код события из плагина js,

 i.on("click", "button.tabledit-save-button", function(e) {
        console.log('test');
        e.handled !== !0 amp;amp; (e.preventDefault(), b.submit(t(this).parents("tr").find("td.tabledit-edit-mode")), e.handled = !0)
    })) : (i.on(d.eventType, "tr:not(.tabledit-deleted-row) td.tabledit-view-mode", function(t) {
        t.handled !== !0 amp;amp; (t.preventDefault(), b.reset(i.find("td.tabledit-edit-mode")), u.edit(this), t.handled = !0)
    })