Laravel - bootstrap дата, когда фильтры не работают - PullRequest
Новая
       31

Laravel - bootstrap дата, когда фильтры не работают

0 голосов
/ 08 мая 2020

Итак, у меня есть этот проект laravel, и в настоящее время я делаю панель администратора. Я купил и загрузил шаблон для администратора под названием Webmin с сайта themeforest. Прямо сейчас у меня проблема с моей таблицей данных 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>

Я включил все bootstrap файлы в свой клинок, но все еще не показываю эти фильтры. Думаю, проблема в этом <table id="datatable" class="table table-striped table-bordered p-0">, а именно в этом 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>

1 Ответ

0 голосов
/ 08 мая 2020

Вы забыли включить datatable. css и datatable. js, а затем вы должны инициализировать свой datatable. 

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

В вашем случае вы можете инициализировать datatable в своем custom. js файле.

Подробнее о datatable на 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>

Попробуйте этот код ...

...