固定列宽答案

【问题标题】：Fixed column width固定列宽
【发布时间】：2019-06-28 22:39:57
【问题描述】：

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

如何解决此问题？

【问题讨论】：

您在寻找什么宽度尺寸？您也可以用其他单位表示宽度。表格元素的宽度尺寸是多少，不要忘记css尺寸继承

标签： jquery html css datatables

【解决方案1】：

你可以配置

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>

【讨论】：