CODEWITHSUNDEEP
jquerytwitter-bootstraplaraveldatatable
Hola
Hola

Reputation: 2233

DataTables' Bootstrap Not showing in Laravel

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

Upvotes: 1

Views: 2786

Answers (2)

Md Rashedul Hoque Bhuiyan
Md Rashedul Hoque Bhuiyan

Reputation: 10631

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.

Upvotes: 1

Alankar More
Alankar More

Reputation: 1115

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

Upvotes: 0

Related Questions