jquery - Datatables draw() sin llamada ajax

datatables-1.10

Question

Estoy tratando de cambiar el tamaño de Jquery Datatables para que se ajuste al tamaño de la pantalla. Datatables se ejecuta en modo de servidor (propiedad "serverSide": true ). Cuando se cambia el tamaño de la ventana, realizo un nuevo cálculo de la altura de las nuevas tablas de datos y luego invoco draw(false) para volver a dibujar la distribución de la tabla de datos.

Desafortunadamente, el método draw() hace una llamada ajax y esto hace que la solución no se pueda usar, porque muestra "procesamiento" y toma tiempo obtener los datos en cada cambio de ventana pequeña.

Cómo volver a dibujar el diseño de tablas de datos sin llamar a AJAX? No necesito actualizar datos, solo quiero volver a dibujar la tabla.

Answer 1

Como entiendo, está haciendo nuevos cálculos del lado del servidor para "Datatables" o cualquier otro elemento de página basado en el ancho / alto de la ventana del lado del cliente ... ¿verdad? No tiene sentido hacer eso en la parte posterior o en el servidor, ¡pero hacerlo en el lado del cliente!

Ya hay grandes marcos de CSS para el cliente que automáticamente lo hacen por ti si cambias tu marcado html que viene del servidor un poco ... será muy útil para cualquier resolución de pantalla y para el cliente (el cliente aquí es de escritorio, móvil, navegador de tableta)

Sugeriría buscar más información y, especialmente, secciones de este marco.

http://getbootstrap.com/

Sugeriría echar un vistazo a la sección de tablas y en esta clase creo que podría ayudar: .table-responsive

http://getbootstrap.com/css/#tables

hth, kreso

Answer 2

table.draw(false) la llamada de table.draw(false) a table.columns.adjust() . Hace que la tabla tenga una altura y un ancho nuevos sin una llamada AJAX, por lo que el problema se resuelve para mí. Sin embargo, sería bueno saber la forma correcta de mostrar tablas de datos sin una llamada AJAX en el modo del lado del servidor.

Answer 3

Me enfrenté al mismo problema. Lo resolví con una respuesta falsa de AJAX. Aquí hay un código para mostrar cómo funciona:

Variables:

var skipAjax = false, // flag to use fake AJAX
skipAjaxDrawValue = 0; // draw sent to server needs to match draw returned by server

Definición de DataTable AJAX:

ajax: {
url: ajaxURL,
type: ''POST'',
data: function(data) { //this function allows interaction with data to be passed to server
if (skipAjax) { //if fake AJAX flag is set
skipAjaxDrawValue = data.draw; //get draw value to be sent to server
}
return data; //pass on data to be sent to server
},
beforeSend: function(jqXHR, settings) { //this function allows to interact with AJAX object just before data is sent to server
if (skipAjax) { //if fake AJAX flag is set
var lastResponse = dataTable.ajax.json(); //get last server response
lastResponse.draw = skipAjaxDrawValue; //change draw value to match draw value of current request
this.success(lastResponse); //call success function of current AJAX object (while passing fake data) which is used by DataTable on successful response from server
skipAjax = false; //reset the flag
return false; //cancel current AJAX request
}
}
}

Cómo utilizar:

skipAjax = true; //set the fake AJAX flag
dataTable.draw(''page''); //call draw function of a DataTable requesting to re-draw just the current page