How to correctly display the Bootstrap style in DataTables?

Navigation
0

The style is not applied correctly on my page, I am sure of the order I gave to the CSS and scripts styles. But even so they still do not work even if I base myself on the same examples of the Angular-Datatables page.

As you can see in the image, the TextBox and the page should have a format based on the styles of bootstrap , but this is not the case, they are displayed like any tag html tag without style.

If you need more information about the site to solve the problem or I forgot important details please tell me to solve the problem faster.

                                        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>

    
asked by Josue Prz 18.03.2016 в 20:32
source

1 answer

1

Again, now I will give you the example for this case: D
link
In summary the code below, but you have to download the sources of the link that I leave you. 

  $(document).ready( function () {
        $('#bootstrap-table').bdt({
            showSearchForm: 0,
            showEntriesPerPageField: 0
        });
    });
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap - Data Table</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">  
</head>
<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>

<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/vendor/bootstrap.min.js" type="text/javascript"></script> 
<script src="js/jquery.bdt.min.js" type="text/javascript"></script>
 
</body>
</html>
    
answered by 20.02.2018 в 15:10
Login with Twitter in Laravel with artdarek / oauth-4-laravel Border radius Swift Ios