0

请帮助使用 JSON 数据源创建数据表（jQuery Javascript 库的插件）。

我的 JSON 请求如下所示：

<?php
$con = mysql_connect("localhost","user","password");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("accounting", $con);

$sth = mysql_query("SELECT DATE_FORMAT(date,'%Y-%b') AS EventDate, sum(ksi2k), sum(hepspec), sum(cpu_used), sum(elapsed_ksi2k), sum(elapsed_hepspec), sum(elapsed_cpu_used), sum(jobs) FROM accounting where date like '2012%' and site like 'UA-KNU' group by year(date), month(date)");
$rows = array();

while($r = mysql_fetch_assoc($sth)){
    $rows[] = $r;

}

echo json_encode($rows);

mysql_close($con);

JSON 结果如下所示：

[{"EventDate":"2012","sum(ksi2k)":"54","sum(hepspec)":"216","sum(cpu_used)":"34","sum(elapsed_ksi2k)":"334","sum(elapsed_hepspec)":"1336","sum(elapsed_cpu_used)":"209","sum(jobs)":"6964"},{"EventDate":"2012","sum(ksi2k)":"71","sum(hepspec)":"284","sum(cpu_used)":"44","sum(elapsed_ksi2k)":"275","sum(elapsed_hepspec)":"1100","sum(elapsed_cpu_used)":"173","sum(jobs)":"5794"},{"EventDate":"2012","sum(ksi2k)":"29","sum(hepspec)":"116","sum(cpu_used)":"17","sum(elapsed_ksi2k)":"317","sum(elapsed_hepspec)":"1268","sum(elapsed_cpu_used)":"198","sum(jobs)":"4376"}]

我用“JSON Validator”对其进行了测试，它是有效的：

[
    {
        "EventDate": "2012-Jan",
        "sum(ksi2k)": "54",
        "sum(hepspec)": "216",
        "sum(cpu_used)": "34",
        "sum(elapsed_ksi2k)": "334",
        "sum(elapsed_hepspec)": "1336",
        "sum(elapsed_cpu_used)": "209",
        "sum(jobs)": "6964"
    },
    {
        "EventDate": "2012-Feb",
        "sum(ksi2k)": "71",
        "sum(hepspec)": "284",
        "sum(cpu_used)": "44",
        "sum(elapsed_ksi2k)": "275",
        "sum(elapsed_hepspec)": "1100",
        "sum(elapsed_cpu_used)": "173",
        "sum(jobs)": "5794"
    },
    {
        "EventDate": "2012-Mar",
        "sum(ksi2k)": "29",
        "sum(hepspec)": "116",
        "sum(cpu_used)": "17",
        "sum(elapsed_ksi2k)": "317",
        "sum(elapsed_hepspec)": "1268",
        "sum(elapsed_cpu_used)": "198",
        "sum(jobs)": "4376"
    }

]

我的 HTML，DataTables 默认启用了大多数功能：

<!DOCTYPE html>
<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <link rel="shortcut icon" type="image/ico" href="" />
            <title>Overview Accounting</title>
            <style type="text/css" title="currentStyle">
            @import "data/portal.css";
            @import "data/datatables/media/css/demo_table.css";
            </style>
            <script type="text/javascript" language="javascript" src="data/datatables/media/js/jquery.js"></script>
            <script type="text/javascript" language="javascript" src="data/datatables/media/js/jquery.dataTables.js"></script>
            <script type="text/javascript" charset="utf-8">
                    $(document).ready(function(){
                        $('#example').dataTable({
                            "sAjaxSource": "json/json_table_overview_cluster_progress_chronicles_2013.php",
                            "sAjaxDataProp": "",
                            "aoColumns": [
                            { "mData": "EventDate" },
                            { "mData": "sum(ksi2k)" },
                            { "mData": "sum(hepspec)" },
                            { "mData": "sum(cpu_used)" },
                            { "mData": "sum(elapsed_ksi2k)" },
                            { "mData": "sum(elapsed_hepspec)" },
                            { "mData": "sum(elapsed_cpu_used)" },
                            { "mData": "sum(jobs)" }
                            ]

                        });
                    })
            </script>

        </head>
    <body id="dt_example" class="ex_highlight_row">
        <div id="container">
            <div id="dynamic">
                <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">

                    <thead>
                    <tr>
                        <th width="5%">EventDate</th>
                        <th width="15%">Norm.CPU.time kSI2K hours</th>
                        <th width="17%">Norm.CPU.time kHSPEC06 hours</th>
                        <th width="14%">Total CPU time used hours</th>
                        <th width="15%">Elapsed.time kSI2K hours</th>
                        <th width="17%">Elapsed.time kHSPEC06 hours</th>
                        <th width="14%">Total CPU elapsed time hours</th>
                        <th width="3%">Task</th>
                    </tr>
                </thead>

                <tfoot>
                        <tr>
                            <th>EventDate</th>
                            <th>Norm.CPU.time kSI2K hours</th>
                            <th>Norm.CPU.time kHSPEC06 hours</th>
                            <th>Total CPU time used hours</th>
                            <th>Elap.time kSI2K hours</th>
                            <th>Elap.time kHSPEC06 hours</th>
                            <th>Total CPU elapsed time hours</th>
                            <th>Task</th>
                        </tr>
                </tfoot>

                </table>
            </div>
            <div class="spacer"></div>
        </div>
    </body>
</html>

当您用表格刷新页面时，浏览器会出现错误，然后您会看到没有数据的表格。错误消息的文本：

DataTables 警告（表 id = 'example'）：从第 0 行的数据源请求未知参数 '0'

我将非常感谢您的帮助

4

2 回答 2

1

尝试将您的数组放在 aaData 节点中，相信它需要

 /*
     * Output
     */
    $output = array(        
        "aaData" => array()
    );

    while ( $aRow = mysql_fetch_array( $rResult ) )
    {
        $row = array();
        for ( $i=0 ; $i<count($aColumns) ; $i++ )
        {
            if ( $aColumns[$i] != ' ' )
            {
                /* General output */
                $row[] = $aRow[ $aColumns[$i] ];
            }
        }
        $output['aaData'][] = $row;
    }

    echo json_encode( $output );
于 2013-06-17T19:55:46.463 回答
0

如果您使用的是旧版本的 DataTables。mData 在 1.9.4 中引入。在使用它的 1.9.0 中，它被称为 mDataProp。只需尝试更改：mData to mDataProp

于 2013-06-17T14:27:01.737 回答