Datatables 在jQuery数据表中指定固定列宽
我试图为jQuery数据表中的几列指定固定宽度。我试图通过中指定的列定义来实现这一点,但列和列标题仍然会自动调整大小 以下是我一直在使用的JSFIDLE: JavaScript:Datatables 在jQuery数据表中指定固定列宽,datatables,html-table,jquery-datatables,css-tables,Datatables,Html Table,Jquery Datatables,Css Tables,我试图为jQuery数据表中的几列指定固定宽度。我试图通过中指定的列定义来实现这一点,但列和列标题仍然会自动调整大小 以下是我一直在使用的JSFIDLE: JavaScript: var table = $('#example2').DataTable({ "tabIndex": 8, "dom": '<"fcstTableWrapper"t>lp', "bFilter": false, "bAutoWidth": fa
var table = $('#example2').DataTable({
"tabIndex": 8,
"dom": '<"fcstTableWrapper"t>lp',
"bFilter": false,
"bAutoWidth": false,
"data": [],
"columnDefs": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"targets": 0
},
{
"targets": 1},
{
"targets": 2,
"width": "60px"},
{
"targets": 3,
"width": "1100px"},
{
"targets": 4},
{
"targets": "dlySlsFcstDay"},
{
"targets": "dlySlsFcstWkTtl",
"width": "60px"}
],
"order": [
[1, 'asc']
]
});
<div class="forecastTableDiv">
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="5"></th>
<th class="slsFiscalWk" colspan="8">201424</th>
<th class="slsFiscalWk" colspan="8">201425</th>
<th class="slsFiscalWk" colspan="8">201426</th>
<th class="slsFiscalWk" colspan="8">201427</th>
</tr>
<tr>
<!--<th></th>-->
<!--<th>Vendor</th>-->
<!--<th>Origin ID</th>-->
<!--<th>Destination</th>-->
<!--<th>Vendor Part Nbr</th>-->
<!--<th>SKU</th>-->
<!--<th>Mon</th>-->
<!--<th>Tue</th>-->
<!--<th>Wed</th>-->
<!--<th>Thu</th>-->
<!--<th>Fri</th>-->
<!--<th>Week Ttl</th>-->
<th></th>
<th>Vendor</th>
<th>Origin ID</th>
<th style="width: 200px">Vendor Part Nbr</th>
<th>SKU</th>
<!-- First week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Second week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Third week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Fourth and final week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
</tr>
</thead>
<tfoot>
</table>
</div>
var table=$('#示例2')。数据表({
“tabIndex”:8,
“dom”:“lp”,
“bFilter”:错误,
“bAutoWidth”:假,
“数据”:[],
“columnDefs”:[
{
“类”:“详细信息控制”,
“可订购”:错误,
“数据”:空,
“defaultContent”:“”,
“目标”:0
},
{
“目标”:1},
{
"目标":二,,
“宽度”:“60px”},
{
"目标":三,,
“宽度”:“1100px”},
{
“目标”:4},
{
“目标”:“dlySlsFcstDay”},
{
“目标”:“DLYSLSFCSTWKTL”,
“宽度”:“60px”}
],
“命令”:[
[1,‘asc’]
]
});
HTML:
var table = $('#example2').DataTable({
"tabIndex": 8,
"dom": '<"fcstTableWrapper"t>lp',
"bFilter": false,
"bAutoWidth": false,
"data": [],
"columnDefs": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"targets": 0
},
{
"targets": 1},
{
"targets": 2,
"width": "60px"},
{
"targets": 3,
"width": "1100px"},
{
"targets": 4},
{
"targets": "dlySlsFcstDay"},
{
"targets": "dlySlsFcstWkTtl",
"width": "60px"}
],
"order": [
[1, 'asc']
]
});
<div class="forecastTableDiv">
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="5"></th>
<th class="slsFiscalWk" colspan="8">201424</th>
<th class="slsFiscalWk" colspan="8">201425</th>
<th class="slsFiscalWk" colspan="8">201426</th>
<th class="slsFiscalWk" colspan="8">201427</th>
</tr>
<tr>
<!--<th></th>-->
<!--<th>Vendor</th>-->
<!--<th>Origin ID</th>-->
<!--<th>Destination</th>-->
<!--<th>Vendor Part Nbr</th>-->
<!--<th>SKU</th>-->
<!--<th>Mon</th>-->
<!--<th>Tue</th>-->
<!--<th>Wed</th>-->
<!--<th>Thu</th>-->
<!--<th>Fri</th>-->
<!--<th>Week Ttl</th>-->
<th></th>
<th>Vendor</th>
<th>Origin ID</th>
<th style="width: 200px">Vendor Part Nbr</th>
<th>SKU</th>
<!-- First week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Second week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Third week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
<!-- Fourth and final week -->
<th class="dlySlsFcstDay" >Mon</th>
<th class="dlySlsFcstDay" >Tue</th>
<th class="dlySlsFcstDay" >Wed</th>
<th class="dlySlsFcstDay" >Thu</th>
<th class="dlySlsFcstDay" >Fri</th>
<th class="dlySlsFcstDay" >Sat</th>
<th class="dlySlsFcstDay" >Sun</th>
<th class="dlySlsFcstWkTtl" >Week Ttl</th>
</tr>
</thead>
<tfoot>
</table>
</div>
201424
201425
201426
201427
小贩
原始ID
供应商零件编号
SKU
周一
星期二
结婚
清华大学
星期五
坐
太阳
周Ttl
周一
星期二
结婚
清华大学
星期五
坐
太阳
周Ttl
周一
星期二
结婚
清华大学
星期五
坐
太阳
周Ttl
周一
星期二
结婚
清华大学
星期五
坐
太阳
周Ttl
当我检查实时代码时,我可以看到我在列定义中指定的宽度作为样式属性添加到列中,但它与列的实际宽度不匹配。这不是DataTables的问题。看见基于此算法,我看到以下两种解决方案 解决方案1 自己计算桌子的宽度,并进行相应的设置
#example {
width: 3562px;
}
请参见此处的实时示例:
解决方案2
设置每个单元格的最小内容宽度(MCW),并让用户代理确定列宽
为此,请将类添加到目标列,以便能够设置它们的样式:
var table = $('#example').DataTable({
tabIndex: 8,
dom: '<"fcstTableWrapper"t>lp',
bFilter: false,
bAutoWidth: false,
data: [],
columnDefs: [{
class: 'details-control',
orderable: false,
data: null,
defaultContent: '',
targets: 0
}, {
targets: 1
}, {
class: 'col-2',
targets: 2
}, {
class: 'col-3',
targets: 3
}, {
targets: 4
}, {
targets: 'dlySlsFcstDay'
}, {
targets: 'dlySlsFcstWkTtl'
}],
order: [[1, 'asc']]
});
请参见此处的实时示例:。:
$('#example').DataTable({ //four column table
autoWidth: false, //step 1
columnDefs: [
{ width: '300px', targets: 0 }, //step 2, column 1 out of 4
{ width: '300px', targets: 1 }, //step 2, column 2 out of 4
{ width: '300px', targets: 2 } //step 2, column 3 out of 4
]
});
#example { width: 1200px };
因此,您将看到前3列的宽度为300px,最后一列的宽度为150px(需要额外调整)
最后但并非最不重要的一点:当单元格包含过长(>300px,无空格)字时,固定列大小300px不会阻止您。因此,您必须记住,所有单词必须小于列的固定边。对于
标记或其css类或css id,请添加以下样式:
`table{
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed;
word-wrap:break-word;
}`
设置固定列宽可能是一件非常痛苦的事情。下面的解决方案工作得很好
{宽度:250,目标:1,类:“someClass”,
呈现:函数(数据、类型、行){
如果(类型==‘显示’){
返回`${data}`;
}
返回数据;
}
}
$(“#示例”).DataTable({autoWidth:false,//首先关闭autoWidth,然后