Using DataTable FixedColumns and JEditable together

Question

I'm posting this question as i have never found a solution while searching on the internet, but I know others had also had this problem and I wanted to share a solution.

The problem being that whenever you use the DataTable's FixedColumns plugin

   new $.fn.dataTable.FixedColumns(grid, {
            leftColumns: 2,
    });

in conjunction with the JEditable you find that you cannot edit those frozen columns(ie here). So i sought to provide a solution for this which I will explain in the answer

score 1 · Answer 1 · answered Nov 06 '14 at 18:42

The solution can be found here, but I will explain below

The problem exists because the use of FixedColumns creates two tables; one table, the clone table(denoted by the class name DTFC_CLONED , only consists of the columns that you wanted frozen. The other table is the original table that is created. So whenever you try to do an edit, my example uses inline editing, you're actually doing the edit on the original field not the field that is created from the clone table.

The solution I came up with was to simply allowed editing on the clone table, then push the updated results back to the original table. I achieved this by adding a fnDawCallback to the FixedColumns initialization. The function I have in there will be called every time the FixedColumns is applied, which is every time after the table is redrawn.

new $.fn.dataTable.FixedColumns(grid, {
        leftColumns: 3,
        fnDrawCallback:function(){
            clone_grid_init();
        }
});

the clone_grid_init()

//Allows editing of fixed fields
function clone_grid_init (){
    $('.DTFC_Cloned tbody tr').each(function(nRow){
        $('td:gt(0)', this).addClass('editText_clone'); //apply new class to tds
    });

    $('.editText_clone').editable(theCallBack, {
        indicator : "<img src='resources/images/indicator.gif'>",
        tooltip   : "Double Click to edit...",
        event     : "dblclick",
        style  : "inherit",
        submit : '<span class="fa fa-check"></span>',
        cancel : '<span class="fa fa-close"></span>',
        placeholder:"",
        callback : function (sValue, y){
            var col = $(this).parent().children().index($(this));//get col index of field from clone table
            var row = $(this).parent().parent().children().index($(this).parent());//get row index of field from clone table
            //var aPos = grid_clone.fnGetPosition( this ); // Get the position of the current data from the node
            grid.fnUpdate(sValue, row, col);// Update the original table with the new value
            return sValue.trim(); //return the new value for the clone table
        }
    });
};

Using DataTable FixedColumns and JEditable together

1 Answers1