之前一直用物件來跑資料,現在資料是實時生成的,拼湊出來的陣列資料,特此記錄

php 程式碼有一個處理好的二位陣列

$result = json_encode($result);

將result 傳遞到頁面隱藏域

<input type="hidden" id="result" value="{{$result}}"/>

頁面程式碼

    <link rel="stylesheet" href="{{ asset('dataTables.bootstrap.css') }}">

    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('dataTables.bootstrap.min.js') }}"></script>
    <script>
        var result = $('#result').val();
        var data = JSON.parse(result);
        //然後 DataTables 這樣初始化：
        $('#example').DataTable( {
            data: data, //載入資料
            language : {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json" //漢化
            },
            //以下是統計資料求和
            drawCallback: function () {
                api = this.api();
                $("#sum-0").html( api.column(1).data().reduce(function(a, b) {
                    return (parseFloat(a)*1000 + parseFloat(b)*1000)/1000;
                }, 0) );
                $("#sum-1").html( api.column(2).data().reduce(function(a, b) {
                    return (parseFloat(a)*1000 + parseFloat(b)*1000)/1000;
                }, 0) );
                $("#sum-2").html( api.column(3).data().reduce(function(a, b) {
                    return (parseFloat(a)*1000 + parseFloat(b)*1000)/1000;
                }, 0) );
                $("#sum-3").html( api.column(4).data().reduce(function(a, b) {
                    return ($("#sum-1").html()/$("#sum-0").html()*100).toFixed(2)+'%';
                }, 0) );
            },
        } );

    </script>

    <input type="hidden" id="result" value="{{$result}}"/>
    <div class="box">
        <div class="box-body table-responsive">
            <table id="example" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>城市名稱</th>
                    <th>今日需求總量</th>
                    <th>已分配總量</th>
                    <th>今日剩餘需求總量</th>
                    <th>完成百分比</th>
                    <th>警告</th>
                    @if(!$d1&&!$d2)
                        <th>檢視明細</th>
                        <th>總剩餘需求總量</th>
                    @endif
                </tr>
                <tr>
                    <th>合計</th>
                    <th id="sum-0">0</th>
                    <th id="sum-1">0</th>
                    <th id="sum-2">0</th>
                    <th id="sum-3">0</th>
                    <th></th>
                    @if(!$d1&&!$d2)
                    <th></th>
                    <th></th>
                    @endif
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

 

參考地址: datatables連結地址