Sunil Rawat
Sunil Rawat

Reputation: 709

DataTable Not working in Laravel 5.3

I have listed all users in my view Like follows:

class UsersController extends Controller
{
    public function index(){
        $user = User::orderBy('id', 'DESC')->get();
        return view('admin.users.index',['users'=>$user]);
    }
}

//view is

<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">

<table class="table table-striped table-bordered" width="100%"   cellspacing="0" id="table">
   //Loop here
</table>


<script type="text/javascript">
    $(document).ready(function() {
        $('#table').DataTable();
    } );
</script>

It's Giving me error:

TypeError: $(...).DataTable is not a function

I did most of R&D but did not find it working. Please assist what could be the Issue in this.

Is there anything I need to do with this, because I already used it same in symfony2 it is working there.

Even I followed this as well.

Thank Advance

Upvotes: 3

Views: 7093

Answers (3)

Jehad Ahmad Jaghoub
Jehad Ahmad Jaghoub

Reputation: 1383

$(document).ready(function() {
    $('#example').DataTable();
} );
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

 
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">

 

  

     <table id="example" class="display" cellspacing="0" width="100%">

               <thead>
         <tr>
            <th >Name</th>
            <th >Email</th>
            <th >Joined</th>
             <th colspan="2">Action1</th>

        </tr>
        <tr>
        <th >Name</th>
            <th >Email</th>
            <th >Joined</th>
            <th>edit</th>
            <th>go</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <th> Name </th>
            <th> Email </th>
            <th> Joined </th>
            <th>Action1</th>
                <th>Action2</th>

        </tr>
    </tfoot>
    <tbody>
        <tr>
<td>a</td> 
<td>b</td> 
<td>c</td>
<td>d</td> 
<td>e</td>   </tr>
          </tbody>
            </table>

this is a working example i think problem in script include its need http and table the table colspan usage According to dataTable https://datatables.net/examples/basic_init/complex_header.html

Upvotes: 0

scottevans93
scottevans93

Reputation: 1079

Try closing your script tags properly :)

<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

Upvotes: 1

Andy Wijaya
Andy Wijaya

Reputation: 157

<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"</script>

Please complete the script tag.

Upvotes: 1

Related Questions