none
Datatable en asp.net RRS feed

  • Question

  • Amigos buenas tardes , estoy realizando un data-table para mostrar un listado de pedidos , para ello cree un procedimiento almacenado el cual lo llamo desde un método webservices y lo convierto en  formato json con la clase JavaScriptSerializer()  y me arroja un resultado exitoso , pero cuando llamo el webservice y su respectivo método desde mi tabla con javascrip no me muestra nada en el tabla , no se si es que me hace falta alguna librería o  tengo un error se sintaxis , tambien quisiera saber si es posible que en al columna  instrumentador haya dropdownlist para seleccionar  instrumentador y  enviar una notificacion.Espero me puedan ayudar , anexo mi código , muchas gracias  

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Asigna.aspx.cs" Inherits="Remisiones.Net.Mantenimientos.Asigna" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Baskervville&display=swap" rel="stylesheet" />
          <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" ></script>
        <<link href="../bootstrap-4.3.1-dist/css/jquery.dataTables.css" rel="stylesheet" />
        <link href="../bootstrap-4.3.1-dist/css/dataTables.bootstrap.css" rel="stylesheet"/>
            <script src="../bootstrap-4.3.1-dist/js/jquery.dataTables.js"></script>
        <title></title>
    </head>
    <body>
        <header>Instrumentadores</header>
        <form id="frmInstrumentador" runat="server">
            <div class="container-fluid">
               <div class ="form-row">
                    <div class="form-group col-md-3">
                           <label>Desde:</label>
                           <div class="form-group datepick form-inline">
                               <div class="input-group date form-inline" id="divDesde">
                                   <input type="text" id="Desde" class="form-control" />
                                   <div class="input-group-addon">
                                       <span class="glyphicon glyphicon-th"></span>
                                   </div>
                               </div>
                           </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#Desde').datetimepicker();
                                locale:'ru'
                                dayNamesMin: 'Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'
                              
                            });
                        </script>
                       </div>
                       <div class="form-group col-md-3">
                           <label>Hasta:</label>
                           <div class="form-group datepick form-inline">
                               <div class="input-group date form-inline" id="divHasta">
                                   <input type="text" id="Hasta" class="form-control" />
                                   <div class="input-group-addon">
                                       <span class="glyphicon glyphicon-th">
                                       </span>
                                   </div>
                               </div>
                           </div>
                           <script type="text/javascript">
                               $(function () {
                                   $('#Hasta').datetimepicker();
                                   locale: 'ru'
                                   dayNamesMin: 'Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'


                               });
                           </script>
                       </div>
                   <div class="form-group col-md-2">
                       <asp:Button runat="server" id="btnBuscar"  CssClass="btn btn-primary form-inline" Text="Buscar" OnClick="btnBuscar_Click"/>
                   </div>
                </div>
                <hr/>
            <table class="table table-bordered table-hover" id="tblInstrumentador" runat="server"> 
             <thead>
                 <tr>
                      <th>Pedido</th>
                      <th>Remisión</th>
                      <th>Cliente</th>
                      <th>Entregar</th>
                      <th>Fecha Cirugia</th>
                      <th>Paciente</th> 
                      <th>Diagnostico</th>
                      <th>Material Solicitado</th>
                      <th>Profesional</th>
                      <th>Instrumentador</th>
                      <th>Estado</th>
                 </tr>
             </thead>
                <tfoot>
                    <tr>
                     <th>Pedido</th>
                      <th>Remisión</th>
                      <th>Cliente</th>
                      <th>Entregar</th>
                      <th>Fecha Cirugia</th>
                      <th>Paciente</th> 
                      <th>Diagnostico</th>
                      <th>Material Solicitado</th>
                      <th>Profesional</th>
                      <th>Instrumentador</th>
                      <th>Estado</th>
                    </tr>
                </tfoot>
               </table>
                </div>
        </form>
    </body>
    </html>
     <script type="text/javascript">
         $(document).ready(function () {
             $.ajax({
                 type: "POST",
                 dataType: "json",
                 url: "PedidosService.asmx/GetSIntrumentador",
                 success: function (data) {
                     var datatableVariable = $('#tblInstrumentador').DataTable({
                         data: data,
                         columns: [{ 'data': 'Pedido' },
                             { 'data': 'Remision' },
                             {
                                 'data': 'FechaCirugia', 'render': function (date) {
                                     var date = new date(parseInt(date.substr(6)));
                                     var month = date.getMonth() + 1;
                                     return date.getDate() + "/" + month + "/" + date.getFullyear();
                                 }
                             },
                             {
                                 'data': 'FechaCompromiso', 'render': function (date) {
                                     var date = new date(parseInt(date.substr(6)));
                                     var month = date.getMonth() + 1;
                                     return date.getDate() + "/" + month + "/" + date.getFullyear();
                                 }
                             },
                             { 'data': ' Diagnostico' },
                             { 'data': 'Profesional' },
                             { 'data': 'MateriaSolicitado' },
                             { 'data': 'Paciente' },
                             { 'data': 'NumeroDoc' },
                             { 'data': 'Instrumentador' },
                             { 'data':'IDEstado'}
                             ]

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

                     });

                     datatableVariable.column().every(function () {
                         var column = this;
                         $(this.footer()).find('input').on('Keyup change', function () {
                             column.serch(this.value).draw();

                         });
                     });

                     ('showHide').on('Click', function () {
                         var tablecolumn = datatableVariable.column($(this).attr('data-columnindex'));
                         tablecolumn.visible(!tablecolumn.visible());
                     });

                     
                 }
             });
         });
     </script>


    Daniel

    Wednesday, January 15, 2020 9:29 PM

All replies

  • hola

    >>cuando llamo el webservice y su respectivo método desde mi tabla con javascrip no me muestra nada en el tabla

    revisaste desde la consolta del developer tools del browser (a la cual accedes con F12) que json esta recibiendo

    podrias poner una linea con

    console.log(data);

    para visualizar los datos que recibes

    quizas si recibes los datos pero el json no respeta la estructura que requiere el componente datatable

    ---

    Ademas porque defines el datatable en el success del $.ajax cuando podrias configurarlo directamente sin necesidad de ningun $.ajax

    Analiza la documentacion

    https://datatables.net/manual/ajax

    veras que usa un ajax directo como parte de la cofiguracion

    POST data

    puedes indicar que sea por POST

    dataTable, ajax, json

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    Wednesday, January 15, 2020 11:29 PM
  • Leandro hola , ya logre mostrar la tabla pero no se  por que no me cargan los datos del Webservice y tampoco se me actualizan los encabezados de las columnas y el footer esto es lo que tengo , sera que me hace falta alguna libreria jquery 

    este es el codigo que he implementado 

    <script type="text/javascript">
         $(document).ready(function () {
          var datatableVariable =   $('#tblInstrumentador').DataTable({
                 "processing": true,
                 "serviside": true,
                 "ajax": {
                     "type": "POST",
                     "datatype": "JSON",
                     "url": "PedidosService.asmx/GetSIntrumentador"
                    
                 },
                 "columns": [
                     { "data": "Pedido" },
                     { "data": "Remision" },
                     {
                         "data": "FechaCirugia", "render": function (date) {
                             var date = new date(parseInt(date.substr(6)));
                             var month = date.getMonth() + 1;
                             return date.getDate() + "/" + month + "/" + date.getFullyear();

                         }
                         
                     },
                     {
                         "data": "FechaCompromiso", "render": function (date) {
                             var date = new date(parseInt(date.substr(6)));
                             var month = date.getMonth() + 1;
                             return date.getDate() + "/" + month + "/" + date.getFullyear();

                         }

                     },
                     { "data": "Diagnostico" },
                     { "data": "Profesional" },
                     { "data": "MaterialSolicitado" },
                     { "data": "Paciente" },
                     { "data": "NumeroDoc" },
                     { "data": "Instrumentador" },
                     {"data":"IDEstado"}
                 ]
             });
             $('#tblInstrumentador tfoot th').each(function () {
                 var placeHolderTitle = $('#tblInstrumentador thead th').eq($(this).index()).text();
                 $(this).html('<input type="text" class="form-input-sm" placeholder="search' + placeHolderTitle + '">');
             });
             datatableVariable.column().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());
             });
         });
     </script>


    Daniel

    Thursday, January 16, 2020 3:15 PM
  • hola

    Si revisas la developer tools del browser (accedes con F12) y visualizas la Console, puedes ver algun error ?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    Thursday, January 16, 2020 4:05 PM