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