用PHP初始化数据表


Initializing Datatables with PHP

我使用PHP为一组数据表生成HTML和JS,每个数据表都需要单独的初始化,这样我就可以分别过滤不同的表。据我所知,我的代码正在正确生成,但似乎我的Javascript没有正常运行,因为我没有得到任何表初始化,我得到一个"TypeError: 'undefined'不是一个函数(评估'$('#datatable_0').datatable')"在日志中的错误。

这是我的PHP代码的缩短版本($schedule_options只是一个数组的时间,如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++; 
    }
这里是JS文件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++;
}

谢谢你的帮助。我认为我遇到的主要问题是由于Javascript的初始化顺序或其他东西。如果有帮助的话,我可以发布完整的生成代码(HTML和JS)。

尝试将.datatable(...)更改为.dataTable(...)

JS是区分大小写的:)