之前一直用对象来跑数据,现在数据是实时生成的,拼凑出来的数组数据,特此记录
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链接地址