0

データベースにクエリを実行し、JSON を出力する PHP スクリプトがあります。クエリはそのようなものです

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 を知りません。もう 1 つのことは、ドロップダウンに [すべて] オプションもあるということです。したがって、ユーザーが最初に年を選択すると、テーブルが完全に変更されます。ただし、元のテーブルの年のリストに戻ることができる必要があります

<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、最も重要なものの 1 つです。

ここでサーバー側のドキュメントを見てください

さておき、質問に戻りますが、これを行うためにデータテーブルで使用できるコールバックがいくつかあります。何よりもまず:

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 クエリで使用して、結果をその年に限定できます。

もう 1 つの非常に便利なデータテーブル関数はfnDraw()です。これにより、データテーブルオブジェクトで呼び出されたときにデータテーブルが強制的に更新され、変更されたパラメーターが送信されます。

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

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