Omines 数据表和列宽答案

【问题标题】：Omines datatables and column widthOmines 数据表和列宽
【发布时间】：2020-10-01 04:34:10
【问题描述】：

我尝试将 Omines 数据表包与 symfony (4) 一起使用，但我无法强制列宽... 我看过这个页面 https://github.com/omines/datatables-bundle/issues/71 所以我尝试了建议的解决方案，但这就像我什么都没做：我所有的列都有相同的宽度。

我是不是忘记了什么？

这是我的控制器：

    public function actionList2(Request $request, DataTableFactory $dataTableFactory): Response
    {
    $options = [
        'fixedHeader' => false,
        'serverSide' => false,
        'processing' => true,
        'searching' => true,
        'autoWidth' => false,
        'columnFilter' => 'both',
        'pageLength' => null,
        'paging' => false,
    ];

    $table = $dataTableFactory->create($options)
        ->add('actCod', TextColumn::class, ['label' => 'Code', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->add('actLib', TextColumn::class, ['label' => 'Libellé', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->add('actIdMere', TextColumn::class, ['label' => 'Action mère', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->add('actDatCmd', DateTimeColumn::class, ['label' => 'Commande', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->add('actDatMep', DateTimeColumn::class, ['label' => 'MEP', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->add('actUsrCre', TextColumn::class, ['label' => 'User Cre', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->add('actDatCre', DateTimeColumn::class, ['label' => 'Date Cre', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->add('actDatMod', DateTimeColumn::class, ['label' => 'Date Mod', 'searchable' => true, 'filter' => ['templateHTML' => 'datatables/Filter/text.html.twig', 'placeholder' => null]])
        ->createAdapter(ORMAdapter::class, ['entity' => V8Action::class
        ])
        ->handleRequest($request);

    if ($table->isCallback()) {
        return $table->getResponse();
    }

    return $this->render('list2.html.twig', ['datatable' => $table]);

}

还有我的树枝……

{# /templates/list.html.twig #}
{% extends 'base.html.twig' %}

{% block titre %}liste{% endblock%}

{% block stylesheets %}
    {{ parent() }}
{% endblock%}

{% block page_content %}
<a href="{{ path('home') }}">Home</a><br/>

<div id="list">Loading...</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('list2') }}
    <script>
$(document).ready(function() {
    $('#list').initDataTables({{ datatable_settings(datatable) }}
           ,{
                columnDefs: [
                    {width: "30%", targets: [1]},
                ]
            }
        );
    });
    </script>
{% endblock %}

不使用列宽。

但是，我在 Omines datatable.js 中放置了一个 console.log ：

    root.html(data.template);
    dt = $('table', root).DataTable(dtOpts);
    console.log(dtOpts);

我可以在 dtOpts oO 中看到我的 columnDefs

【问题讨论】：

标签： symfony datatables

【解决方案1】：

我在我的宠物项目中使用了 omines 数据表。我不确定您的情况到底出了什么问题，但我可以看到您的表字段配置代码与我的不同。如果你需要这样的东西：

您可以查看我的 repo 并进行比较，希望它可以帮助您查明您的问题 https://github.com/mainstreamer/base-home/blob/master/src/Controller/PlaceController.php

【讨论】：

感谢您的回答。就我而言，问题在于我找不到一种方法来告诉 Datatable 我希望它在我的表格中尊重的列宽和最小宽度。我的应用程序实际上有数千个表格，并且自动布局有时相当混乱。我希望能够为某些列固定宽度，为其他列固定最小宽度（它可能需要 scrollX）。无论我做什么，Datatable 都会决定什么对我更好。除非我放了'table-layout：fixed'但是，它是固定的。我无法管理诸如“宽度：30%；最小宽度：15em”之类的情况。未使用 CSS，并且覆盖了数据表的列宽属性。

【解决方案2】：

对我来说，我在我的树枝上做过这样的事情

table2 = $('#Dcfdatatables').initDataTables({{ datatable_settings(datatable) }} , {
"pageLength": 10,
dom: '<"top"lf>rt<"bottom"ip><"clear">',
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100,
columnDefs: [
    {width: "4%", targets: 0, title:"<input type='checkbox' id='select_all' name='select_all'>"},
    {width: "6%", targets: 1},
    {width: "13%", targets: 2},
    {width: "7%", targets: 3},
    {width: "26%", targets: 4},
    {width: "22%", targets: 5},
    {width: "12%", targets: 6},
    {width: "10%", targets: 7},
],initComplete: function(){
...
}

为我工作。

【讨论】：