我使用Jquery数据表构建了一个数据表,该数据表由Ajax以JSON格式从服务器动态加载数据。这是我的代码:
$.ajax({
type: 'POST',
url: "{{URL::to('/')}}/mynote_list",
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
dataType: 'json',
success: function(data) {
var dataSet = data.data;
mytable = $('#mynote_table').DataTable({
destroy: true,
paging: false,
searching: false,
ordering: true,
bInfo: false,
columnDefs: [
{ "width": "150px", "targets": [0] },
{ "width": "40px", "targets": [1] }
],
fixedColumns: true,
"data": dataSet,
"columns": [
{"data": "my_note"},
{ "data": "Link",
"mRender": function (data, type, full) {
return '<button type="button" class="fa fa-trash delete-button btn btn-flat" style="font-size:14px;color:red" id="'+full.id+'" ></button>';
}
},
],
"order": [
[1, 'asc']
]
});
}
});
但是结果列宽不是我要设置的。
Particuls| Action
=========+=============
AAAAA | Delete
---------+-------------
BBBBB | Delete
---------+-------------
CCCCC | Delete
---------|------------
如何解决此问题?
答案 0 :(得分:0)
您可以配置
columnDefs: [
{ width: 20, targets: 0 },
{ width: 100, targets: 1 }
],
引用https://datatables.net/extensions/fixedcolumns/examples/initialisation/size_fixed.html
var dataSet =
[
{id: 1, my_note: "ABBBBBBBBBB", Link: "B"},
{id: 2, my_note: "A", Link: "B"}];
mytable = $('#mynote_table').DataTable({
destroy: true,
paging: false,
searching: false,
ordering: true,
bInfo: false,
columnDefs: [
{ width: 20, targets: 0 },
{ width: 100, targets: 1 }
],
fixedColumns: true,
"data": dataSet,
"columns": [
{"data": "my_note"},
{ "data": "Link",
"mRender": function (data, type, full) {
return '<button type="button" class="fa fa-trash delete-button btn btn-flat" style="font-size:14px;color:red" id="'+full.id+'" ></button>';
}
},
],
"order": [
[1, 'asc']
]
});
table{
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed; // ***********add this
word-wrap:break-word; // ***********and this
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="mynote_table" class="display" style="width:100%">
<thead>
<tr>
<th>my_note</th>
<th>Link</th>
</tr>
</thead>
</table>