我正在使用 Datatables.js,并且正在使用 PHP 文件中的 JSON 填充表。我目前的设置是这样的:
PHP 文件生成 JSON > JS 文件通过链接到以前的 PHP 文件来初始化表格 > PHP 文件显示图形(带有 HTML。它是 PHP,所以我可以添加页眉/页脚)。
问题是我有 30 个图表。30 个用于 JSON 的 PHP 文件 + 30 个用于初始化的 JS 文件和 30 个用于显示图形的 PHP。现在,这已经是一个荒谬的文件数量(在我看来),但我需要添加更多表。
在我现在拥有的每个表中,我将有一个带有链接的新列,该链接将同一行中另一列的值传递到 URL。例如,在数据表的一列中,值为 1983。另一列中的链接是/query.php?value=1983
。
我想要做的是将此变量传递给生成 JSON 的 PHP 文件,以便我可以使用该变量更改查询。这将是 PHP 代码
<?php
$myServer = "server";
$myDB = "database";
$conn = sqlsrv_connect ($myServer, array('Database'=>$myDB));
$value = $_GET['value'];
$sql ="SELECT year, value
FROM database.dbo.table
WHERE year = $value";
$data = sqlsrv_query ($conn, $sql);
$result = array();
do {
while ($row = sqlsrv_fetch_array ($data, SQLSRV_FETCH_ASSOC)) {
$result[] = $row;
}
} while (sqlsrv_next_result($data));
$json = json_encode ($result);
sqlsrv_free_stmt ($data);
sqlsrv_close ($conn);
?>
这会正确生成 JSON。但是,当用户单击表中的链接时,我想将他们带到一个包含新表的新页面。但是,按照我的方式,链接将我带到生成的 JSON。所以我的解决方案是合并生成 JSON 的 PHP 和显示表格的 PHP 文件,就像这样
<?php //Insert the code I posted above ?>
<!DOCTYPE html>
<html>
<head>
<!-- Included files, title, etc... -->
</head>
<body>
<?php include '../common/header.inc' ?>
<div class="container">
<table id="chart" style="clear: both">
<thead>
</thead>
<tbody>
<tr>
<td colspan="3" class="dataTables_empty">There doesn't seem to be anything here!</td>
</tr>
</tbody>
</table>
</div>
<?php include '../common/footer.inc'?>
<script src="/js/main.js"></script>
<script src="table.js"></script> <!-- This is the Datatable initialization -->
</body>
</html>
初始化将是这样
$(document).ready(function () {
var header = [ // This puts the data in the right column
{ "sTitle": "Year", "mData": "label", "sClass": "center" },
{ "sTitle": "Length", "mData": "value", "sClass": "center" }
]
var oTable = $('#chart').dataTable({
"bProcessing": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "query.php", // Loads the JSON script
"sAjaxDataProp": "",
"aoColumns": header,
"sDom": 'T<"clear">Rlfrtip',
"oTableTools": {
"sSwfPath": "/media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": ["select_all", "select_none",
{
"sExtends": "collection",
"sButtonText": "Export Selected Rows",
"aButtons": [
{"sExtends": "copy", "bSelectedOnly": true, "mColumns": [0, 1] },
{ "sExtends": "csv", "bSelectedOnly": true, "mColumns": [0, 1], "bFooter": false },
{ "sExtends": "xls", "bSelectedOnly": true, "mColumns": [0, 1], "bFooter": false },
{ "sExtends": "pdf", "bSelectedOnly": true, "mColumns": [0, 1], "bFooter": false },
]
},
{ "sExtends": "print", "sButtonText": "Print View" }
]
}
});
});
这样做的问题是初始化正在读取 JSON和它下面的 HTML 代码。
所以基本上我要问的是,有什么方法可以将 JSON 保存在一个变量中,以便我可以链接到 JS 代码中的 JUST THE JSON?这甚至可能吗?有没有更好的方法来做到这一点?(这不需要疯狂的 PHP 脚本,因为我不太了解它)。
解决方案:这是约翰建议后的我的代码。我也不得不更改sAjaxSource
为aaData
. 但现在它起作用了!
<?php
$myServer = "server";
$myDB = "database";
$conn = sqlsrv_connect ($myServer, array('Database'=>$myDB));
$value = $_GET['value'];
$sql ="SELECT year, value
FROM database.dbo.table
WHERE year = $value";
$data = sqlsrv_query ($conn, $sql);
$result = array();
do {
while ($row = sqlsrv_fetch_array ($data, SQLSRV_FETCH_ASSOC)) {
$result[] = $row;
}
} while (sqlsrv_next_result($data));
$json = json_encode ($result);
sqlsrv_free_stmt ($data);
sqlsrv_close ($conn);
?>
<!DOCTYPE html>
<html>
<head>
<!-- Included files, title, etc... -->
</head>
<body>
<?php include '../common/header.inc' ?>
<div class="container">
<table id="chart" style="clear: both">
<thead>
</thead>
<tbody>
<tr>
<td colspan="3" class="dataTables_empty">There doesn't seem to be anything here!</td>
</tr>
</tbody>
</table>
</div>
<?php include '../common/footer.inc'?>
<script src="/js/main.js"></script>
<script type="text/javacript">
$(document).ready(function () {
var json = <?php echo $json ?>;
var header = [ // This puts the data in the right column
{ "sTitle": "Year", "mData": "label", "sClass": "center" },
{ "sTitle": "Length", "mData": "value", "sClass": "center" }
]
var oTable = $('#chart').dataTable({
"bProcessing": true,
"sPaginationType": "full_numbers",
"aaData": json, // Loads the JSON script
"sAjaxDataProp": "",
"aoColumns": header,
"sDom": 'T<"clear">Rlfrtip',
"oTableTools": {
"sSwfPath": "/media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": ["select_all", "select_none",
{
"sExtends": "collection",
"sButtonText": "Export Selected Rows",
"aButtons": [
{"sExtends": "copy", "bSelectedOnly": true, "mColumns": [0, 1] },
{ "sExtends": "csv", "bSelectedOnly": true, "mColumns": [0, 1], "bFooter": false },
{ "sExtends": "xls", "bSelectedOnly": true, "mColumns": [0, 1], "bFooter": false },
{ "sExtends": "pdf", "bSelectedOnly": true, "mColumns": [0, 1], "bFooter": false },
]
},
{ "sExtends": "print", "sButtonText": "Print View" }
]
}
});
});
</script>
</body>
</html>