CODEWITHSUNDEEP
jquerydatatablesx-editable
retrograde
retrograde

Reputation: 2979

Initializing X-editable on datatable redraw

I have a datatable that is redrawn when a user requests new data. For example, it may show all members, then when a user clicks a button the table is redrawn to show only expired members.

I am using x-editable for editing the fields that appear within cells of the datatable. I get it to work just fine on initial draw, but I cannot get x-editable to appear when the table is redrawn.

Here is what I have tried:

1): use the draw.dt event - 

 $('#memberTable').on( 'draw.dt', function () {
        showEditable();  
        // continue with other things that are initialized on draw.dt all of which work
  });

  function showEditable(){
        $('.testX a').editable({
        type: 'text',
        pk:  function () {
            return $(this).closest("td").data("id");
        },
        url: '/update_task/',
        title: 'Edit Term'
    });
};

2): drawCallBack directly on the datatable initialization

  $('#memberTable').dataTable({
    columnDefs: [{ searchable: false, targets: 3 }],
    processing: true,
    pageLength: 20,
    lengthMenu: [[10, 20, 50, -1], [10, 20, 50, 'All']],
    drawCallback: function( settings ) {
        $('.testX a').editable({
        type: 'text',
        pk:  function () {
            return $(this).closest("td").data("id");
        },
        url: '/test',
        title: 'Edit'
    });
    alert( 'DataTables has redrawn the table' );
}
});

Anyone see what I am missing to make x-editable work on datatable redraw? TIA.

Upvotes: 2

Views: 1314

Answers (1)

Anrysys
Anrysys

Reputation: 11

The following solution helped me:

// Initiate the x-editable plugin
function get_editable() {
    $.fn.editable.defaults.mode = 'popup';
    $('.xedit').editable();
} 

 // Initiate the DataTable
table = $('#table').DataTable({
            option...
            drawCallback: function (settings) {
                get_editable();
            },
            option...
});

Upvotes: 1

Related Questions