用新数据更新数据

Question

所以我有一个PHP脚本来查询数据库，并输出JSON。该查询类似于

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

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

$.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);
});

我想要做的是，当用户选择一年时，它用当年创建的所有单个对象更新Datatable。这将需要新的列。这是我的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();
});

在初始化之后。这是正确地重新加载表。但是，我需要更改查询。我尝试为aoData和$selectedYear使用David的代码，但是我不知道足够多的PHP来实现我想做的事情。另一件事是，在下降也有一个所有的选择。因此，当用户第一次选择一年时，它将完全更改表。但是，它需要能够回到原始表中的年份列表中。

我尝试将select语句放入<form>中，如下所示

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

并在PHP文件中使用$selectedValue = $_POST['value'];将选定的值用作变量。然后，我尝试使用一个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"
}

Answer 1

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

查看一下服务器端的文档

另外，回到您的问题，您有许多回调可以与可数据一起使用来完成这一任务。首先也是最重要的：

fnServerParams(aoData)

这是用来在每次数据表对新数据提出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查询中使用它来将结果限制在该年。

另一个非常有用的datatable函数是fnDraw()。这将强制datatable在datatable对象上被调用时进行更新，并随之发送任何更改的参数。

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

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