Datatable jquery exceeds max stack size range error

Question

I am developing a .net core 3.1 web application with mvc. Currently I have DashboardController.cs, Index.cshtml and PublisherTable.cshtml.

I am trying to post an AJAX request with jquery, and the response should be the html string of GetTable.cshtml view.

My jquery request in index.cshtml :

 let dataArr = {
                startDate: ("start", $("#reportrange").data('daterangepicker').startDate.format('DD.MM.YYYY')),
                endDate: ("end", $("#reportrange").data('daterangepicker').endDate.format('DD.MM.YYYY')),
                apps: appFilterValue,
                countries: countryFilterValue,
                publishers: publisherFilterValue,
                dayBreakdown: dayBreakdown,
                weekBreakdown: weekBreakdown,
                monthBreakdown: monthBreakdown,
                yearBreakdown: yearBreakdown,
                publisherAppBreakdown: publisherAppBreakdown,
                adunitBreakdown: adunitBreakdown,
                countryBreakdown: countryBreakdown,
                publisherBreakdown: publisherBreakdown
            }

            $(".tableResult").html("");
            $(".tableResult").LoadingOverlay("show", { fade: [10, 10] });

            $.ajax({
                url: ajaxUrl,
                type: "POST",
                data: dataArr,
                success: function (data) {
                    var response = data;
                    if (response.error) {
                        $(".tableResult").LoadingOverlay("hide");
                        Swal.fire({ icon: 'error', title: response.message })
                        return;
                    } else {
                        $(".tableResult").LoadingOverlay("hide");
                        $(".tableResult").append(data);
                    }
                },
                error: function (data) {
                    $(".tableResult").LoadingOverlay("hide");
                    $(".tableResult").html("Internal server error " + data.status);
                }
            });
        }

Here is my controller which directs requests :

 [HttpPost("/Dashboard/GetTable")]
        public ViewResult GetTable(ReportCriteriaInputModel crit)
        {
            
            //Query criteria
            ReportCriteria Criteria = new ReportCriteria
            {
                StartDate = DateTime.ParseExact(crit.startDate, "dd.MM.yyyy", CultureInfo.InvariantCulture),
                EndDate = DateTime.ParseExact(crit.endDate, "dd.MM.yyyy", CultureInfo.InvariantCulture),
                Apps = crit.apps == null ? null : String.Join(",",crit.apps),
                Countries = crit.countries == null ? null : String.Join(",", crit.countries),
                PublisherList = crit.publishers == null ? null : String.Join(",", crit.publishers),
                Publisher = RedirectAction.user.Publisher,
                BreakdownByPublisherApp = crit.publisherAppBreakdown.ToString().Trim() == "1",
                BreakdownByAdunit = crit.adunitBreakdown.ToString().Trim() == "1",
                BreakdownByCountry = crit.countryBreakdown.ToString().Trim() == "1",
                BreakdownByPublisher = crit.publisherBreakdown.ToString().Trim() == "1",
                BreakdownByDay = crit.dayBreakdown.ToString().Trim() == "1",
                BreakdownByWeek = crit.weekBreakdown.ToString().Trim() == "1",
                BreakdownByMonth = crit.monthBreakdown.ToString().Trim() == "1",
                BreakdownByYear = crit.yearBreakdown.ToString().Trim() == "1"
            };


            //REPORT QUERIEZZ
            
            
            Report = FinderService.Instance.GetReport(Criteria);
            ReportTotal = FinderService.Instance.GetReportTotal(Criteria);

            //REport View Model
            ReportTableModel tableViewModel = new ReportTableModel
            {
                ReportTotal = ReportTotal,
                Report = Report,
                BreakdownByPublisherApp = Criteria.BreakdownByPublisherApp,
                BreakdownByPublisher = Criteria.BreakdownByPublisher,
                BreakdownByCountry = Criteria.BreakdownByCountry,
                BreakdownByDay = Criteria.BreakdownByDay,
                BreakdownByMonth = Criteria.BreakdownByMonth,
                BreakdownByWeek = Criteria.BreakdownByWeek,  
                BreakdownByYear = Criteria.BreakdownByYear,
                BreakdownByAdunit = Criteria.BreakdownByAdunit,
            };

            return View("~/Views/Dashboard/PublisherTable.cshtml",tableViewModel);

And this is my table to be added into to Index.cstmhl :

@{

    Hashtable total = (Hashtable)Model.ReportTotal[0];
    var cul = CultureInfo.InvariantCulture;
}


<style>
     td, th {
        padding: .50rem !important;
        padding-right: 20px !important;
    }

    .totalrow td {
        padding-right: 0px;
        padding: .75rem !important;
        text-align: right;
        font-weight: bold;
    }

    .dataTable {
        width: 100% !important;
    }
    .dtButtons{
        margin-left: 8%;
    }
    .btnTable {
        color: black;
        background-color: white;
    }
</style>

@*DÜZELT*@

<div class="table-wrapper table-responsive">
    <table class="table table-hover table-condensed" id="dTable">
        <thead>
            <tr class="real-th-tr">

                @if (Model.BreakdownByDate)
                {
                    <th class="bd" data-sort-dir="desc">Date</th>
                }
                @if (Model.BreakdownByPublisherApp)
                {
                    <th class="bd">Publisher App</th>
                }
                @if (Model.BreakdownByPublisher)
                {
                    <th class="bd">Publisher</th>
                }
                @if (Model.BreakdownByAdunit)
                {
                    <th class="bd" style="width:200px">Adunit Name</th>
                    <th class="bd">Adunit ID</th>
                }
                @if (Model.BreakdownByCountry)
                {
                    <th class="bd">Country</th>
                }
                
                <th class="text-right bd">Impression</th>
                <th class="text-right bd">Revenue</th>
            </tr>

            <tr class="total-row totalrow" style="background-color:#f4f6f9">

                @if (Model.BreakdownByDate)
                {
                    <td></td>
                }
                @if (Model.BreakdownByPublisherApp)
                {
                    <td></td>
                }
                @if (Model.BreakdownByPublisher)
                {
                    <td></td>
                }
                @if (Model.BreakdownByAdunit)
                {
                    <td></td>
                    <td></td>
                }
                @if (Model.BreakdownByCountry)
                {
                    <td></td>
                }

                <td data-col="impression">@(Convert.ToDouble(total["total_impression"]).ToString("N0",cul))</td>
                <td data-order="@((Convert.ToDouble(total["total_revenue"])).ToString("F2"))" data-col="revenue">$ @((Convert.ToDouble(total["total_revenue"])).ToString("N2", cul))</td>
            </tr>

        </thead>
        <tbody>


            @foreach (Hashtable h in Model.Report)
            {

            <tr>
                @if (Model.BreakdownByDate)
                {
                    <td style="text-align: left" data-order="@(((DateTime)h["date_trunc"]).ToString("yyyyMMdd"))">@(((DateTime)h["date_trunc"]).ToString("dd.MM.yyyy")) </td>
                }

                @if (Model.BreakdownByPublisherApp)
                {
                    <td style="text-align: left">@h["app_name"]</td>
                }
                @if (Model.BreakdownByPublisher)
                {
                    <td style="text-align: left">@h["publisher_name"]</td>
                }
                @if (Model.BreakdownByAdunit)
                {
                    <td style="text-align: left">@h["adunit_name"]</td>
                    <td style="text-align: left">@h["adunit_id"]</td>
                }
                @if (Model.BreakdownByCountry)
                {
                    <td style="text-align: left">@h["country"]</td>
                }
                <td style="text-align: right" data-col="impression">@(Convert.ToDouble(h["total_impression"]).ToString("N0",cul))</td>
                <td style="text-align: right" data-col="revenue" data-order="@((Convert.ToDouble(h["total_revenue"])).ToString("F2"))">$ @((Convert.ToDouble(h["total_revenue"])).ToString("N2", cul))</td>
            </tr>
            }
        </tbody>
    </table>
</div>

<script>
    @{
        double tempDouble = 1.1;
    }

    function whatDecimalSeparator() {
        var n = "@tempDouble.ToString("N1",cul)";
        n = n.substring(1, 2);
        return n;
    }
    var decimalsep = whatDecimalSeparator();
    var thousandsep = decimalsep == "," ? "." : ",";

    $('.select2bs4:not(.ajax-select)').select2({
        theme: 'bootstrap4'
    });

    $(document).ready(function () {
        var bdCount = @Model.TotalBreakdownCount;
        var orderColNo = 0;
        var aoColumnsList = [];
      
        for (var i = 0; i < bdCount; i++) {
            if ($($("th.bd")[i]).attr("data-sort-dir") == "desc") {
                aoColumnsList.push({ "orderSequence": ["desc", "asc"] });
            }
            else {
                aoColumnsList.push(null);
            }            
        }
        for (var i = 0; i < $(".real-th-tr th").length - bdCount; i++) {
            aoColumnsList.push({ "orderSequence": ["desc", "asc"] });
        }
        aaSorting = [];
        aaSorting = [[orderColNo, 'desc']];

        // DataTable
        //<"col dtButtons"B>
       
        var table = $('#dTable').DataTable({
        
        dom: '<"row"<"col"l><"col dtButtons"B><"col"f>>rt<"row"<"col-6"i><"col-6"p>>',
        //buttons: [
        //    {
        //        //text : "CSV",
        //        className: "btnTable"
        //    },
        //    {
        //        //extend: 'excelHtml5',
        //        text: 'Excel',
        //        className: 'btnTable',
        //        action: function (data) {
        //            debugger;
        //            var currencySign = "@Reklamup.Admin.Helpers.PresentationHelper.PrintCurrency(Model.Currency)";
        //            for (var i = 0; i < data.body.length; i++) {
        //                for (var j = 0; j < data.body[i].length; j++) {
        //                    if (j < bdCount) continue;                                
        //                    var dataCell = data.body[i][j];
        //                    data.body[i][j] = dataCell.replace(currencySign, "").split(thousandsep).join("_thousand_").split(decimalsep).join("_decimal_").split("_thousand_").join(",").split("_decimal_").join(".").trim();
        //                }                            
        //            }                        
        //        }
        //    },
        //    {
        //        //text: "PDF",
        //        className: "btnTable"
        //    },
        //    {
        //        //text: "Print",
        //        className: "btnTable"
        //    },
        //],
        
        buttons: [
            {
                extend: 'excelHtml5', className: 'btnTable', text: '<i class="fa fa-file-excel-o" aria-hidden="true"></i> Excel',
                exportOptions:
                {
                    columns: ':visible'
                },
                title: '',
                customizeData: function (data) {
                    debugger;
                    var currencySign = "@Reklamup.Admin.Helpers.PresentationHelper.PrintCurrency(Model.Currency)";
                    for (var i = 0; i < data.body.length; i++) {
                        for (var j = 0; j < data.body[i].length; j++) {
                            if (j < bdCount) continue;                                
                            var dataCell = data.body[i][j];
                            data.body[i][j] = dataCell.replace(currencySign, "").split(thousandsep).join("_thousand_").split(decimalsep).join("_decimal_").split("_thousand_").join(",").split("_decimal_").join(".").trim();
                        }                            
                    }                        
                }
            },
            { 
                extend: 'pdfHtml5', 
                className: 'btnTable', 
                exportOptions:
                {
                    columns: ':visible'
                },                    
                pageSize: 'A2',
                text: 'PDF'
            },

            { extend: 'csv', className: 'btnTable', text: '<i class="fa fa-file-o" aria-hidden="true"></i> CSV' },
            { extend: 'print', className: 'btnTable', text: '<i class="fa fa-print" aria-hidden="true"></i> Print' }
        ],
            
        order: aaSorting,
        "orderCellsTop": true,
        iDisplayLength: 25,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "search": {
            "caseInsensitive": true
        },
        "language": {
            "decimal": ".",
            "thousands": ","
        },
        "aoColumns": aoColumnsList
            
    });
        


    });

I achieve that, but when I try to load the table, it says this for over 50k records :

jquery.min.js:2 jQuery.Deferred exception: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at Function.se [as find] (http://localhost:34150/plugins/jquery/jquery.min.js:2:6529) at S.fn.init.find (http://localhost:34150/plugins/jquery/jquery.min.js:2:25047) at HTMLTableElement. (http://localhost:34150/plugins/datatables/jquery.dataTables.min.js:104:264) at Function.each (http://localhost:34150/plugins/jquery/jquery.min.js:2:3003) at S.fn.init.each (http://localhost:34150/plugins/jquery/jquery.min.js:2:1481) at S.fn.init.u [as dataTable] (http://localhost:34150/plugins/datatables/jquery.dataTables.min.js:98:199) at S.fn.init.l.fn.DataTable (http://localhost:34150/plugins/datatables/jquery.dataTables.min.js:187:371) at HTMLDocument. (:37:34) at e (http://localhost:34150/plugins/jquery/jquery.min.js:2:30038) at t (http://localhost:34150/plugins/jquery/jquery.min.js:2:30340) undefined

I tried almost everything that I saw on the internet but I could not solve this problem. Has anyone encountered a problem like this?

Any help would be great.

Best regards