Up Edit: I tried it on another project. Again same problem, when i try to use it with 10 data columns, it gives same error, . But there is no defination about my problem. Now i am sure about that it's not about backend. Also when i paste two data on one column and lower this 10 column to 9 column, it still works. It has to be something about column number surely.

---

I am using Jquery DataTables on my project. Most of my tables have low numbers of columns but today i tried it with a table with 10 columns. After a long research and testing, i found that weird problem, when i define more than 9 columns, it won't even fire JsonResult action that gets data but when i try to delete one of data columns from DataTable script, it fires up normaly. It doesn't depend on which data column to be deleted. It's all about number of columns. More than 9 columns means it won't work.

I tried using "scrollX" option and giving colums low width values. I can't find any other solution.

Here is an example of my DataTable Script:

$(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
    });

});

Here is an example of my Table 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>

It's not about Controller/Action as i said. When i try with 9 columns, it works perfectly, fires ExampleController/ExampleActionbut when 9+ data columns, it won't even fire this action. Also it's not about <th> numbers, i tried it with more and less then data columns, again it works only if there is less than 10 columns. Is there any solution to let me use more data columns.

Up Edit: I tried it on another project. Again same problem, when i try to use it with 10 data columns, it gives same error, https://datatables/manual/tech-notes/7. But there is no defination about my problem. Now i am sure about that it's not about backend. Also when i paste two data on one column and lower this 10 column to 9 column, it still works. It has to be something about column number surely.

---

I am using Jquery DataTables on my project. Most of my tables have low numbers of columns but today i tried it with a table with 10 columns. After a long research and testing, i found that weird problem, when i define more than 9 columns, it won't even fire JsonResult action that gets data but when i try to delete one of data columns from DataTable script, it fires up normaly. It doesn't depend on which data column to be deleted. It's all about number of columns. More than 9 columns means it won't work.

I tried using "scrollX" option and giving colums low width values. I can't find any other solution.

Here is an example of my DataTable Script:

$(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
    });

});

Here is an example of my Table 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>

It's not about Controller/Action as i said. When i try with 9 columns, it works perfectly, fires ExampleController/ExampleActionbut when 9+ data columns, it won't even fire this action. Also it's not about <th> numbers, i tried it with more and less then data columns, again it works only if there is less than 10 columns. Is there any solution to let me use more data columns.

• javascript
• jquery
• asp-mvc
• jquery-plugins
• datatables

Share Follow edited Sep 22, 2017 at 12:27 ReadyFreddy asked Sep 22, 2017 at 11:36 ReadyFreddyReadyFreddy 93388 silver badges2020 bronze badges 4

• No such limit exist, I think the issue is from some other thing – Mayank Pandeyz Commented Sep 22, 2017 at 11:38
• It can't be, It's all okey when i try to do it with 9,8,7 and more less data columns. If it were firing to Action, i could say that my JsonResult can be wrong but it won't even fire up to action as i said that. Some people says that it's about width, when table can't scroll it gives this error but i couldn't solve it. – ReadyFreddy Commented Sep 22, 2017 at 11:44
• @ReadyFreddy the limit e from the return of you ajax array lines, you can show a more plete example i did here codepen.io/anon/pen/YrGxqd using Jquery, bootstrap, dataTable – user8556290 Commented Sep 22, 2017 at 11:50
• As i said that again, it can't return any json, because it can't fire action. I tried it on my another project, now i see that if i try 10 columns with short data it works, but when i try to show long data on table by 10 columns, it gives same error. It's definetly about styling, th width or something like that. – ReadyFreddy Commented Sep 22, 2017 at 11:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Ok, i found the problem was about request string that sent by ajax of DataTable. When you want to return too much data to DataTable, it makes your query string very long and prevents to get data from [HttpGet] action. If you are in trouble with this problem, you have to change your table ajax type to POST and also you have to define your action in controller as [HttpPost].

It's due to your query string length is increasing. you have to increase the query string size in web.config. It will fix the issue.

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

I've solved in other way, with two modifications: - [HttpPost] on Action in Controller - "type": "POST" on ajax call in DataTable