Twitter Bootstrap Question posted in

DataTables' Bootstrap Not showing in Laravel – Twitter bootstrap

I want to use Datatable’s Bootstrap for advance search in laravel.But it’s not showing in my required page.

Here is my app.blade.php code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Todo App</title>

    <link href="{{asset('/css/app.css')}}" rel="stylesheet">

    <!-- Fonts -->
    <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Laravel</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/">Todo Application</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    @if (Auth::guest())
                        <li><a href="/auth/login">Login</a></li>
                        <li><a href="/auth/register">Register</a></li>
                    @else
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/auth/logout">Logout</a></li>
                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
    @if(count($errors)>0)
        <div class="alert alert-danger">
            <strong>Whoops!</strong> Enter Valid Input</br>
            <ul>
                @foreach($errors->all() as $error)
                <li>{{$error}}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if(Session::has('success'))
    <div class="alert alert-success">
            {{Session::get('success')}}
    </div>
    @endif
    @yield('content')

    <!-- Scripts -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js</script>
</body>
</html>

And here is my home.blade.php where I want to use Datatables for searching:

@extends('app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12 ">
        <div class="col-lg-12"> 
            <div  class="col-lg-6">
            <form action="" method="POST" class="form-inline">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="form-group">
                    <input type="text" name="name" class="form-control" placeholder="Enter a task name"></br>
                    </br>
                    <input type="submit" class="btn btn-primary" value="Save">

                </div>
            </form>
        </div>

            </div> 



            <h3> Todo Application </h3>
            <table  class="table table-striped table-bordered"  id="example">

                <tr>
                    <td>Serial No</td>
                    <td>Task Name</td>
                    <td>Status</td>
                    <td>Action</td>
                </tr>
                <?php $i=1; ?>
                @foreach($data as $row)

                    <tr>
                        <td>{{$i}}</td>
                        <td>{{$row->name }}</td>
                        <td>{{$row->status}}</td>
                        <td>
                            <a href="{{route('getEditRoute',$row->id)}}" class="btn btn-warning">Edit</a>
                            <form action="{{route('postDeleteRoute',$row->id)}}" method="POST" style="display:inline;" 
                            onsubmit="if(confirm('Are you sure?')) {return true} else {return false};">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="submit" class="btn btn-danger" value="Delete">
                            </form>

                        </td>
                    </tr>
                <?php $i++; ?>

                @endforeach

            </table>
            <?php echo $data->render(); ?>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
@endsection
Tags:

2

Answers


  1. 0

    Change the below line:

    <script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js</script>

    as

    <script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>

    from app.blade.php code.

    add one more section in your layout as

    @yield('page-script','') before </body> tag.

    And rewrite your script code from home.blade.php as 

    @section('page-script')
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable();
    $( "#datepicker" ).datepicker();
} );
</script>
@stop

    Section is closed by @stop

    Login or Signup to reply.
  2. 0

    Place all our script in master blade which in your case app.blade.php.
    Then use @yield(‘script’)

    After that add partial view and add your script for initializing datatable

    @section('script')
    <script>
        $(document).ready(function() {
            $('#example').DataTable();

        } );

    </script>
    @endsection

    and finally don’t forget to add thead and tbody in your given table.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search