1

Aqui la tabla HTML

<table id="Tickets_Abiertos_table" class="table table-bordered table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center" style="background-color:skyblue;">No._Ticket</th>
                                            <th class="text-center" style="background-color:skyblue; width:140px;">Fecha_Apertura</th>
                                            <th class="text-center" style="background-color:skyblue;">Estado</th>
                                            <th class="text-center" style="background-color:skyblue; width:150px;">Tipo</th>
                                            <th class="text-center" style="background-color:skyblue; width:150px;">Motivo</th>
                                            <th class="text-center" style="background-color:skyblue;">Solucción</th>
                                            <th class="text-center" style="background-color:skyblue; width:150px;">Area_Responsable</th>
                                            <th class="text-center" style="background-color:skyblue;">Abierto_Por</th>
                                            <th class="text-center" style="background-color:skyblue; width:400px">Notas</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>

Asi es como inicializo la tabla

//inicializacion de la Tabla
       var oOpen_Case_Table = $('#Tickets_Abiertos_table').dataTable({
            "bJQueryUI": false,
            "aaSorting": [],
            "paging": false,
            "bServerSide": true,
            "bProcessing": true,
            "info": false,
            "bFilter": false,
            "scrollY": "48vh",
            "scrollX": true,
            "scrollCollapse": true,
            "sAjaxSource": '@Url.Action("Get_CALL_DATA_OPEN", "Creacion_Tickets")',
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "retnum", "value": $('#agenciaid').val() });
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json)
                });
            }
        });

Y esta es la funcion que utilizo para recargar los datos

function Busca_Tickets_Abiertos() {
            if (oOpen_Case_Table != null) {
                //Cambia dinamicamente la ruta del servidor para que no sea estatico.
                var oSettings = oOpen_Case_Table.fnSettings();
                oSettings.sAjaxSource = '@Url.Action("Get_CALL_DATA_OPEN", "Creacion_Tickets")'

                //Busca datos de la tabla
                oOpen_Case_Table.fnDraw();
                oOpen_Case_Table.fnClearTable();
                oOpen_Case_Table.fnAdjustColumnSizing();
                oOpen_Case_Table.fnDraw();
            }

        }

Esta es la accion MVC que devuelve los datos.

public ActionResult Get_CALL_DATA_OPEN(JQueryDataTableParamModel param, String retnum)
        {


            if (string.IsNullOrEmpty(retnum))
            {
                return null;
            }

            List<DR_CALL_DATA> CALL_DATA = Utilidades.Get_CALL_DATA_OPEN(retnum);


            //Select todos los logs encontrados
            var CALL_DATA_ALL = (from e in CALL_DATA
                           select e).ToList();

            //Fintrando por el parametro de busqueda
            var CALL_DATA_FILTRADO = (from e in CALL_DATA_ALL
                                      where (param.sSearch == null || e.caseID.ToString().ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.dateCallOpen.ToString().ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.callStatus.ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.callType.ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.callIssue.ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.callResolution.ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.callNotes.ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.callOpenedBy.ToLower().Contains(param.sSearch.ToLower())
                                                                 || e.queue.ToLower().Contains(param.sSearch.ToLower()))
                                    select e).ToList();

            var result = from CALL_DATA_RESULT in CALL_DATA_FILTRADO.Skip(param.iDisplayStart)//.Take(param.iDisplayLength)
                         select new[] {Convert.ToString(CALL_DATA_RESULT.caseID), CALL_DATA_RESULT.dateCallOpen.ToString(),
                                       CALL_DATA_RESULT.callStatus,CALL_DATA_RESULT.callType, CALL_DATA_RESULT.callIssue,
                                       CALL_DATA_RESULT.callResolution,CALL_DATA_RESULT.queue,CALL_DATA_RESULT.callOpenedBy,
                                       CALL_DATA_RESULT.callNotes};



            return Json(new
            {
                sEcho = param.sEcho,
                iTotalRecords = CALL_DATA_ALL.Count(),
                iTotalDisplayRecords = CALL_DATA_FILTRADO.Count(),
                aaData = result
            },
                        JsonRequestBehavior.AllowGet);
        }

Y asi se pone la tabla luego de esto. introducir la descripción de la imagen aquí

Como pueden observar la tabla se distorciona, el scroll Horizontal y vertical desaparecen, si vuelvo a buscar entonces si la tabla se pone bien. Me ayudan por favor.

1 respuesta 1

1

Actualización

Observando un poco mas mis códigos anteriores llegue a la propiedad fnRowCallback, o bien rowCallback, en la cual puedes modificar el diseño o la informacion de la columnas. Quedaría de la siguiente forma:

$('#example').dataTable( {
  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    $('td:eq(1)', nRow).attr('width', '120px');
    $('td:eq(3)', nRow).attr('width', '150px');
    $('td:eq(4)', nRow).attr('width', '150px');
    $('td:eq(6)', nRow).attr('width', '150px');
    $('td:eq(8)', nRow).attr('width', '400px');
  }
});

En esta propiedad puedes modificar el diseño de las columnas,


Sucede eso debido a que no encuentra correctamente a que th corresponde, ya que usas server-side te recomiendo agregar la propiedad columns, o bien columnDefs, a esta propiedad le agregas otra que define el ancho width para que se adapte a lo que obtienes en tu datatables.

Actualmente si se define un ancho en el encabezado este no tiende a respetarlo ya que ajusta el ancho de acuerdo a la informacion recibida

var oOpen_Case_Table = $('#Tickets_Abiertos_table').dataTable({
    "bJQueryUI": false,
    "aaSorting": [],
    "paging": false,
    "bServerSide": true,
    "bProcessing": true,
    "info": false,
    "bFilter": false,
    "scrollY": "48vh",
    "scrollX": true,
    "scrollCollapse": true,
    "sAjaxSource": '@Url.Action("Get_CALL_DATA_OPEN", "Creacion_Tickets")',
    "fnServerData": function (sSource, aoData, fnCallback) {
        aoData.push({ "name": "retnum", "value": $('#agenciaid').val() });
        $.getJSON(sSource, aoData, function (json) {
            fnCallback(json)
        });
    },
    columns: [
        { data: 'No._Ticket'},
        { data: 'Fecha_Apertura', width: '140px' },
        { data: 'Estado' },
        { data: 'Tipo', width: '150px' },
        { data: 'Motivo', width: '150px' },
        { data: 'Solucción' },
        { data: 'Area_Responsable', width: '150px' },
        { data: 'Abierto_Por' },
        { data: 'Notas', width: '400px' }
    ]
});
2
  • Esta parte no funciono, por que las columnas no tienen nombre, el controlador envia los datos como lista de string, asi select new[], en el Json que recibo no aparecen los nombre de las columnas. Commented el 4 ago. 2017 a las 18:57
  • @ElvinAcevedo he actualizado la respuesta, creo que con esa propiedad debería hacer el cambio del ancho.
    – JuankGlezz
    Commented el 4 ago. 2017 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.