CODEWITHSUNDEEP
jqueryhtmlcssdatatablesbootstrap-4
Mohamed BEN HALIMA
Mohamed BEN HALIMA

Reputation: 13

How to work with jQuery datatables plugins?

I'm working on a project which contains datatables so I want to work with datatables plugins from datables.net. I followed all the instructions but I didn't get a result (search input and entries label are not appearing).

I think that there is a problem on links or references.

Here is my code - please I need your help on this:

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
    <title>nchlh tekhdem</title>

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>
<body>
    <div class="container mb-3 mt-3" >
        <table class="table table-striped table-bordered mydatatable " style="width: 100%"  >
            <thead>
                <tr>
                  <th>ID</th>
                  <th>Product</th>
                  <th>Detected in Version</th>
                  <th>Type</th>
                  <th>Status</th>
                  <th>Prio</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                  <th>ID</th>
                  <th>Product</th>
                  <th>Detected in Version</th>
                  <th>Type</th>
                  <th>Status</th>
                  <th>Prio</th>
                </tr>
            </tfoot>
        </table>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.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>
        $('.mydatatable').Datatable() ; 
    </script>
</body>
</html>

Upvotes: 1

Views: 120

Answers (3)

Imranmadbar
Imranmadbar

Reputation: 5470

Every thins just fine, you make a mistake with data table Object name:

  $('.mydatatable').DataTable();

Not

  $('.mydatatable').Datatable() ;

Better used Id: 

 <table id="mydatatable "  class="table table-striped table-bordered mydatatable " style="width: 100%"  >

<script>

    $(document).ready( function () {
     $('#mydatatable').DataTable();
   });

</script>

Upvotes: 0

Lajwat Kumar
Lajwat Kumar

Reputation: 304

Kindly replace the js code as below. 

$(document).ready(function() { $('.mydatatable').DataTable();});

you are missing document.ready function.

document.ready function is executed once all the js files are loaded. Kindly note that, after all files are loaded then you can executes its functions.

Thanks, happy coding!

Upvotes: 1

Guoyuan Zhao
Guoyuan Zhao

Reputation: 76

Your javascript code is wrong, it should be

        $(document).ready( function () {
            $('.mydatatable').Datatable() ; 
        });

Upvotes: 0

Related Questions