Search code examples
javascriptdatatablesx-editable

DataTables with x-editable not sending ajax data


I'm trying to make a datatable editable with x-editable plugin. Everything works well but the sending of edited datas. When I click the cell, editor is opening, but nothing is sent to the backend.

This is my code. here is the fiddle.

// DataTables
let isDataTables = document.getElementById('dataTable');
if (isDataTables !== null) {
    $.extend( true, $.fn.dataTable.defaults, {
        dom: "<'row'<'col-sm-3'B><'col-sm-3'l><'col-sm-3'f><'col-sm-3'r>>" + "<'row'<'col-sm-12't>> " + "<'row pad10top'<'col-sm-6'i><'col-sm-6'p>>",
        //serverSide: true,
        select:true,
        stateSave: true,
        pagingType: "full_numbers",
        scrollY:    "60vh",
        scrollCollapse: true,
        pageLength: 50,
        responsive: {
            details: false
        }
    } );
}
$('#dataTable').DataTable( {    
    "drawCallback": function(){
        $.each ($("#dataTable td"), function (i, v) {
            tmp_pk = $(this) .closest($('tr')).attr('id');
            $(this).attr('data-pk', tmp_pk);
        });

        //let api = this.api();
        //$('.editable', api.table().body())
        $('td.controle').editable({
            url : '/response',
            pk: tmp_pk,
            ajaxOptions: {
                type: 'put'
            }
        })
    },
} );

Solution

  • Finally I found the answers to my question in the FAQ:

    Data is not submitted to server! Why? The most possible reason is that you have empty pk or url options. If you want to submit data without pk please set send option to "always".

    Also form is not submitted if you did not change value. To manage this behavior see savenochange option.

    https://vitalets.github.io/x-editable/faq.html