如何添加jQuery数据库插件？

Question

I searched on DataTables and found some code to add dataTable but that is actually not working is their any different way to add JQuery Datatable Plugin?

I added cdn as below inside head tag. My code is as follows:

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"></script>

My table:

<table id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
    </tbody>
</table>
                `

and jQuery:

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

Answer 1

you should add

https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js

instead you added css twice

please read documentation

In addition to the above code, the following Javascript library files are loaded for use in this example:

code.jquery.com/jquery-1.12.3.js

https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js

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

 <link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <table id="example" class="display"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> </tbody> </table> 

Answer 2

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

You have missed the datatable js file you need add it:

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>