Не показывает данных plugin dataTable с ajax

у меня есть проблемы с plugin dataTable, который не показывает мне данные, которых я называю из-за 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('');
      });

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

});


N° Obs Prioridad Estado Hoja Fecha inicial Solicitante Descripción Última modificación Responsable Proyecto
N° Obs Prioridad Estado Hoja Fecha inicial Solicitante Descripción Última modificación Responsable Proyecto

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

У даты, которая приносит мне мою консультацию, есть следующий формат (ощутитесь, что у него есть одна "d:" раньше):

{"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}"}

Что видное более по порядку является главным образом этим: introducir la descripción de la imagen aquí

Пожалуйста оцененные я нуждаюсь в Вашей помощи! Спасибо заранее.

0
задан 06.03.2019, 07:22
1 ответ

Уже, в действительности она respondГ - приблизительно через 1 неделю после напечатанная, и это было чем-то таким простым вроде правильным parseo полученных данных с ответа JSON ASP и ее separaciГіn mГ©todos.:

1. - Восток - мой конечный код ее configuraciГіn dataTable, в котором aГ±ado даже кнопки формы, настроенной, чтобы печатать и demГЎs функции:

 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. - И из-за Гєltimo и ни для больше ни меньше важно, в момент получения Success обратно от Аякса ища объект, для parsear necesitГ© следующие линии:

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

Pd: TambiГ©n я был должен улучшаться mГ©todo, больше, чем все создавать список, соответствующий попросившему из-за JSON.

В конце концов 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

Шрифт: ElaboraciГіn собственная

0
ответ дан 19.11.2019, 22:32