Initializing Datatables with PHP

Question

I am using PHP to generate both the HTML and JS for a set of datatables which each need to have a separate initialization so I can filter different tables separately. As far as I can tell, my code is generating properly, but it appears that my Javascript is not running properly because I do not get any table initialization, and I get a "TypeError: 'undefined' is not a function (evaluating '$('#datatable_0').datatable')" error in the log.

Here is a shortened version of my PHP code ($schedule_options is just an array of times like 9:00 - 10:30 am):

<script src="./js/jquery.dataTables.min.js"></script>
<script src="./js/TableTools.min.js"></script>
<script src="./js/ZeroClipboard.js"></script>
<script type="text/javascript" src="./js/check_in.js.php"></script>
<?php
    $counter = 0;
    foreach($schedule_options as $option)
    {
        echo '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatable" id="datatable_' . $counter . '">
            <thead>
                <tr>
                  <th>ID</th>
                  <th>Student Name</th>
                  <th>Nickname</th>
                  <th>User Name</th>
                  <th>Season / Year</th>
                  <th>Age</th>
                  <th>Level</th>
                  <th>Class Time</th>
                  <th>Instructor</th>
                  <th>Size</th>
                  <th>Comments</th>
                </tr>
              </thead>
        </table>';
        $counter++; 
    }

And here is the JS file check_in.js.php:

<?php
    Header("content-type: application/x-javascript");       

echo '$(document).ready(function() {';
$counter = 0;
foreach($schedule_options as $option)
{
    echo 'var datatable_' . $counter . ' = $(\'#datatable_' . $counter . '\').datatable({
        "sDom": "<\'row-fluid\'<\'span6\'T><\'span6\'f>r>t<\'row-fluid\'<\'span6\'i><\'span6\'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "./datatables/students_table.php",
        "fnDrawCallback" : function() {
             $("[rel=popover]").popover();
        },
        "oTableTools": 
        {
            "sRowSelect": "single",
            "sSwfPath": "./includes/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "csv",
                "xls",
                {
                    "sExtends": "pdf",
                    "sTitle": "HSS Students",
                    "sFileName": "HSS Students.pdf",
                    "sPdfMessage": "Season: ",
                    "sPdfOrientation": "landscape"
                },
                "print"]
        }
    });
    ';
    $counter++;
}

Thanks for your help. I believe that the main problem I'm having is due to the order of initialization of Javascript or something. I can post full generated code (HTML and JS) if that would help.

Are you sure you've included jQuery itself? The error message appears to indicate that $ is undefined. — ithcy
– ithcy, Commented Jan 11, 2013 at 16:02
Yeah, JQuery is included in a <script> tag higher up in the main file (I forgot to copy that down). Do I need to include it in check_in.js.php as well? — user1886266
– user1886266, Commented Jan 11, 2013 at 16:14

ithcy · Accepted Answer · 2013-01-11 16:17:45Z

1

Try changing .datatable(...) to .dataTable(...).

JS is case-sensitive :)

answered Jan 11, 2013 at 16:17

ithcy

5,5892 gold badges26 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Initializing Datatables with PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related