在 jQuery 数据表中指定固定的列宽 [英] Specifying a fixed column width in jQuery Datatables

查看：28
本文介绍了在 jQuery 数据表中指定固定的列宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试为 jQuery 数据表中的几列指定固定宽度.我试图通过数据表文档中指定的列定义来实现这一点，但列和列标题仍然获得自动调整大小.

这是我一直在使用的 jsFiddle:jsFiddle

JavaScript:

var table = $('#example2').DataTable({标签索引":8，"dom": '<"fcstTableWrapper"t>lp',bFilter":假，bAutoWidth":假，数据": []，列定义":[{"class": '细节控制',可订购":假，数据":空，"默认内容": '',目标":0},{目标":1}，{目标":2，"width": "60px"},{目标":3，"width": "1100px"},{目标":4}，{"目标": "dlySlsFcstDay"},{"目标": "dlySlsFcstWkTtl","width": "60px"}],命令": [[1, '升序']]});

HTML:

<table id="example2" class="display" cellpacing="0" width="100%" ><头><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>供应商</th>--><!--<th>Origin ID</th>--><!--<th>目的地</th>--><!--<th>Vendor Part Nbr</th>--><!--<th>SKU</th>--><!--<th>周一</th>--><!--<th>周二</th>--><!--<th>星期三</th>--><!--<th>星期四</th>--><!--<th>周五</th>--><!--<第>周Ttl</th>--><th></th><th>供应商</th><th>Origin ID</th><th style="width: 200px">Vendor Part Nbr</th><th>SKU</th><!-- 第一周--><th class="dlySlsFcstDay" >Mon</th><th class="dlySlsFcstDay" >周二</th><th class="dlySlsFcstDay" >周三</th><th class="dlySlsFcstDay" >Thu</th><th class="dlySlsFcstDay" >Fri</th><th class="dlySlsFcstDay" >周六</th><th class="dlySlsFcstDay" >Sun</th><th class="dlySlsFcstWkTtl" >Week Ttl</th><!-- 第二周--><th class="dlySlsFcstDay" >Mon</th><th class="dlySlsFcstDay" >周二</th><th class="dlySlsFcstDay" >周三</th><th class="dlySlsFcstDay" >Thu</th><th class="dlySlsFcstDay" >Fri</th><th class="dlySlsFcstDay" >周六</th><th class="dlySlsFcstDay" >Sun</th><th class="dlySlsFcstWkTtl" >Week Ttl</th><!-- 第三周--><th class="dlySlsFcstDay" >Mon</th><th class="dlySlsFcstDay" >周二</th><th class="dlySlsFcstDay" >周三</th><th class="dlySlsFcstDay" >Thu</th><th class="dlySlsFcstDay" >Fri</th><th class="dlySlsFcstDay" >周六</th><th class="dlySlsFcstDay" >Sun</th><th class="dlySlsFcstWkTtl" >Week Ttl</th><!-- 第四周也是最后一周--><th class="dlySlsFcstDay" >Mon</th><th class="dlySlsFcstDay" >周二</th><th class="dlySlsFcstDay" >周三</th><th class="dlySlsFcstDay" >Thu</th><th class="dlySlsFcstDay" >Fri</th><th class="dlySlsFcstDay" >周六</th><th class="dlySlsFcstDay" >Sun</th><th class="dlySlsFcstWkTtl" >Week Ttl</th></tr></thead><脚>

当我检查实时代码时，我可以看到我在列定义中指定的宽度作为样式属性添加到列中，但它与列的实际宽度不匹配.

解决方案

这不是 DataTables 的问题.请参阅如何确定列宽.基于这个算法，我看到了以下两种解决方案.

解决方案 1

自己计算表格宽度并进行相应设置.

#example {宽度:3562px；}

在此处查看现场示例:http://jsfiddle.net/cdog/jsf6cg6L/.

解决方案 2

设置每个单元格的最小内容宽度(MCW)并让用户代理确定列宽.

为此，将类添加到目标列以便能够对其进行样式设置:

var table = $('#example').DataTable({标签索引:8，dom: '<"fcstTableWrapper"t>lp',b过滤器:假，bAutoWidth: 假，数据: []，列定义:[{类:'细节控制'，可订购:假，数据:空，默认内容:''，目标:0}, {目标:1}, {类:'col-2'，目标:2}, {类:'col-3'，目标:3}, {目标:4}, {目标:'dlySlsFcstDay'}, {目标:'dlySlsFcstWkTtl'}],顺序:[[1, 'asc']]});

然后为每个类设置所需的最小宽度属性值:

.col-2,.dlySlsFcstWkTtl {最小宽度:60px；}.col-3 {最小宽度:1100px；}

在此处查看现场示例:http://jsfiddle.net/cdog/hag7Lpm5/.

I'm trying to specify a fixed width for a few columns in a jQuery datatable. I've attempted to accomplish this via the column definitions specified in the datatables documentation, but the column and column header still get auto-sized.

Here's the jsFiddle I've been working with: jsFiddle

JavaScript:

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']
        ]
    });

HTML:

<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>

When I inspect the live code, I can see that the width I'm specifying in the column definition is getting added to the column as a style attribute, but it doesn't match the actual width of the column.

解决方案

This is not a DataTables issue. See how column widths are determined. Based on this algorithm I see the following two solutions.

Solution 1

Calculate yourself the table width and set it accordingly.

#example {
  width: 3562px;
}

See live example here: http://jsfiddle.net/cdog/jsf6cg6L/.

Solution 2

Set the minimum content width (MCW) of each cell and let the user agent to determine the column widths.

To do this, add classes to the target columns to be able to style them:

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']]
});

Then set the desired value of the minimum width property for each class:

.col-2,
.dlySlsFcstWkTtl {
  min-width: 60px;
}

.col-3 {
  min-width: 1100px;
}

See live example here: http://jsfiddle.net/cdog/hag7Lpm5/.

这篇关于在 jQuery 数据表中指定固定的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆