0
906
VistasEl ancho de columna personalizado de JQuery DataTables.net no funciona después de la carga de ajax
Tengo un problema con una tabla de datos de jQuery. Como puede ver en esta definición, la fuente de datos de la tabla es una llamada ajax. Todo funciona bien y los datos se muestran, pero no se respetan los anchos de columna. Cuando se muestra la tabla, las dos columnas tienen anchos más o menos iguales. He adjuntado una captura de pantalla para mostrar el comportamiento. Cuando cambio el tamaño del cuadro de diálogo aunque sea un poco, todo encaja en su lugar.
Aquí está la tabla HTML y la llamada DataTables():
<table id="tblNotes" style="width:100%"> <thead> <tr> <th width="80px">Date</th> <th width="500px">Note</th> </tr> </thead> <tbody></tbody> </table>Y las tablas de datos llaman:
$(document).ready(function(){ $("#tblNotes").DataTable({ "ajax" : { "url": "/projects/ajaxGetProjectNotes/", "type" : "post", "dataType" : "json", "data" : function(d){ return { idProject : $("#pn-idProject").val() }; } }, "columns" : [ {"data" : "dComment", "width" : "80px", "orderable" : true}, {"data" : "cComment", "width" : "500px", "orderable" : false} ] });La tabla de datos está en un diálogo jQueryUI. Así es como se ve cuando se muestra por primera vez:
1 Respuestas
Responde la pregunta0
Debido a cómo se implementa DataTables, puede establecer el ancho para todas las columnas menos una. Esa columna se diseña para ocupar el resto del espacio.
Sin embargo, no queremos eso. Entonces, lo que hice fue poner una nueva entrada en la parte CSS del archivo.
Yo añadí:
table#tblNotes { max-width:580px; }Esto hace que el ancho no supere los 580 px para toda la tabla. Obtuve ese número al sumar el ancho de las dos columnas (80px + 500px). Luego eliminé su código de ancho en "nota". Y ahora funciona perfectamente.
<style> table#tblNotes { max-width:580px; } </style> <div class="container"> <table id="tblNotes" style="width:100%"> <thead> <tr> <th width="80px">Date</th> <th>Note</th> </tr> </thead> <tbody></tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function(){ $("#tblNotes").DataTable({ "ajax" : { "url": "test.json", "type" : "post", "dataType" : "json", "data" : function(d){ return { idProject : $("#pn-idProject").val() }; } }, "columns" : [ {"data" : "dComment", "width" : "80px", "orderable" : true}, {"data" : "cComment", "width" : "500px", "orderable" : false} ] }); }); </script>