不能在 DataTable 上定义超过 9 个列

Posted 2023-05-07

【中文标题】不能在 DataTable 上定义超过 9 个列

【英文标题】：Can't define more than 9 colums on DataTable

【发布时间】：2018-03-03 23:34:59

【问题描述】：

向上编辑：我在另一个项目上尝试过。同样的问题，当我尝试将它与 10 个数据列一起使用时，它给出了同样的错误，https://datatables.net/manual/tech-notes/7。但是我的问题没有定义。现在我确信这与后端无关。此外，当我在一列上粘贴两个数据并将这 10 列降低到 9 列时，它仍然有效。它肯定是关于列号的。

---

我在我的项目中使用 Jquery DataTables。我的大多数表格的列数都很少，但今天我尝试了一个有 10 列的表格。经过长时间的研究和测试，我发现了一个奇怪的问题，当我定义超过 9 列时，它甚至不会触发获取数据的 JsonResult 操作，但是当我尝试从 DataTable 脚本中删除其中一个数据列时，它会正常启动.它不依赖于要删除的数据列。这都是关于列数的。超过 9 列意味着它不起作用。

我尝试使用“scrollX”选项并为列提供低宽度值。我找不到任何其他解决方案。

这是我的 DataTable 脚本的示例：

$(document).ready(function () 
    var table = $('#tblExample').DataTable(
        "scrollX": true,
        "ordering": false,
        "searching": false,
        "serverSide": true,
        "info": false,
        ajax: 
            "url": "/ExampleRoute/ExampleController/ExampleAction",
            "data": function (d) 
                d.tofind= $("#txtToFind").val()
            
        ,
        columns: [
         data: "Data1" , width:"%5" ,
         data: "Data2" , width:"%5" ,
         data: "Data3" , width:"%5",
         data: "Data4" , width:"%5",
         data: "Data5" , width:"%5",
         data: "Data6" , width:"%5",
         data: "Data7" , width:"%5",
         data: "Data8" , width:"%5",
         data: "Data9" , width:"%5",
         data: "Data10" , width:"%5",            
        ],
        fixedColumns: true,
        responsive: true
    );

);

这是我的表格 html 的示例

<table id="tblExample">
                <thead>
                    <tr>
                        <th class="example1">Data1Col</th>
                        <th class="example2">Data2Col</th>
                        <th class="example3">Data3Col</th>
                        <th class="example4">Data4Col</th>
                        <th class="example5">Data5Col</th>
                        <th class="example6">Data6Col</th>
                        <th class="example7">Data7Col</th>
                        <th class="example8">Data8Col</th>
                        <th class="example9">Data9Col</th>
                        <th class="example10">Data10Col</th>
                    </tr>
                </thead>
            </table>

这与我所说的控制器/动作无关。当我尝试使用 9 列时，它工作得很好，会触发 ExampleController/ExampleAction，但是当 9+ 数据列时，它甚至不会触发这个动作。此外，这与<th> 数字无关，我尝试了更多和更少的数据列，同样它仅在少于 10 列时才有效。有没有办法让我使用更多的数据列。

【问题讨论】：

不存在这样的限制，我认为问题出在其他方面

不可能，当我尝试使用 9、8、7 和更多更少的数据列时，一切正常。如果它正在触发动作，我可以说我的 JsonResult 可能是错误的，但它甚至不会像我所说的那样触发动作。有人说和宽度有关，当表格无法滚动时，会出现此错误，但我无法解决。

@ReadyFreddy 限制来自你的 ajax 数组行的返回，你可以展示一个更完整的例子，我在这里 codepen.io/anon/pen/YrGxqd 使用 Jquery、bootstrap、dataTable

正如我再说一遍，它不能返回任何 json，因为它不能触发动作。我在另一个项目上尝试过，现在我看到如果我尝试 10 列短数据它可以工作，但是当我尝试在表上显示 10 列长数据时，它会给出相同的错误。这绝对是关于样式、宽度或类似的东西。

【参考方案1】：

好的，我发现问题出在DataTable的ajax发送的请求字符串上。当您想向 DataTable 返回太多数据时，它会使您的查询字符串非常长，并阻止从 [HttpGet] 操作获取数据。如果您遇到此问题，则必须将表 ajax 类型更改为 POST，并且您必须将控制器中的操作定义为 [HttpPost]。

【参考方案2】：

这是由于您的查询字符串长度正在增加。您必须在 web.config 中增加查询字符串的大小。它将解决问题。

<system.webServer>
<security>
<requestFiltering>
<requestLimits maxQueryString="32768"/>
</requestFiltering>
</security>
</system.webServer>

【参考方案3】：

我用其他方式解决了，有两个修改： - [HttpPost] 关于控制器中的操作 - "type": "POST" 在 DataTable 中的 ajax 调用