Getting Started with DataTables

jquery html css datatables

21,119

Are the js and css files actually being loaded? You can debug that with firebug on firefox or in development tools in webkit browser. (just right click in the table and select "Inspect Element")

Also, DataTables is available on the Microsoft Ajax CDN. Same as jQuery

You can try to use the external link and see if it works. like this:

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

Also note that using external libraries is a good practice.

21,119

Author by

mike

Updated on May 27, 2021

Comments

mike about 3 years

I'm trying to get DataTables implemented on website form. I was experiencing some difficulties with that so I took a step back and tried to implement DataTables on a very basic table. The table I used came straight off of http://www.datatables.net/usage/. I then called in files I thought were needed but I'm still failing to get Datatables to work on even this basic of a table. What am I missing? Here's the "practice" code:

 <script type="text/javascript" charset="utf-8" src="/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/media/js/jquery.dataTables.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="/media/src/DataTables.js"></script>-->

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
    $('#table').dataTable();
    } );
    </script> 
    <style type="text/css" title="currentStyle">
        @import "/media/css/jquery.dataTables.css";
    </style>
    <title>Untitled Document</title>

</head>


    <table id="table" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<body>
</body>
</html>

Thanks!