Laravel - 过滤器不起作用的引导数据表

【问题标题】：Laravel - bootstrap datatable with filters not workingLaravel - 过滤器不起作用的引导数据表
【发布时间】：2020-08-23 20:31:20
【问题描述】：

所以我有这个 laravel 项目，我目前正在制作我的管理面板仪表板。我从 themeforest 购买并下载了名为 Webmin 的管理员模板。现在我的数据 HTML 表有问题，当我将该 HTML 代码从模板复制粘贴到我的 laravel 刀片时，表中的过滤器根本不显示。 这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template" />
    <meta name="author" content="potenzaglobalsolutions.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" />

    <!-- Font -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Poppins:200,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900">

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin/style.css') }}" />

</head>

<body>

    <div class="wrapper">

        <!--=================================
 preloader -->

        <div id="pre-loader">
            <img src="images/pre-loader/loader-01.svg" alt="">
        </div>

        <!--=================================
 preloader -->

        @include('include.admin.header')

        <!--=================================
 Main content -->

        <div class="container-fluid">
            <div class="row">
                @extends('layouts.admin.sidebar')

                @section('sidebar')

                @endsection

                <!--=================================
 Main content -->

                <!--=================================
wrapper -->

                <div class="content-wrapper">
                    <div class="page-title">
                        <div class="row">
                            <div class="col-sm-6">
                                <h4 class="mb-0">Data HTML Table </h4>
                            </div>
                            <div class="col-sm-6">
                                <ol class="breadcrumb pt-0 pr-0 float-left float-sm-right ">
                                    <li class="breadcrumb-item"><a href="#" class="default-color">Home</a></li>
                                    <li class="breadcrumb-item active">Data HTML Table </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- main body -->
                    <div class="row">
                        <div class="col-xl-12 mb-30">
                            <div class="card card-statistics h-100">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="datatable" class="table table-striped table-bordered p-0">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th>Salary</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Tiger Nixon</td>
                                                    <td>System Architect</td>
                                                    <td>Edinburgh</td>
                                                    <td>61</td>
                                                    <td>2011/04/25</td>
                                                    <td>$320,800</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th>Salary</th>
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--=================================
 wrapper -->

                    @extends('layouts.admin.footer')

                    @section('footer')

                    @endsection

                    <!--=================================
 jquery -->
                    EDITED START: 
                    <script src="{{ asset('js/admin/bootstrap-datatables/dataTables.bootstrap4.min.js') }}"></script>

                    <script src="{{ asset('js/admin/bootstrap-datatables/jquery.dataTables.min.js') }}"></script>
                    EDITED FINISH

                    <!-- jquery -->
                    <script src="{{ asset('js/admin/jquery-3.3.1.min.js') }}"></script>

                    <!-- plugins-jquery -->
                    <script src="{{ asset('js/admin/plugins-jquery.js') }}"></script>

                    <!-- plugin_path -->
                    <script>
                        var plugin_path = 'js/';
                    </script>

                    <!-- chart -->
                    <script src="{{ asset('js/admin/chart-init.js') }}"></script>

                    <!-- calendar -->
                    <script src="{{ asset('js/admin/calendar.init.js') }}"></script>

                    <!-- charts sparkline -->
                    <script src="{{ asset('js/admin/sparkline.init.js') }}"></script>

                    <!-- charts morris -->
                    <script src="{{ asset('js/admin/morris.init.js') }}"></script>

                    <!-- datepicker -->
                    <script src="{{ asset('js/admin/datepicker.js') }}"></script>

                    <!-- sweetalert2 -->
                    <script src="{{ asset('js/admin/sweetalert2.js') }}"></script>

                    <!-- toastr -->
                    <script src="{{ asset('js/admin/toastr.js') }}"></script>

                    <!-- validation -->
                    <script src="{{ asset('js/admin/validation.js') }}"></script>

                    <!-- lobilist -->
                    <script src="{{ asset('js/admin/lobilist.js') }}"></script>

                    <!-- custom -->
                    <script src="{{ asset('js/admin/custom.js') }}"></script>

</body>

</html>

我在刀片中包含了所有引导文件，但仍然没有显示这些过滤器。我认为问题出在这个&lt;table id="datatable" class="table table-striped table-bordered p-0"&gt; 特别是在这个id="datatable" 中。我认为它找不到这个id 或类似的东西。我做错了什么？

UPDATED CODE

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template" />
    <meta name="author" content="potenzaglobalsolutions.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" />

    <!-- Font -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Poppins:200,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900">

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin/style.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin/plugins/dataTables.bootstrap4.css') }}" />
    UPDATED:
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js">
    </script>
</head>

<body>

    <div class="wrapper">

        <!--=================================
 preloader -->

        <div id="pre-loader">
            <img src="images/pre-loader/loader-01.svg" alt="">
        </div>

        <!--=================================
 preloader -->

        @include('include.admin.header')

        <!--=================================
 Main content -->

        <div class="container-fluid">
            <div class="row">
                @extends('layouts.admin.sidebar')

                @section('sidebar')

                @endsection

                <!--=================================
 Main content -->

                <!--=================================
wrapper -->

                <div class="content-wrapper">
                    <div class="page-title">
                        <div class="row">
                            <div class="col-sm-6">
                                <h4 class="mb-0">Data HTML Table </h4>
                            </div>
                            <div class="col-sm-6">
                                <ol class="breadcrumb pt-0 pr-0 float-left float-sm-right ">
                                    <li class="breadcrumb-item"><a href="#" class="default-color">Home</a></li>
                                    <li class="breadcrumb-item active">Data HTML Table </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- main body -->
                    <div class="row">
                        <div class="col-xl-12 mb-30">
                            <div class="card card-statistics h-100">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="datatable" class="table table-striped table-bordered p-0">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th>Salary</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Tiger Nixon</td>
                                                    <td>System Architect</td>
                                                    <td>Edinburgh</td>
                                                    <td>61</td>
                                                    <td>2011/04/25</td>
                                                    <td>$320,800</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th>Salary</th>
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--=================================
 wrapper -->

                    @extends('layouts.admin.footer')

                    @section('footer')

                    @endsection

                    <!--=================================
 jquery -->

                    <script>
                        $(document).ready( function () {
                            $('#datatable').DataTable();
                        } );
                    </script>
                    UPDATED:
                    <script type="text/javascript" charset="utf8"
                        src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js">
                        <script src="{{ asset('js/admin/bootstrap-datatables/dataTables.bootstrap4.min.js') }}">
                    </script>

                    <script src="{{ asset('js/admin/bootstrap-datatables/jquery.dataTables.min.js') }}"></script>
                    <!-- jquery -->
                    <script src="{{ asset('js/admin/jquery-3.3.1.min.js') }}"></script>

                    <!-- plugins-jquery -->
                    <script src="{{ asset('js/admin/plugins-jquery.js') }}"></script>

                    <!-- plugin_path -->
                    <script>
                        var plugin_path = 'js/';
                    </script>

                    <!-- chart -->
                    <script src="{{ asset('js/admin/chart-init.js') }}"></script>

                    <!-- calendar -->
                    <script src="{{ asset('js/admin/calendar.init.js') }}"></script>

                    <!-- charts sparkline -->
                    <script src="{{ asset('js/admin/sparkline.init.js') }}"></script>

                    <!-- charts morris -->
                    <script src="{{ asset('js/admin/morris.init.js') }}"></script>

                    <!-- datepicker -->
                    <script src="{{ asset('js/admin/datepicker.js') }}"></script>

                    <!-- sweetalert2 -->
                    <script src="{{ asset('js/admin/sweetalert2.js') }}"></script>

                    <!-- toastr -->
                    <script src="{{ asset('js/admin/toastr.js') }}"></script>

                    <!-- validation -->
                    <script src="{{ asset('js/admin/validation.js') }}"></script>

                    <!-- lobilist -->
                    <script src="{{ asset('js/admin/lobilist.js') }}"></script>

                    <!-- custom -->
                    <script src="{{ asset('js/admin/custom.js') }}"></script>

</body>

</html>

【问题讨论】：

  • 在哪里包含 datatable.js ？
  • @BCM 我编辑了我的代码，我包含了引导数据表 js 文件，但没有任何反应......

标签： php laravel bootstrap-4 datatable


【解决方案1】：

您忘记包含 datatable.css 和 datatable.js， 而且你必须初始化你的数据表。 

$(document).ready( function () {
    $('#datatable').DataTable();
} );

在您的情况下，您可以在 custom.js 文件中初始化数据表。

在https://datatables.net上阅读有关数据表的更多信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template" />
    <meta name="author" content="potenzaglobalsolutions.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Webmin - Bootstrap 4 & Angular 5 Admin Dashboard Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" />

    <!-- Font -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Poppins:200,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900">

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin/style.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin/plugins/dataTables.bootstrap4.css') }}" />

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">

    </script>
</head>

<body>

    <div class="wrapper">

        <!--=================================
 preloader -->

        <div id="pre-loader">
            <img src="images/pre-loader/loader-01.svg" alt="">
        </div>

        <!--=================================
 preloader -->

        @include('include.admin.header')

        <!--=================================
 Main content -->

        <div class="container-fluid">
            <div class="row">
                @extends('layouts.admin.sidebar')

                @section('sidebar')

                @endsection

                <!--=================================
 Main content -->

                <!--=================================
wrapper -->

                <div class="content-wrapper">
                    <div class="page-title">
                        <div class="row">
                            <div class="col-sm-6">
                                <h4 class="mb-0">Data HTML Table </h4>
                            </div>
                            <div class="col-sm-6">
                                <ol class="breadcrumb pt-0 pr-0 float-left float-sm-right ">
                                    <li class="breadcrumb-item"><a href="#" class="default-color">Home</a></li>
                                    <li class="breadcrumb-item active">Data HTML Table </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- main body -->
                    <div class="row">
                        <div class="col-xl-12 mb-30">
                            <div class="card card-statistics h-100">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="datatable" class="table table-striped table-bordered p-0">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th>Salary</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Tiger Nixon</td>
                                                    <td>System Architect</td>
                                                    <td>Edinburgh</td>
                                                    <td>61</td>
                                                    <td>2011/04/25</td>
                                                    <td>$320,800</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th>Salary</th>
                                                </tr>
                                            </tfoot>

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--=================================
 wrapper -->

                    @extends('layouts.admin.footer')

                    @section('footer')

                    @endsection

                    <!--=================================
 jquery -->


                    <!-- jquery -->
                    <script src="{{ asset('js/admin/jquery-3.3.1.min.js') }}"></script>

                    <!-- datatable -->
                    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js">

                    <script>
                        $(document).ready( function () {
                            $('#datatable').DataTable();
                        } );
                    </script>

                    <!-- plugins-jquery -->
                    <script src="{{ asset('js/admin/plugins-jquery.js') }}"></script>

                    <!-- plugin_path -->
                    <script>
                        var plugin_path = 'js/';
                    </script>

                    <!-- chart -->
                    <script src="{{ asset('js/admin/chart-init.js') }}"></script>

                    <!-- calendar -->
                    <script src="{{ asset('js/admin/calendar.init.js') }}"></script>

                    <!-- charts sparkline -->
                    <script src="{{ asset('js/admin/sparkline.init.js') }}"></script>

                    <!-- charts morris -->
                    <script src="{{ asset('js/admin/morris.init.js') }}"></script>

                    <!-- datepicker -->
                    <script src="{{ asset('js/admin/datepicker.js') }}"></script>

                    <!-- sweetalert2 -->
                    <script src="{{ asset('js/admin/sweetalert2.js') }}"></script>

                    <!-- toastr -->
                    <script src="{{ asset('js/admin/toastr.js') }}"></script>

                    <!-- validation -->
                    <script src="{{ asset('js/admin/validation.js') }}"></script>

                    <!-- lobilist -->
                    <script src="{{ asset('js/admin/lobilist.js') }}"></script>

                    <!-- custom -->
                    <script src="{{ asset('js/admin/custom.js') }}"></script>

</body>

</html>

试试这个代码...

【讨论】：

  • 好的，我从链接中包含了这两个文件&lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"&gt; &lt;script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"&gt;&lt;/script&gt;。我包含了您的脚本代码，但仍然没有任何反应。我在刀片中包含了link 和script 文件
  • 你必须在设置 jQuery.js 之后设置 dataTables.js，而不是之前。
  • 我在我的 jQuery.js 文件之后设置了 dataTables.js，但没有再次发生......
  • 我试过你的代码，复制粘贴它，但什么也没发生。我不知道为什么，所有文件都包含在内。
猜你喜欢
  • 1970-01-01
  • 2016-02-13
  • 2021-04-12
  • 1970-01-01
  • 2014-08-09
  • 1970-01-01
  • 1970-01-01
  • 2018-01-02
  • 2022-01-24
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode