Laravel-过滤器不起作用的引导数据表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Laravel-过滤器不起作用的引导数据表相关的知识，希望对你有一定的参考价值。
所以我有这个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>
我在刀片中包含了所有引导文件，但仍未显示这些过滤器。我认为问题出在<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>
答案
您忘了包含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>
以上是关于Laravel-过滤器不起作用的引导数据表的主要内容，如果未能解决你的问题，请参考以下文章
jQuery DataTable中的引导日期选择器在Laravel应用程序中不起作用