时间戳

首页 > 解决方案 > 数据表插件在我的项目中不起作用

javascript - 数据表插件在我的项目中不起作用

问题描述

我尝试在我的项目中使用数据表插件，但它不起作用，我的布局也没有错误

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>ChatBot</title>
      <!-- Custom fonts for this template-->
      <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
      <link href="{{ asset('css/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
      <!-- Custom styles for this template-->
      <link href="css/sb-admin-2.min.css" rel="stylesheet">
      <link href="css/customtemplate.css" rel="stylesheet">

      <link rel= "stylesheet" type= "text/css" href= "botwidget/css/materialize.min.css">
      <link rel= "stylesheet" type= "text/css" href= "botwidget/css/style.css">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

      <!-- datatable-->
      <link rel="stylesheet" href="{{ asset('css/dataTables.min.css') }}">
      <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">


     
      <!-- Bootstrap core JavaScript-->
      <script src="{{ asset('js/jquery/jquery.min.js') }}"></script>
      <script src="{{ asset('js/bootstrap/js/bootstrap.bundle.min.js') }}"></script>

      <!-- Core plugin JavaScript-->
      <script src="{{ asset('js/jquery-easing/jquery.easing.min.js') }}"></script>
      <!-- Custom scripts for all pages-->
      <script src="{{ asset('js/sb-admin-2.min.js') }}"></script>

     
      
      <!--Make sidebar items active -->
      <script type="text/javascript" src="{{ asset('botwidget/js/materialize.min.js') }}"></script>
      <script type="text/javascript" src="{{ asset('botwidget/js/script.js')}}"></script>
      <script>
         $(document).ready(function () {
             
             $url= window.location.href;

             //URL Route von Browserzeile abfangen und für jede Route aktives Element setzen
             //Applikation hat 4 Sidebar Elemente, hier unterteilt in a, b, c und d
             if ($url.match(/^.*home$/)) {
               $element = document.getElementById("a");
               $element.className += " active";
             }
             if ($url.match(/^.*groupchat$/)) {
               $element = document.getElementById("b");
               $element.className += " active";
             }
             if ($url.match(/^.*groupsearch$/)) {
               $element = document.getElementById("c");
               $element.className += " active";
             }
             if ($url.match(/^.*statistics$/)) {
               $element = document.getElementById("d");
               $element.className += " active";
             }
            
         });
      </script>

      <!-- datatable-->
      <script src="{{ asset('js/dataTable.min.js') }}"></script>
      <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

   </body>
</html>

那是我的表刀片，它似乎没有错误，它可以正常工作但数据表插件如 sa 搜索排序等无法出来。只是一张普通的桌子

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">              
                <div class="card-header">{{ __('Statistik') }}</div>
                    <div class="card-body">
                    
                    <table id="statisticforteacher" class="display">
                        <thead>
                            <th>Id</th>
                            <th>FrageBezeichnung</th>
                            <th>Kapitel</th>
                            <th>richtige Antwort</th>
                            <th>falsche Antwort</th>
                            <th>Richtige Rate</th>
                        </thead>
                        <tbody>
                        @foreach($data as $value)
                            <tr>
                                <td>{{$value -> Id}}</td>
                                <td>{{$value -> FrageBezeichnung}}</td>
                                <td>{{$value -> Kapitel}}</td>
                                <td>{{$value -> richtigeAntwort}}</td>
                                <td>{{$value -> falscheAntwort}}</td>
                                <td>{{$value -> richtigeRate}}</td>
                            </tr>
                        @endforeach                   
                        </tbody>                                           
                    </table>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        $(document).ready( function () {
            $('#statisticforteacher').DataTable();
        });
    </script>
@endsection

那里有什么问题？css和js的顺序错了吗？

标签： javascriptjquerycsslaraveldatatables

解决方案

推荐阅读