Question

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

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语句放在<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是最重要的一个。

查看server side here

的文档

除此之外，回到你的问题，你有许多回调可以与数据表一起使用来做这件事。首先是：

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查询中使用它将结果限制为该年。

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

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

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

使用新数据更新数据表

1 个答案: