Initialization of Datatables for jQuery Returning Blank Page

Question

Using the initialization guide from Datatables.net, no matter what changes I've tried the page is returned empty. I've tried hosting the files rather than using the CDN, updating to the most recent versions of jQuery, and searching for this but haven't seen anyone else with this error.

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">

<!-- Initialising DataTables -->
<?
$(document).ready(function(){
$('#tableDataset').DataTable();
});
?>

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

<!-- jQuery -->
   <script src="/assets/plugins/dashboard/jquery-1.10.2.min.js" type="text/javascript"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

I get a 500 error when I include the  php — anonameuser22
– anonameuser22, Commented Sep 25, 2015 at 21:15

kosmos · Accepted Answer · 2015-09-25 21:17:31Z

2

You have wrapped the jQuery onready function inside php open-end tags. Try changing it to the proper tag <script></script>. Also, if you load your javascript files at the bottom of the page, you have to append your functions after them.

Changing your current code to this one solves the problem (jsFiddle):

<!-- jQuery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

<!-- Initialising DataTables -->
<script type="text/javascript">
    $(document).ready(function(){
        $('#tableDataset').DataTable();
    });
</script>

answered Sep 25, 2015 at 21:17

kosmos

4,2881 gold badge21 silver badges38 bronze badges

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

1 Comment

anonameuser22 Over a year ago

Thank you @kmsdev! That's where the issue was created.

Diptox · Accepted Answer · 2015-09-25 21:18:55Z

Change your code to this and try again

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
        <script src="/assets/plugins/dashboard/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
    </head>
    <body>
       <table id="tableDataset" class="display">
           <thead>
               <tr>
                   <th>Column 1</th>
                   <th>Column 2</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>Row 1 Data 1</td>
                   <td>Row 1 Data 2</td>
               </tr>
               <tr>
                   <td>Row 2 Data 1</td>
                   <td>Row 2 Data 2</td>
               </tr>
           </tbody>
       </table>

        <script type="text/javascript">
            $(document).ready(function()
            {
                $('#tableDataset').DataTable();
            });
        </script>

    </body>
</html>

Collectives™ on Stack Overflow

Initialization of Datatables for jQuery Returning Blank Page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related