Jquery DataTable distorts table when reloading data

Question

Jquery DataTable distorts table when reloading data

Navigation

#1 by (1 votes)

1

Here is the HTML table

<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>

This is how I initialize the table

//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)
                });
            }
        });

And this is the function that I use to reload the data

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();
            }

        }

This is the MVC action that returns the data.

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);
        }

And so the table is put after this.

As you can see the table is distorted, the horizontal and vertical scroll disappear, if I look again then if the table is well. Help me please.

jquery datatables asp.net-mvc asp.net-mvc-5

asked by Elvin Acevedo 04.08.2017 в 16:30

source

1 answer

Windows 7 to 64 bits can not find asadmin when installing GlassFish How to access sub elements in AJAX and jQuery?

score 1 · Answer 1

Update

Observing a little more my previous codes, get to the property fnRowCallback , or rowCallback , in which you can modify the design or information of the columns. It would be as follows:

$('#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');
  }
});

In this property you can modify the design of the columns,

This happens because you can not find what th corresponds to, since you use server-side I recommend adding the property columns , or columnDefs , to this property you add another one that defines the width width so that it suits what you get in your datatables.

Currently if a width is defined in the header this does not tend to respect it since it adjusts the width according to the information received

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' }
    ]
});