[英]Laravel 5.5 - Create Column Headers for DataTables from JSON Object Array
以下代码段非常适合显示带有静态列标题的结果集。 有没有一种方法可以使用现有的JSON数组为DataTables创建列标题?
[view.blade.php](HTML)
<div class="row">
<div class="col-lg-6">
<div class="card mb-3">
<div class="card-header"><i class="fa fa-user"></i> Users</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-striped table-compact" width="100%" id="dataTable" cellspacing="0"></table>
</div>
</div>
</div>
</div>
</div>
[view.blade.php](JavaScript)
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable( {
"scrollX": true,
"scrollY": '55vh',
"scrollCollapse": true,
"paging": false,
dom: 'ft',
"aaData": {!! collect($users)->toJson() !!},
// Make this dynamic (Pull this from the Json above)
"aoColumns": [
{ "sTitle": "Name", "mData": "name" },
{ "sTitle": "Email", "mData": "email" },
]
} );
} );
</script>
[从数据库返回的示例JSON对象/数组]
array:1 [
0 => {#195
+"id": 1
+"name": "Josh_W"
+"email": "user@email.com"
+"group": "Admin"
+"level": 5
+"password": "PASSWORD"
+"remember_token": null
+"created_at": "2017-10-12 14:42:38"
+"updated_at": "2017-10-12 14:42:38"
}
]
看起来aoColumns
只是一个对象数组,因此您应该能够遍历JSON来构建它。 可能是这样的:
var json = {{ $json_var_from_controller }},
aoColumns = [];
for(var key in json[0]) {
aoColumns.push(
{"sTitle": key[0].toUpperCase() + key.slice(1), "mData": key }
);
}
然后,当您创建数据表时,请使用"aoColumns": aoColumns
您可以尝试这样的事情( un-tested
)
@php ($userData = collect($users))
@php ($rowKeys = array_keys($userData->first(['name', 'email'])->toArray()))
<script type="text/javascript">
$(document).ready(function()
{
function ucwords(str) {
return (str + '')
.replace(/^(.)|\s+(.)/g, function ($1) {
return $1.toUpperCase()
})
}
function getCols() {
var rowKeys = {!! json_encode($rowKeys) !!}
var results = [];
for (var rowKey in rowKeys) {
results.push({
sTitle: ucwords(rowKey.replace(/_/g, ' ')),
mData: rowKey
});
}
return results;
}
$('#dataTable').DataTable( {
"scrollX": true,
"scrollY": '55vh',
"scrollCollapse": true,
"paging": false,
dom: 'ft',
"aaData": {!! $userData->toJson() !!},
"aoColumns": getCols()
} );
} );
</script>
如果要从json获得所有列,请使用以下命令:
@php ($rowKeys = array_keys($userData->first()->toArray()))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.