DataTable + JEditable + AutoComplete(BAssistance) + Server Side Processing.

Question

Hi,

After almost struggling for a week I have been able to make DataTable + JEditable + AutoComplete(BAssistance) with server side processing using Json to work. I thought it would be useful to somebody out there.

$(document).ready(function() {                           
$('#example tbody td').editable( function(value, settings) 
            {                          
                processEventForTable(this, value);
                return(value);
            } , 
    "height": "20px"
   });            oTableexample = $('#example').dataTable({
                    "bInfo": true,
                    "bProcessing" : true,
                    "bServerSide" : true,                                                
                    "sAjaxSource" : "GetPaginationData.aspx",
                    "sPaginationType": "full_numbers",
                    "bPaginate"      : true,
                    "fnServerData": function ( sSource, aoData, fnCallback ) {
                        var data = {"name" : "kObjectId",
                                   "value" : definitionId};
                        aoData.push(data);

                        data =  { "name" : "ObjectName", "value" : "example" };
                        aoData.push(data);

                        data = { "name" : "InstanceId", "value" : instanceId };
                        aoData.push(data);                                                            

                        data = { "name" : "IsNewRequest", "value" : IsNewRowAdded};
                        IsNewRowAdded = 0;    
                        aoData.push(data);                                                           


                        debugger;
                        $.ajax( {
                            "dataType": 'json',
                            "type": "Get",                                                        
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                            } );
                        },                                                 
                      "fnDrawCallback" :  function()
                                                {  
                                                        debugger;
                                                        SetDataTableIDAndAttachJEditable("example");
                                                        $('#example tbody td').editable( function(value, settings) 
                                                                            {   

                                                                                var aPos = oTableexample.fnGetPosition( this );                                          
                                                                                processEventForTableNew(aPos[0], aPos[1], value, "example");
                                                                                return(value);
                                                                            }
                                                                            );
                                                }
                    });  $.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
    $('input', this).autocomplete(settings.autocomplete.url, {                                                 
            dataType:'json',
            parse : function(data) {                                                                                                              
                                    return $.map(data, function(item){
                                        return {
                                                data : item,
                                                value : item.Key,
                                                result: item.value                                                                                     
                                   }
                                    })
                                   },
            formatItem: function(row, i, n) {                                                        
                    return row.value;
                },
            mustMatch: false,
            focus: function(event, ui) {                                                
                          $('#example tbody td[title]').val(ui.item.label);
                          return false;
                          }
            });                                        
    }});   $("#example tbody td > span[title]").editable(function(value,settings){
               return value;
             }, 
    {                                     
    type      : "autocomplete",
    tooltip   : "Click to edit...",            
    autocomplete : 
            {   
            url : "autocompleteeg.aspx" 
        }                   
});          } );      

This code works perfectly fine.

DataTables use Server Side Processing. And I am submitting the changes to JEditable to javascript function. From there on Submit I am submitting the entire change array to server.

This code has become too long can anybody help me refactor it. If there is any better way to accomplish the same thing then I am waiting for it. :)

Thanks, Bkak.