Question

我正在laravel中开发此网站，当我尝试使用DataTables时遇到麻烦，对于我的设计，我正在使用AdminLTE，并且每当尝试将datatables放在内容上时，搜索栏，页面选择器，图标消失。我遵循前面的示例：https://datatables.net/examples/styling/bootstrap。此数据表的CDN使我的adminLTE变形。 https://i.imgur.com/6fY7tMF.png

我已经尝试过更改CDN，但是我真的不认为这是这里的问题。

------------------------ HEAD ---------------------- ----------

    <head>

  <link rel="stylesheet" href="./style.css">    
  <link rel="shortcut icon" href="img/favicon.ico" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{ config('app.name') }}</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
  <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet">


</head>

------------------------身体---------------------- ----------

    <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Gestão de Utilizadores
        <small>Optional description</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      @yield('content')
      <div class="table-reponsive box">
<table id="example" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Id</th>
                <th>Username</th>
                <th>Password</th>
                <th>Empresa</th>
                <th>Conta</th>
                <th>EDITAR</th>
                <th>APAGAR</th>
            </tr>
        </thead>
        <tbody>
          @foreach($utilizadores as $utilizador)
            <tr>
                <td>{{ $utilizador->id }}</td>
                <td>{{ $utilizador->username }}</td>
                <td>{{ $utilizador->password }}</td>
                <td>{{ $utilizador->empresa }}</td>
                <td>@if($utilizador->type == 1) <b>Admin</b> @else User Normal @endif</td>
                <td><a href = 'edituser/{{ $utilizador->id }}'>EDITAR</a></td>
                <td><a href = 'edituser/{{ $utilizador->id }}'>APAGAR</a></td>
            </tr>
          @endforeach
        </tbody>
    </table>
</div>


<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable();
} );
</script>


    </section>


<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>

我期望类似示例（'https://datatables.net/examples/styling/bootstrap'）的内容。当我实际遇到这个问题时：https://i.imgur.com/Wnt7tcn.png

带有管理表和数据表的问题

0 个答案: