jquery - full - ¿Hay una manera de obtener aocolumns del servidor en editable de datos?
jquery datatables ajax json example (2)
Por lo tanto, estoy intentando crear una página genérica para cualquier tabla que solicite el usuario. Para eso estoy tratando de recuperar todos los datos del servidor y no tener nada codificado en el lado del cliente.
$(document).ready(function(){
/* Add/remove class to a row when clicked on */
$(''#table1 tr'').on(''click'', function() {
$(this).toggleClass(''row_selected'');
} );
var which_table=window.location.pathname;
var which_table_data=which_table.substring(0, which_table.length-1)+''/data'';
var table_name=which_table.substring(14, which_table.length-1);
$(''#table1'').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX":"100%",
"aoColumnDefs": [{
"targets" : [0],
"visible" : false,
"searchable" : false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"aoColumns": $.ajax({
dataType: "json",
url: ''/get_aoColumns'',
data: function (table_name) {
return {
q: table_name
};
},
results: function (data) {
alert(data);
}
});
});
});
Así que en esta pieza basada en la var which_table=window.location.pathname;
Intento obtener los datos de la tabla correspondiente del servidor en el que tengo éxito. Pero ahora quiero obtener incluso la matriz aoColumns del servidor. Mi pregunta es ¿Puedo enviar los datos en la misma solicitud junto con aoData, secho y otros campos requeridos? Pienso que es posible que no se pueda generar datos de forma correcta ya que aoColumns no forma parte del json requerido. ¿Cómo obtengo las aoColumns para cualquier tabla de modo que incluso la validación se convierta en el lado del servidor y no tenga que diseñar una página por tabla?
Esta parte de abajo no funciona, ya que no sé cuál es la forma correcta de hacerlo.
"aoColumns": $.ajax({
dataType: "json",
url: ''/get_aoColumns'',
EDITADO : -
Intenté el enfoque de @ garryp ..
Estos son los datos que obtengo del servidor.
[{"cssclass": "required", "type": "textarea"}, {"sUpdateURL": "../update/my_table", "cssclass": "required", "type": "textarea", "loadtype": "POST", "submit": "OK"}, {"loadurl": "../data/", "sUpdateURL": "../update/my_table", "loadtype": "POST", "type": "select", "submit": "OK"}]
Este es mi código :
$(document).ready(function(){
/* Add/remove class to a row when clicked on */
$(''#table1 tr'').on(''click'', function() {
$(this).toggleClass(''row_selected'');
} );
var which_table=window.location.pathname;
var which_table_data=which_table.substring(0, which_table.length-1)+''/data'';
var table_name=which_table.substring(14, which_table.length-1);
if(table_name.indexOf(''Welog'')> -1) {
$(''#table1'').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX": "100%"
});
$(''#formAddNewRow'').hide();
}
else {
$.ajax({
url: ''../get_aodata/'' + table_name,
async: false,
success: function (data) {
alert(data);
$(''#table1'').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bjQueryUI": true,
"sScrollX": "100%",
"aoColumnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"sAddDeleteToolbarSelector": "#table1_length",
"aoColumns" : data
/*"aoColumns" : [
{
"cssclass": "required",
"type":"textarea"
},
{
"cssclass": "required",
"type":"textarea",
"submit" : "OK",
"sUpdateURL": "../update/"+table_name,
"loadtype" : "POST"
},
{
"loadurl" : "../data/",
"type" : "select",
"submit": "OK",
"sUpdateURL": "../update/"+table_name,
"loadtype" : "POST"
}
]*/
});
}
});
}
});
Entonces, si ve que el aoColumns comentado en este código es exactamente el mismo que el resultado obtenido del servidor, pero el que recibió del servidor no t work and the one commented out if uncommented does work. The one got from the server if used using aoColumns : data just behaves the same way as if aoColumns parameter wasn
t work and the one commented out if uncommented does work. The one got from the server if used using aoColumns : data just behaves the same way as if aoColumns parameter wasn
mencionara el t work and the one commented out if uncommented does work. The one got from the server if used using aoColumns : data just behaves the same way as if aoColumns parameter wasn
en la función makeditable. ¿Eso significa que los datos no están llegando a ese parámetro? Porque no obtengo ningún error en la consola.
Solución: -
success : function(data){
var data_str= JSON.parse(data);
});
De acuerdo. Tuve que convertir la cadena json a JSobject usando parse y finalmente funcionó.
No funciona porque está asignando el valor de retorno de $.ajax(...)
a aoColumns
aquí (cuando realmente necesita asignar una matriz de columnas a "aoColumns"):
}).makeEditable({
...
"aoColumns": $.ajax({
En su lugar, lo que debe hacer es hacer que la llamada AJAX PRIMERO. Luego, dentro de la función jQuery success
, configure su datatable.
$.ajax({
url: ''/get_aoColumns'',
...
success : function(data) {
// ToDo: put all your datatable code in here.
// and assign `data` to "aoColumns"
/** data table code **/
}).makeEditable({
"aoColumns": data
/** rest of data table code **/
}
He intentado omitir todos los bits, excepto los importantes, para aclarar los puntos clave, pero esto debería ayudarlo a comprender dónde se ha equivocado.
He configurado un JS Fiddle aquí con un ejemplo de código (no probado) si esto no tiene sentido:
Suponiendo que /get_aoColumns
esté devolviendo todo correctamente, parece que primero desea obtener esa información, y luego, en el controlador de éxito, cree la base de datos. En su código anterior, parece que la declaración de las tablas de datos puede finalizar antes de que la solicitud ajax tenga la oportunidad de completarse, entonces, ¿qué le parece esto?
$(document).ready(function () {
/* Add/remove class to a row when clicked on */
$(''#table1 tr'').on(''click'', function () {
$(this).toggleClass(''row_selected'');
});
var which_table = window.location.pathname;
var which_table_data = which_table.substring(0, which_table.length - 1) + ''/data'';
var table_name = which_table.substring(14, which_table.length - 1);
//wrap the ajax request to get aoColumns outside of the initializaer
$.get(''/get_aoColumns'', {q: table_name}, function (aoColumns) {
$(''#table1'').dataTable({
"bProcessing": true,
"bServerSide": true,
"bjQueryUI": true,
"sAjaxSource": which_table_data,
"bPaginate": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"aoColumnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}]
}).makeEditable({
"sUpdateURL": "../update/" + table_name,
"sAddURL": "../add/" + table_name,
"sDeleteURL": "../delete/" + table_name,
"aoColumns": aoColumns //the data retrieved from the request to get_aoColumns
});
});
});