包括Javascript
包括Javascript
提问于 2018-10-13 01:27:45
我想在我的视图中包含一些javascript代码，但是不知道怎么做。我一直在寻找，但没有成功，没有明确的参考。
我想用bootstrap插入一些可选择的表，参考https://datatables.net/extensions/select/examples/styling/bootstrap4.html。
javascript是这样的
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} ); 表是这样的
<table id="example" class="table table-striped table-bordered" style="width:100%">
<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>
...他们说我必须包含这个javascript库
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js
https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js但是，我在哪里可以做到这一点？没有超文本标头..。
我试着用最好的
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
document.write(5 + 6);
</script>我应该如何启动代码，我假设它是在表加载时完成的，参考#example...
好的，我已经尝试了一些东西。我当然不想让你来解决我的问题，但是什么都没有起作用。我几乎包含了完整的代码。它必须像上面链接中的示例一样工作。我不知道laravel 5.5实际上是不是与bootstrap 4一起工作，而不是包含在其中的一个因素，我不知道实际上它是否默认与jquery一起工作。
@extends('layouts.app')
@section('content')
@guest
@else
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Venta</a>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-1 d-block bg-light sidebar">
<div class="sidebar-sticky">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Acciones</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<span data-feather="home"></span>
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="/gymmgr/public/notas/{{ $nota->idNota }}/edit">
<span data-feather="shopping-cart"></span>
Editar
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
onclick="
var result = confirm ('¿Estas seguro de que deseas borrar el grupo?');
if (result)
{
event.preventDefault();
document.getElementById('delete-form').submit();
}
"
>
<span data-feather="users"></span>
Borrar
</a>
<form id="delete-form" action="{{ route('notas.store')}}"
method="POST" style="display: none;">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="/gymmgr/public/notas/">
<span data-feather="users"></span>
Regresar
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h5">Nota de venta</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Exportar</button>
</div>
</div>
</div>
<div class="border-bottom">
<div class="col-md-8 order-md-1 ">
<form class="needs-validation" novalidate>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="true"> Pagada
</label>
</div>
<div class="col-md-12">
<label for="usuario">Usuario</label>
<select class="custom-select d-block w-100" id="usuario">
<option value="">Selecciona...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<p>
<div class="form-group">
<label for="strNota">Comentarios</label>
<textarea class="form-control" rows="3" id="strNota" name="text"></textarea>
</div>
</p>
<p>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</p>
</form>
</div>
</div>
</main>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h5">Partidas</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-horario">+</button>
<div class="modal fade" id="create-horario" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Nueva partida</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('notas.store') }}" method="post">
{{ csrf_field() }}
<div class="modal-body">
<input type="hidden" id="groupID" name="groupID" value= {{ $nota->idNota }} >
<div class="form-group">
<label for="intDia" class="col-form-label">Día de la semana</label>
<select name="intDia" class="form-control">
<option value="1" selected> Lunes</option>
<option value="2" > Martes</option>
<option value="3" > Miércoles</option>
<option value="4" > Jueves</option>
<option value="5" > Viernes</option>
<option value="6" > Sábado</option>
<option value="7" > Domingo</option>
</select>
</div>
<div class="form-group">
<div style="width:50%;float:left;display:inline-block;">
<label for="timHoraInicio" class="col-form-label">Hora de inicio</label>
<input type="time" id="timHoraInicio" name="timHoraInicio" min="9:00" max="18:00" value="09:00" >
</div>
<div align="right">
<label for="timHoraFin" class="col-form-label">Hora de fin</label>
<input type="time" id="timHoraFin" name="timHoraFin" min="9:00" max="18:00" value="10:00">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary" id="submitForm">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<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>
</main>
</div>
</div>
</div>
</div>
@endguest
@push('scripts')
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<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.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script>
//anyjscode
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
</script>
@endpush
@endsection提前谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52784402
复制相关文章
相似问题