Включить Javascript

Я хочу включить в свое представление некоторый код javascript, но понятия не имею, как это сделать. Я безуспешно искал это, нет четких указаний на это.

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

Но где мне это делать ?? нет html головы ...

Я попробовал типичный

<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">&times;</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

Заранее спасибо.

Вы видите файл blade.php?

MGS 12.10.2018 20:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
119
3

Ответы 3

При этом до конца обзора, но внутри блока сечения. Если ваше представление является автономным файлом, который не расширяет никакие другие представления / макеты, например файл app.blade.php, игнорируйте блок раздела.

@section <!--this block assumes you're extending another file-->
  <your-html>
  
  </your-html>



  @push('scripts')
    <script src = "https://cdn.sample.js"></script>
    <script src = "https://cdn.sample.js"></script>
    <script src = "https://cdn.sample.js"></script>
    <script>
      //anyjscode
    </script>
  @endpush
@endsection

Привет попробуй с Laravel Collective

Как установить? здесь

Импортируйте файл js в файл blade:

{!! HTML::script('js/modulos/comun.js') !!}

И в вашем файле js напишите что-нибудь еще, например:

file.js

$(document).ready(function() {
      $('#example').DataTable( {
          select: true
      } );
  } );  

Я думаю, вы можете добиться того, что вам нужно, включив отдельный yield () в свой файл шаблона в нижней части тега body:

     @yield('scripts')

На ваш взгляд, Blade попробуйте добавить:

@section('content')
    Your Content goes here…
@endsection

@section('scripts')
    <script type = "text/javascript">
    <script src = "https://cdn.sample.js"></script>
    <script>
       //anyjscode
     </script>
@endsection

Другие вопросы по теме