私は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)を投稿することができます。