title: DataTable + JEditable + AutoComplete(BAssistance) + Server Side Processing
body: <p>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.</p>
  
  <pre><code>$(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 &gt; span[title]").editable(
          function(value,settings){
              return value;
          },
          {
              type      : "autocomplete",
              tooltip   : "Click to edit...",
              autocomplete : {
                  url : "autocompleteeg.aspx"
              }
          }
      );
  });
  </code></pre>
  
  <p>This code works perfectly fine.</p>
  
  <p>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.</p>
  
  <p>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. :)</p>