0

tengo problemas con el plugin de dataTable el cual no me muestra los datos que llamo por webservice.

$(document).ready(function() {
  var tBusqueda = $("#selectTipoBusqueda option:selected").text();
  var tProyecto = $("#selectTipoProyecto option:selected").text();
  var txbBusqueda = $('#txbBuscar').val();
  var jsonValid;
  $.ajax({
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    url: '<%=ResolveUrl("~/Default.aspx/mostrarGrilla" ) %>',
    data: "{'tipoBusqueda':'" + tBusqueda + "', 'tipoProyecto':'" + tProyecto + "', 'txbBuscar':'" + txbBusqueda + "'}",
    success: function(data) {
      var datatableVariable = $('#dataTable').DataTable({
        //                    "destroy" : true,
        //                    "processing" : true,
        //                    "serverSide" : true, 
        //                    dom: 'Bfrtip',
        //                    obs : data['d'] ,
        //                    dataSrc: 'obs',
        //                    mData: 'obs',
        //                    responsive: true,
        select: true,
        "columns": [{
            data: "data.n"
          },
          {
            data: "data.p"
          },
          {
            data: "data.e"
          },
          {
            data: "data.h"
          },
          {
            data: "data.fi"
          },
          {
            data: "data.s"
          },
          {
            data: "data.d"
          },
          {
            data: "data.fa"
          },
          {
            data: "data.ra"
          },
          {
            data: "data.pro"
          }
        ],
        language: {
          "decimal": ".",
          "emptyTable": "No se ha llamado información o no está disponible",
          "infoEmpty": "Sin registros",
          "infoFiltered": "(Filtrado de _MAX_ total entradas)",
          "lengthMenu": "Mostrar _MENU_ entradas",
          "loadingRecords": "Cargando...",
          "processing": "Procesando",
          "search": "Buscar: ",
          "zeroRecords": "No se encuentran resultados",
          "paginate": {
            "first": "Primero",
            "last": "Último",
            "next": "Siguiente",
            "previous": "Anterior"
          }
        }

      });
      $('#dataTable tfoot th').each(function() {
        var placeHolderTitle = $('#dataTable thead th').eq($(this).index()).text();
        $(this).html('<input type="text" class="form-control input input-sm" placeholder = "Buscar ' + placeHolderTitle + '" />');
      });

      datatableVariable.columns().every(function() {
        var column = this;
        $(this.footer()).find('input').on('keyup change', function() {
          column.search(this.value).draw();
        });
      });
      $('.showHide').on('click', function() {
        var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
        tableColumn.visible(!tableColumn.visible());
      });

    },
    error: function(result) {
      alert("error");
    }
  });

});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dataTable" name="dataTable">
  <thead>
    <tr>
      <th>N° Obs</th>
      <th>Prioridad</th>
      <th>Estado</th>
      <th>Hoja</th>
      <th>Fecha inicial</th>
      <th>Solicitante</th>
      <th>Descripción</th>
      <th>Última modificación</th>
      <th>Responsable</th>
      <th>Proyecto</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>N° Obs</th>
      <th>Prioridad</th>
      <th>Estado</th>
      <th>Hoja</th>
      <th>Fecha inicial</th>
      <th>Solicitante</th>
      <th>Descripción</th>
      <th>Última modificación</th>
      <th>Responsable</th>
      <th>Proyecto</th>
    </tr>
  </tfoot>

</table>

El WebMethod que utilizo es el siguiente:

<WebMethod()> Public Shared Function mostrarGrilla(ByVal tipoBusqueda As String, ByVal tipoProyecto As String, ByVal txbBuscar As String)
        Using cn As New conexion
            Using cmd As New Npgsql.NpgsqlCommand
                cn.Conectar()
                Dim txtSELECT As String = "SELECT numero as N,prioridad as P, e_estado as E, aoi as H, f_ingreso as FI, solicitante as S, descripcion as D, f_actual as FA, r_actual as RA, proyecto as PRO"
                Dim txtFROM As String = " FROM sistema.observaciones.vista_completa_observaciones WHERE numero in (1500,2000) "
                Dim txtORDER As String = " ORDER BY numero DESC "

                cmd.CommandText = (txtSELECT + txtFROM + txtORDER)
                cmd.Connection = cn.conexion
                Dim ds As New DataSet()
                Dim dt As New DataTable
                Using sda As New NpgsqlDataAdapter(cmd)
                    sda.Fill(ds, "data")
                    Dim json As String = JsonConvert.SerializeObject(ds, Newtonsoft.Json.Formatting.Indented)
                    Return json
                End Using
            End Using
        End Using
End Function

La data que me trae mi consulta tiene el siguiente formato (notese que tiene una "d:" antes):

{"d":"{\r\n  \"data\": [\r\n    {\r\n      \"n\": 2000,\r\n      \"p\": 2017,\r\n      \"e\": \"Finalizada                    \",\r\n      \"h\": \"C069\",\r\n      \"fi\": \"2016-05-25T12:40:59\",\r\n      \"s\": \"Cecilia Sandoval              \",\r\n      \"d\": \"Se solicita a la seccion publicaciones , realizar correccion de observaciones encontradas en proceso de revision.\",\r\n      \"fa\": \"2016-06-22T16:35:12\",\r\n      \"ra\": \"Valeria Sandoval              \",\r\n      \"pro\": \"Publicación         \"\r\n    },\r\n    {\r\n      \"n\": 1500,\r\n      \"p\": 2017,\r\n      \"e\": \"Finalizada                    \",\r\n      \"h\": \"J011\",\r\n      \"fi\": \"2014-02-20T12:01:31\",\r\n      \"s\": \"Valeria Sandoval              \",\r\n      \"d\": \"Se solicita unir la feature que curresponde al lago con la feature curagua_L representado en la Imagen 1, ya que  tienen una pequeña separación.\",\r\n      \"fa\": \"2014-02-25T13:46:36\",\r\n      \"ra\": \"Valeria Sandoval              \",\r\n      \"pro\": \"Publicación         \"\r\n    }\r\n  ]\r\n}"}

Que vista mas ordenadamente es básicamente esto: introducir la descripción de la imagen aquí

Por favor estimados necesito su ayuda! Gracias de antemano.

3
  • Debo aclarar que para desarrollar utilizo Visual Studio
    – harifo
    Commented el 6 mar. 2019 a las 14:55
  • te sugiero revisar esto, alli puedes ir viendo como acceder al mismo: jsfiddle.net/jrwunvq8 Commented el 6 mar. 2019 a las 17:01
  • Revisado amigo, se agradece la sugerencia pero vuelvo a lo mismo, no puedo mostrar la data en el plugin ya que acceda o no no me permite mostrar, te agradecería si pudieses ejemplificar con mi codigo.
    – harifo
    Commented el 6 mar. 2019 a las 18:42

1 respuesta 1

0

Ya, en realidad la respondí aproximadamente 1 semana despues de publicada, y era algo tan sencillo como el parseo correcto de datos provenientes desde la respuesta JSON de ASP y la separación de métodos.:

1.- Este es mi codigo final de la configuración de dataTable, en el cual añado incluso los botones de forma personalizada para imprimir y demás funciones:

 function cargarTabla(data){
    var now = new Date();
    var jsDate = now.getDate()+'-'+(now.getMonth()+1)+'-'+now.getFullYear();
    var datatableVariable = $('#dataTable').DataTable({
                destroy : true,
                "processing" : true,
                data : data ,
                order: [[0 , "desc"]],
                defaulContent: "",
                "pagingType":"full_numbers",
                select : true,
                language:{
                            buttons:{
                                copyTitle: 'Copiar al portapapeles',
                                copyKeys:'Presione <i>Control</i> + <i>C</i> para copiar la tabla al portapapeles. <br><br> Para cancelar, haz click en este mensaje o presiona escape.',
                                copySuccess: {
                                    _: '%d líneas copiadas',
                                    1: '1 línea copiada'
                                                }
                                    }, 
                    "decimal" : ",",
                    "thousands": ".",
                    "sEmptyTable" : "No se ha llamado información o no está disponible",
                    "sInfo" : "Mostrando _START_ de _END_ de un total de _TOTAL_ observaciones",
                    "sInfoEmpty" : "Sin registros",
                    "sInfoFiltered" : "(Filtrado de _MAX_ total entradas)",
                    "sLengthMenu" : "Mostrar _MENU_ entradas",
                    "sLoadingRecords" : "Cargando...",
                    "sProcessing" : "Procesando",
                    "sSearch" : "Buscar: ",
                    "sZeroRecords" : "No se encuentran resultados",
                    "_aData": "1 fila seleccionada",
                    "oPaginate" : {
                        "sFirst" : "Primero",
                        "sLast" : "Último",
                        "sNext" : "Siguiente" , 
                        "sPrevious" : "Anterior"

                            },
                columns: [                  
                    { data : "0" },
                    { data : "1" },
                    { data : "2" },
                    { data : "3" },
                    { data : "4" },
                    { data : "5" },
                    { data : "6" },
                    { data : "7" },
                    { data : "8" },
                    { data : "9" }
                ]


                },
                columnDefs:[{
                    targets: 6,
                      render:function(data, type, row) {
                                if (type === 'display' && data != null) {
                                  data = data.replace(/<(?:.|\\n)*?>/gm, '');
                                  if(data.length > 30) {
                                    return '<span class=\"show-ellipsis\">' + data.substr(0, 30) + '</span><span class=\"no-show\">' + data.substr(30) + '</span>';
                                  } else {
                                    return data;
                                  }
                                } else {
                                  return data;
                                }
                              }
                }],


                  dom: 'Blfrtip',
                  text: 'Exportar',
                  buttons: [
                    {
                        text: 'Copiar',
                        extend: 'copyHtml5'

                    },
                     {
                        text: 'Exportar a Excel'
                     }, 
                    {
                        text: 'Imprimir'
                    },
                    {
                        text: 'Exportar a PDF',
                        extend: 'pdfHtml5',
                        filename: 'Reporte de observaciones a la DBG '+ jsDate.toString() ,
                        messageTop: 'Reporte de observaciones a la BDG.',
                        pageSize: 'LEGAL',
                        exportOptions:{
                        //    columns: 'visible',
                            search: 'applied',
                            order: 'applied'
                        },
                        customize: function (doc){
                            doc.styles['td:nth-child(2)'] = {
                                    width: '100px',
                                    'max-width': '100px'
                                };
                            doc.content.splice(0,1); //Elimina el título por defecto
                            doc.pageMargins = [20,60,20,30];
                            doc.defaultStyle.fontSize = 7;
                            doc['footer']=(function(page, pages) {
                                        return {
                                            columns: [
                                                {
                                                    alignment: 'left',
                                                    text: 'Creado el día: ' + jsDate.toString()
                                                },
                                                {
                                                    alignment: 'right',
                                                    text: ['Página  ', { text: page.toString() },   ' de ', { text: pages.toString() }]
                                                }
                                            ],
                                            margin: 20
                                                }
                                                                });
                                                 var objLayout = {};
                                                objLayout['hLineWidth'] = function(i) { return .5; };
                                                objLayout['vLineWidth'] = function(i) { return .5; };
                                                objLayout['hLineColor'] = function(i) { return '#aaa'; };
                                                objLayout['vLineColor'] = function(i) { return '#aaa'; };
                                                objLayout['paddingLeft'] = function(i) { return 4; };
                                                objLayout['paddingRight'] = function(i) { return 4; };
                                                doc.content[0].layout = objLayout;

                                                }

                     }   
                            ],
                  bAutoWidth: false
            });
            $('#dataTable tfoot th').each(function () {
                var placeHolderTitle = $('#dataTable thead th').eq($(this).index()).text();
                $(this).html('<input type="text" class="form-control input input-sm" placeholder = "Buscar ' + placeHolderTitle + '" />');
            });

            datatableVariable.columns().every(function () {
                var column = this;
                $(this.footer()).find('input').on('keyup change', function () {
                    column.search(this.value).draw();
                });
            });
            $('.showHide').on('click', function () {
                var tableColumn = datatableVariable.column($(this).attr('data-columnindex'));
                tableColumn.visible(!tableColumn.visible());
            });  
            //Obtener el numero de observacion de la fila seleccionada
            $('#dataTable tbody').on('dblclick' ,'tr' , function(event){
                event.preventDefault();
                event.stopImmediatePropagation();
                var numeroObserva = $(this).find('td:first').html();
                var configVentana = "menubar=yes, location=yes, resizable=yes, scrollbars= yes, status=yes"
                console.log(numeroObserva);      
                w = window.open("vista-observacion.aspx?obs=" + numeroObserva,"AccionObs"+ numeroObserva,configVentana);

            });
   }  

2.- Y por último y para nada menos importante, al momento de recibir el Success de vuelta de Ajax buscando el objeto, para parsear necesité las siguientes lineas:

success: function(data) {
         var dData = JSON.stringify(data.d['0']);
                       data = JSON.parse(dData);
                       cargarTabla(data);
                          }

Pd: También tuve que mejorar el método, mas que todo crear una lista correspondiente a lo solicitado por JSON.

Finalmente quedó así:

<WebMethod()> Public Shared Function mostrarGrilla(ByVal tipoBusqueda As String, ByVal tipoProyecto As String, ByVal txbBuscar As String)
Using cn As New conexion
        Using cmd As New Npgsql.NpgsqlCommand
            cn.Conectar()
            Dim txtSELECT As String = "SELECT numero as N,prioridad as P, e_estado as E, aoi as H, f_ingreso as FI, solicitante as S, descripcion as D, f_actual as FA, r_actual as RA, proyecto as PRO"
            Dim txtFROM As String = " FROM sistema.observaciones.vista_completa_observaciones where " & stringFiltro
            Dim txtORDER As String = " ORDER BY numero DESC "
            cmd.CommandText = (txtSELECT + txtFROM + txtORDER)
            cmd.Connection = cn.conexion
            Dim ds As New DataSet()
            Dim dt As New DataTable
            Using sda As New NpgsqlDataAdapter(cmd)
                sda.Fill(ds, "data")
            End Using
            '''''''''''''''''CREAR LISTA
            For Each table As DataTable In ds.Tables
                Dim rowValues As New List(Of List(Of Object))
                For Each row As DataRow In table.Rows
                    Dim values As New List(Of Object)
                    For Each column As DataColumn In table.Columns
                        If row.IsNull(column) Then
                            values.Add("")
                        Else
                            values.Add(row.Item(column).ToString().Trim())
                        End If
                    Next
                    rowValues.Add(values)
                Next
                jsonList.Add(rowValues)
            Next
            Return jsonList
        End Using
    End Using
End Function

Fuente: Elaboración propia

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.