0

所以我有一个查询数据库并输出 JSON 的 PHP 脚本。查询是这样的

SELECT year AS 'label', SUM(size) AS 'value'
FROM db.dbo.table
GROUP BY year

这会将相应年份的每个项目的大小相加，并在数据表中显示所有年份的总和。我做了一个显示所有年份的下拉框，就像这样

$.getJSON('script.php', function(data){
    var html = '';
    var len = data.length;

    html += '<option value=' + 1 + '>All</option>';

    for (var i = 2; i< len; i++) {
        html += '<option value=' + i + '>' + data[i].label + '</option>';
    }

    $('select#list').append(html);
});

我想要做的是当用户选择一年时，它会使用该年制作的所有单个对象更新数据表。这将需要新的列。这是我的PHP。

<?php
$myServer = "server";
$myDB = "db";

$conn = sqlsrv_connect ($myServer, array('Database'=>$myDB));

$sql ="SELECT year AS 'label', SUM(size) AS 'value'
FROM db.dbo.table
GROUP BY year";

$data = sqlsrv_query ($conn, $sql);   
$result = array();   

do {
    while ($row = sqlsrv_fetch_array ($data, SQLSRV_FETCH_ASSOC)) {
        $result[] = $row;   
    }
} while (sqlsrv_next_result($data));

echo json_encode ($result);

sqlsrv_free_stmt ($data);
sqlsrv_close ($conn);
?>

这是我的初始化代码

var oTable = $('#chart').dataTable({
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": "script.php",
    "sAjaxDataProp": "",
    "aoColumns": [ 
        { "mData": "label", "sClass": "center" },
        { "mData": "value", "sClass": "center" }
    ],

    "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" }
        ]
    }
});

以及我的原始查询的 HTML（大小相加）

<table id="chart" style="clear: both">
    <thead>
        <tr>
            <th>year</th>
            <th>size</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td colspan="3" class="dataTables_empty">Loading data from server</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>year</th>
            <th>size</th>
        </tr>
</tfoot>
</table>

我遇到了一些问题。这些列被编码到 HTML 页面中，我不知道如何更改它们。我也不知道如何更新 PHP 脚本上的查询，以便在他们单击选项时显示新信息。我假设我将不得不使用fnReloadAjax，但我实际上并不知道。

有人可以帮我吗？谢谢！

我在初始化之前添加了 fnReloadAjax 的代码，并添加了

$(document).on('change', '#list', function (event) {
    oTable.fnReloadAjax();
});

初始化后。这是正确地重新加载表。但是，我需要更改查询。我尝试使用 David 的 aoData 和 $selectedYear 代码，但我不知道足够的 PHP 来让它做我想做的事。另一件事是下拉菜单中还有一个 All 选项。所以当用户第一次选择年份时，它会彻底改变表。但是，它需要能够回到原始表中的年份列表

我试图将 select 语句放在 a 中<form>，就像这样

<form method="post" style="display: inline-block">
    <select name="value" id="list"></select>
</form>

并$selectedValue = $_POST['value'];在 PHP 文件中使用以将所选值用作变量。然后我尝试使用 if 语句来选择要使用的查询（如果全部，则查询 1，否则，查询 2）。但是，这不起作用

if ($selectedValue == "All") {
    $sql ="SELECT year AS 'label', SUM(size) AS 'value'
       FROM db.dbo.table
       GROUP BY year";
} else {
    $sql ="SELECT *
       FROM db.dbo.table"
}
4

1 回答 1

0

查看您的数据表初始化，您缺少一些非常重要的初始化属性，这些属性对于数据表的平滑服务器端操作至关重要，这是bServerSide最重要的属性之一。

在这里查看服务器端的文档

另外，回到您的问题，您有许多可与数据表一起使用的回调来执行此操作。首先也是最重要的：

fnServerParams(aoData)

这用于在每次 datatables 对新数据发出 ajax 请求时向服务器发送额外的数据。

var oTable = $("#chart").dataTable({
    bServerSide : true,
    fnServerParams : function(aoData) {
        // Push an object to the aoData array to make it available server side
        aoData.push({"name" : "year", "value" : $('#list')[0].value});
    }
}

在 script.php 中

$selectedYear = $_REQUEST['year'];

您现在可以在 SQL 查询中使用它来将结果限制在那一年。

另一个非常有用的数据表函数是fnDraw(). 这会在数据表对象上调用数据表时强制更新数据表，并随其发送任何更改的参数。

var oTable = $('#chart').dataTable({ ... });

$(document).on('change', '#list', function(event) {
    oTable.fnDraw();
});
于 2013-07-09T19:25:04.190 回答