DaTables php 使用数组展示数据

之前一直用对象来跑数据,现在数据是实时生成的,拼凑出来的数组数据,特此记录

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链接地址