Fatal编程技术网

Twitter bootstrap 列宽在DataTables引导中不起作用

twitter-bootstrap datatables

Twitter bootstrap 列宽在DataTables引导中不起作用,twitter-bootstrap,datatables,width,Twitter Bootstrap,Datatables,Width,我正在使用以下代码设置DataTable的列宽。在部分页面加载期间，宽度看起来是正确的，当完全加载时，宽度是关闭的 <script> $(document).ready(function () { $("#memberGrid").dataTable({ "dom": 'T<"clear">lfrtip', "tableTools": { "sSwfPath": "..

我正在使用以下代码设置DataTable的列宽。在部分页面加载期间，宽度看起来是正确的，当完全加载时，宽度是关闭的

<script>
    $(document).ready(function () {
        $("#memberGrid").dataTable({
            "dom": 'T<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "../../Content/swf/copy_csv_xls.swf"
            },
            "destroy": true,
            "info": true,
            "bLengthChange": false,
            "bFilter": false,
            "bAutoWidth": false,
            "aoColumns": [{ "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "20%" }, { "sWidth": "10%" }, { "sWidth": "20%" }, { "sWidth": "10%" }]
        });
    });
</script>


$（文档）.ready（函数（）{
$（“#成员网格”）.dataTable({
“dom”：“Tlfrtip”，
“表格工具”：{
“sSwfPath”：“../../Content/swf/copy_csv_xls.swf”
},
“毁灭”：真的，
“信息”：正确，
“bLengthChange”：false，
“bFilter”：错误，
“bAutoWidth”：假，
“aoColumns”：[{“sWidth”：“20%”，{“sWidth”：“20%”，{“sWidth”：“20%”，{“sWidth”：“10%”，{“sWidth”：“20%”，}，{“sWidth”：“10%”]
});
});
表标记

<table class="group-grid table table-hover table-bordered table-responsive zebra-striped" id="memberGrid">
                <thead class="tablehead">
                    <tr>
                        <th style="width: 20%">Name</th>
                        <th style="width: 20%">Room with</th>
                        <th style="width: 20%">Extensions</th>
                        <th style="width: 10%">Travel Protection</th>
                        <th style="width: 20%">Flying from</th>
                        <th style="width: 10%">Balance</th>
                    </tr>
                </thead>
                <tbody>
            <tr class="tablerows">
                <td style="width: 20%"><%# Eval("Travelers") %></td>
                <td style="width: 20%"><%# Eval("RoomMates")%></td>
                <td style="width: 20%"><%# Eval("Extensions")%></td>
                <td style="width: 10%"><%# (string) Eval("HasTpp") == "Y"? "Yes" : "No"%></td>
                <td style="width: 20%"><%# Eval("Airport")%></td>
                <td style="width: 10%">$<%# Eval("Balance")%></td>
            </tr>
            </tbody>
                    </table>


名称
房间
扩展
旅行保护
飞离
平衡
$
很高兴看到您的表在运行，但我有一种强烈的感觉，这纯粹是内容宽度的问题。显示为
的元素：表格单元格将尝试展开，以便在不包装的情况下尽可能多地显示其内容。例如，标题为“旅行保护”的
的宽度，您将其定义为10%——您需要一个相当宽的表格来显示10%以内的“旅行保护”

因此，否决
的默认
换行
和
换行
设置，如下所示：


table.dataTable thead tr th{
单词包装：打断单词；
单词break：打破一切；
}


一种演示（如前所述，无法向您的表IRL证明）->

最好的办法是调整
的内容，使其适合硬编码的宽度

如果是
的内容变得太大（通常是一个looong不易碎的单词）：


table.dataTable tbody tr td{
单词包装：打断单词；
单词break：打破一切；
}



顺便说一句：您不需要在
和
中定义硬编码宽度<代码>
自动从相应的
获取宽度

定义datatable属性时使用以下脚本：

“列”：[
{“宽度”：“25px”}，
{“宽度”：“25px”}，
{“宽度”：“450px”}，
{“宽度”：“20px”}，
{“宽度”：“20px”}，
{“宽度”：“20px”}，
{“宽度”：“20px”}，
{“宽度”：“20px”}
],
对于自动调整，请明确添加此选项

var MyDatatable = $("#memberGrid").dataTable();


MyDatatable.columns.adjust().draw();
设置列宽时，还需要设置：

autoWidth: false
…在数据表本身上

 oTableDetails = $('#tblUserDetails').dataTable({

   "autoWidth":false,
他在为我工作

var reCalculateLayoutDatatable = function(){
reCalculateLayoutDatatableYN = true;
setTimeout(function(){
  var tableHeaderWidth = 0;
  $("body").find("div.dataTables_scrollHeadInner table tr.row-header th").each(function() {
    var cols = 1;
    if(parseInt($(this).attr("colspan")) > 1) {
      cols = parseInt($(this).attr("colspan"));
    }
    tableHeaderWidth += parseInt($(this).attr("data-col-width")) + (15 * cols);
  });
  $("body").find("div").css("width","auto");
  $("body").find("table").css("width","auto");
  $("body").find("div.dataTables_scrollBody table").css("width",tableHeaderWidth + "px");
  $("body").find("div.dataTables_scrollHeadInner table").css("width",tableHeaderWidth + "px");
  $("body").find("th,td").each(function(){
    if($(this).attr("data-col-width") > 0){
      $(this).css("width",$(this).attr("data-col-width") +"px");
    }
  });
},50);
}
$( window ).resize(function() {
   if (reCalculateLayoutDatatableYN == true) {
     reCalculateLayoutDatatable();
   }
});
$( document ).ready(function() {
    reCalculateLayoutDatatable();
});
HTML:


管理番号
物件名
号室
管理区分
1234
物件1.
号室1.
管理区分
实际上，我不得不采取相反的方法删除autoWidth行（与autoWidth:true相同），并记住将所需的宽度与我的数据放在同一对象中：

"columns": [{ 'data': 'account.organization_Name', width: '120px' }]
如图所示：

唯一对我有效的方法是在列标题上设置一个内联
min width
：


裁判
使用者
组织
...
问题可能是由于列的数量太多，如果列太多，它似乎无法工作。尝试确定表的大小，例如：

style=“宽度：9000px”

通过此更改，我的列宽问题消失了

                <table id="tbl-PriceDiscrepancy" class="table table-condensed table-hover" style="width: 9000px">
                <thead class="btn-dark">
                    <tr>
                        <th colspan="8" style="text-align: center; background-color: indianred; padding-top: 4px">VIM</th>
                        <th colspan="19" style="text-align: center; background-color: darkslategrey; padding-top: 4px">MIRO</th>
                        <th colspan="12" style="text-align: center; background-color: cornflowerblue; padding-top: 4px">PURCHASING DOCUMENTS</th>
                        <th colspan="5" style="text-align: center; background-color: darkslateblue; padding-top: 4px">MIGO</th>
                    </tr>
                    <tr>
                        <th scope="col">Dp.Vim</th>
                        <th scope="col">Vim.Doc.Type</th>
                        <th scope="col">Completed</th>
                        <th scope="col">Curent.Agent</th>
                        <th scope="col">Multi.Agent</th>
                        <th scope="col">Current.Role</th>
                        <th scope="col">Vim.Block.Status</th>
                        <th scope="col">Vim.Block.Reason</th>

                        <th scope="col">Subsequent.Debit.Credit</th>
                        <th scope="col">Blocked.Due.Price</th>
                        <th scope="col">Payment.Block.Code</th>
                        <th scope="col">Miro.Doc.Num</th>
                        <th scope="col">Plant</th>
                        <th scope="col">Company.Code</th>
                        <th scope="col">Fiscal.Year</th>
                        <th scope="col">Document.Date</th>
                        <th scope="col">Posting.Date</th>
                        <th scope="col">Reference/NF</th>
                        <th scope="col">NF.Type</th>
                        <th scope="col">Vendor.Code</th>
                        <th scope="col">Vendor.Name</th>
                        <th scope="col">Miro.Total.Amount</th>
                        <th scope="col">Miro.Item.Amount</th>
                        <th scope="col">Tax.Amout</th>
                        <th scope="col">Currency</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Base.Unit</th>

                        <th scope="col">Contract.Number</th>
                        <th scope="col">Contract.Item.Number</th>
                        <th scope="col">Contract.Value</th>
                        <th scope="col">Contract.New.Value</th>
                        <th scope="col">Condition.Pricing.Unit</th>
                        <th scope="col">Purchasing.Document.Type</th>
                        <th scope="col">Purchasing.Document.Number</th>
                        <th scope="col">Purchasing.Document.Item</th>
                        <th scope="col">MatNr</th>
                        <th scope="col">Description</th>
                        <th scope="col">PO.Gross.Price</th>
                        <th scope="col">Purchase.Unit.Price</th>

                        <th scope="col">Migo.Document</th>
                        <th scope="col">Migo.Year</th>
                        <th scope="col">Migo.Amount</th>
                        <th scope="col">Migo.Quantity</th>
                        <th scope="col">Migo.Base.Unit</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>


    $('#tbl-PriceDiscrepancy').DataTable({
    "aaSorting": [[0, "desc"]],
    "lengthChange": true,
    "filter": true,
    "ordering": true,
    "info": true,
    "paging": true,
    lengthMenu: [5, 10, 15, 20, 25, 50, 100, 200],
    "iDisplayLength": _displayLenght,
    columnDefs: [{
        targets: 0,
        width: "200px"
    }, {
        targets: 1,
        width: "200px",
    }, {
        targets: 2,
        width: "500px",
        className: "centerCol"
    }]
});


维姆
米罗
采购文件
米戈
Dp.Vim
Vim.Doc.Type
完整的
科伦特探员
多智能体
当前角色
Vim.Block.Status
原因
借项，贷项
价格
支付代码
Miro.Doc.Num
种植
公司代码
财政年度
文件日期
过帐日期
参考/NF
NF.类型
供应商代码
供应商名称
总金额
米罗项目金额
税款
通货
量
基地单位
合同号
合同号
合同价值
合同价值
条件价格单位
采购.Document.Type
采购文件编号
采购.文件.项目
材料
描述
采购订单总价
购买单价
Migo.文件
米高，一年
Migo.金额
Migo.数量
米戈基地单位
美元（待定）

                <table id="tbl-PriceDiscrepancy" class="table table-condensed table-hover" style="width: 9000px">
                <thead class="btn-dark">
                    <tr>
                        <th colspan="8" style="text-align: center; background-color: indianred; padding-top: 4px">VIM</th>
                        <th colspan="19" style="text-align: center; background-color: darkslategrey; padding-top: 4px">MIRO</th>
                        <th colspan="12" style="text-align: center; background-color: cornflowerblue; padding-top: 4px">PURCHASING DOCUMENTS</th>
                        <th colspan="5" style="text-align: center; background-color: darkslateblue; padding-top: 4px">MIGO</th>
                    </tr>
                    <tr>
                        <th scope="col">Dp.Vim</th>
                        <th scope="col">Vim.Doc.Type</th>
                        <th scope="col">Completed</th>
                        <th scope="col">Curent.Agent</th>
                        <th scope="col">Multi.Agent</th>
                        <th scope="col">Current.Role</th>
                        <th scope="col">Vim.Block.Status</th>
                        <th scope="col">Vim.Block.Reason</th>

                        <th scope="col">Subsequent.Debit.Credit</th>
                        <th scope="col">Blocked.Due.Price</th>
                        <th scope="col">Payment.Block.Code</th>
                        <th scope="col">Miro.Doc.Num</th>
                        <th scope="col">Plant</th>
                        <th scope="col">Company.Code</th>
                        <th scope="col">Fiscal.Year</th>
                        <th scope="col">Document.Date</th>
                        <th scope="col">Posting.Date</th>
                        <th scope="col">Reference/NF</th>
                        <th scope="col">NF.Type</th>
                        <th scope="col">Vendor.Code</th>
                        <th scope="col">Vendor.Name</th>
                        <th scope="col">Miro.Total.Amount</th>
                        <th scope="col">Miro.Item.Amount</th>
                        <th scope="col">Tax.Amout</th>
                        <th scope="col">Currency</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Base.Unit</th>

                        <th scope="col">Contract.Number</th>
                        <th scope="col">Contract.Item.Number</th>
                        <th scope="col">Contract.Value</th>
                        <th scope="col">Contract.New.Value</th>
                        <th scope="col">Condition.Pricing.Unit</th>
                        <th scope="col">Purchasing.Document.Type</th>
                        <th scope="col">Purchasing.Document.Number</th>
                        <th scope="col">Purchasing.Document.Item</th>
                        <th scope="col">MatNr</th>
                        <th scope="col">Description</th>
                        <th scope="col">PO.Gross.Price</th>
                        <th scope="col">Purchase.Unit.Price</th>

                        <th scope="col">Migo.Document</th>
                        <th scope="col">Migo.Year</th>
                        <th scope="col">Migo.Amount</th>
                        <th scope="col">Migo.Quantity</th>
                        <th scope="col">Migo.Base.Unit</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>


    $('#tbl-PriceDiscrepancy').DataTable({
    "aaSorting": [[0, "desc"]],
    "lengthChange": true,
    "filter": true,
    "ordering": true,
    "info": true,
    "paging": true,
    lengthMenu: [5, 10, 15, 20, 25, 50, 100, 200],
    "iDisplayLength": _displayLenght,
    columnDefs: [{
        targets: 0,
        width: "200px"
    }, {
        targets: 1,
        width: "200px",
    }, {
        targets: 2,
        width: "500px",
        className: "centerCol"
    }]
});