Search bar / other features of DataTables is not showing when I toggle the table using a button..!

Search bar / other features of DataTables is not showing when I toggle the table using a button..!

VenoMVenoM Posts: 17Questions: 9Answers: 0
edited November 2019 in Free community support

So I'm trying to toggle the table by using a button and when the table is displayed, functionalities like search bar / order-by / pagination is basically missing. This is my code:

> <script>
>         $(document).ready(function() {
>             
>     $('#myTable').wrap('<div id="hide" style="display:none"/>');
> 
>     $('#vis').one( 'click', function () {
>         $('#hide').css( 'display', 'block' );
>     } );
>         });
> 
> </script>

and this is my table:

 > <button class="btn btn-danger float-right" id="vis">Get All The Students</button>
 >  <table id="myTable" class="table table-striped table-bordered">
>                             <thead>
>                         <tr>
>                         <th>First Name</th>
>                         <th>Last Name</th>
>                         <th>Username</th>
>                         <th>Email</th>
>                         <th>Roll Number</th>
>                         <th>Class</th>
>                         <th>Action</th>
>                         </tr>
>                             </thead>
>                             <tbody>
>                             @foreach($users as $user)
>                         <tr>
>                             <td>{{ $user->fname }}</td>
>                             <td>{{ $user->lname }}</td>
>                             <td>{{ $user->name }}</td>
>                             <td>{{ $user->email }}</td>
>                             <td>{{ $user->rollno }}</td>
>                             <td>{{ $user->class }}</td>
>                         <td class="btn-group">
>                         
>                         </td>
>                         </tr>
>                             @endforeach
>                             </tbody>
>                     </table>

The pagination/search works if I take out the lines where I'm setting it's visibility to none. Please let me know what I'm missing.

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

Answers

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    I copied your code in the first snippet here:
    http://live.datatables.net/nopifamu/1/edit

    It seems to work. Check your browser's console for errors. Please update my test case to show the issue or provide a link to your page so we can help debug the problem.

    Kevin

This discussion has been closed.