DataTable + JEditable + saisie semi-automatique (BAssistance) + traitement côté serveur

Question

Après avoir lutté pendant une semaine, j'ai réussi à faire fonctionner DataTable + JEditable + AutoComplete (BAssistance) avec le traitement côté serveur en utilisant Json. Je pensais que ce serait utile à quelqu'un là-bas.

$(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" 
      } 
     } 
    ); 
}); 

Ce code fonctionne parfaitement bien.

Les DataTables utilisent le traitement côté serveur. Et je soumets les modifications à JEditable à la fonction javascript. À partir de là, sur Soumettre, je soumets tout le tableau de changement au serveur.

Ce code est devenu trop long quelqu'un peut-il m'aider à le refactoriser. S'il y a une meilleure façon d'accomplir la même chose, alors je l'attends. :)

Answer 1

Ouais cool Mec! Juste une petite erreur de syntaxe dans votre code.

} , { // opening bracket missing 
    "height": "20px" 
} 

Merci beaucoup