Getting Started with DataTables [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed last year.

Improve this question

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!

are your .js files getting loaded? Are you seeing any errors in your console? — wirey00
– wirey00, Commented Dec 5, 2012 at 21:55
Checkout the path of js files, if your htm exists in the same root folder of the downloaded example...jquery and datatables script src should be "media/js/jquery.js" i.e., without "/" in the start. — Sunny
– Sunny, Commented Dec 5, 2012 at 22:06

Tivie · Accepted Answer · 2012-12-05 22:21:30Z

5

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.

answered Dec 5, 2012 at 22:21

Tivie

18.9k5 gold badges62 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhargav Rao · Accepted Answer · 2018-03-11 10:00:38Z

1

Check whether jQuery is loaded first. Then check whether dataTables assets are working. you can check that with an alert function Instead of using @import within your internal stylesheet, prefer using

<link rel="stylesheet" type="text/css" href="filepath/style.css">

In my blog, you can see steps and other options to use Datatables.

edited Mar 11, 2018 at 10:00

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Mar 11, 2018 at 9:59

Creative Technocrayts

172 bronze badges

Comments

Tayyeb · Accepted Answer · 2021-05-26 20:30:56Z

0

you have to add one attribut : " defer " to the script.

<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>

answered May 26, 2021 at 20:30

Tayyeb

1471 silver badge7 bronze badges

Collectives™ on Stack Overflow

Getting Started with DataTables [closed]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related