0

El estilo no se aplica correctamente en mi pagina, estoy seguro del orden al que le di a los estilos CSS y scripts. Pero aun asi me siguen sin funcionar aun cuando me base en los mismos ejemplos de la pagina de Angular-Datatables.

Como pueden notar en la imagen, el TextBox y la paginacion deberían tener un formato basado en los estilos de , pero no es el caso, se despliegan como cualquier etiqueta sin estilo.

imagen

Si se necesita mas información al respecto del sitio para solucionar el problema o se me olvidaron detalles importantes por favor díganmelo para solucionar el problema mas rápido.

XP Quick Claims

        <!--CSS-->

    <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="app/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="/bower_components/angular-datatables/angular-datatables.css">
    <link rel="stylesheet" href="/bower_components/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.css">

</head>

<body>

    <div ng-include  src="'app/components/navbar/navbar.view.html'"></div>
    <div class="container" ng-view></div>


    <!--Tables-->
    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/bower_components/angular/angular.min.js"></script>
    <script src="/bower_components/ngMask/dist/ngMask.min.js"></script>
    <script src="/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
    <script src="/bower_components/angular-datatables/dist/angular-datatables.min.js"></script> 

    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>     
    <script src="/bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.js"></script>
    <script src="/bower_components/angular-route/angular-route.min.js"></script>


    <!-- Módulo-->
    <script type="text/javascript" src="app/app.module.js"></script>
    <script type="text/javascript" src="app/components/filtros/filters.module.js" ></script>
    <script type="text/javascript" src="app/components/filtros/filter.input.module.js" ></script>
    <script type="text/javascript" src="app/components/navbar/navbar.module.js" ></script>
    <script type="text/javascript" src="app/components/usuarios/usuario.module.login.js"></script>
    <script type="text/javascript" src="app/components/usuarios/usuarios.module.js"></script>
    <script type="text/javascript" src="app/components/pacientes/pacientes.module.js"></script>
    <script type="text/javascript" src="app/components/aseguradora/aseguradora.module.js"></script>
    <script type="text/javascript" src="app/components/pdf/pdf.module.js"></script>
</body>

4

1 respuesta 1

1

Nuevamente, ahora le voy a dar el ejemplo para este caso :D
https://gitlab.com/erikrs921/boostrap-data-table-exampl
En resumen el codigo aqui abajo, pero tienes que descargarte las fuentes del enlace que te dejo.

$(document).ready(function() {
  $('#bootstrap-table').bdt({
    showSearchForm: 0,
    showEntriesPerPageField: 0
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Bootstrap-Based-Data-Table-Bootstrap-Data-Table/js/jquery.bdt.js"></script>
<link href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Bootstrap-Based-Data-Table-Bootstrap-Data-Table/css/jquery.bdt.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row">
      <div class="box clearfix">
        <h3>Bootstrap Data Table</h3>
        <p>Easily turn your tables into datatables.</p>

        <table class="table table-hover" id="bootstrap-table">
          <thead>
            <tr>
              <th>#ID</th>
              <th>Username</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
            .....................
            <td>190</td>
            <td>johndoe</td>
            <td>John</td>
            <td>Doe</td>
            </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
  </div>


</body>

</html>

4
  • Error: { "message": "Uncaught ReferenceError: $ is not defined", "filename": "stacksnippets.net/js", "lineno": 53, "colno": 11 } el 20 feb. 2018 a las 14:27
  • " Jorge Luis Alcantara". Si lo ejecutas aqui, no va a cargar. Solo puse parte del codigo, necesitas descargarte la fuente completa.
    – Erik Roky
    el 20 feb. 2018 a las 16:50
  • 1
    @ErikRoky hey, gracias por agregar un ejemplo, hay que desarrollar un poco las respuestas, no solo añadir enlaces, (revisar Cómo responder), esto para que la información que compartes sea de utilidad para muchos desarrolladores, gracias y saludos!
    – Jorgesys
    el 20 feb. 2018 a las 18:30
  • @ErikRoky he editado tu respuesta para que el codigo se pueda ejecutar aqui el 29 dic. 2022 a las 19:46

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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