tabla plugin icon editar editable column bootstrap jquery-plugins autocomplete datatables jeditable

jquery plugins - plugin - DataTable+JEditable+AutoComplete(BAssistance)+Procesamiento del lado del servidor



jquery plugin datatable (1)

Después de casi luchar por una semana, pude hacer DataTable + JEditable + AutoComplete (BAssistance) con el procesamiento del lado del servidor usando Json para trabajar. Pensé que sería útil para alguien allá afuera.

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

Este código funciona perfectamente bien.

Las tablas de datos usan el procesamiento del lado del servidor. Y estoy enviando los cambios a JDitable para la función de JavaScript. A partir de ahí en Enviar, estoy enviando la matriz de cambios completa al servidor.

Este código se ha vuelto demasiado largo. ¿Alguien me puede ayudar a refactorizarlo? Si hay alguna forma mejor de lograr lo mismo, entonces lo estoy esperando. :)


Sí, amigo! Solo un pequeño error de sintaxis en tu código.

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

Muchas gracias