jQuery DataTables cyclic reference error

Question

I am using jQuery DataTables with VB code behind. I am attempting to write a custom Excel export because the built in Excel export functionality does not really work with large data sets.

In addition, I want to export the rows that have been filtered in the search box.

JS:

excelExport: function () {
            var table = $('#myTable').DataTable();

            //filtered rows data as arrays
            var filteredData = table.rows({ filter: 'applied' }).data();

            PageMethods.ExcelExport(filteredData);               
        }

The filteredData outputs to the console as such:

[ Array[20], Array[20], Array[20],...] 

This seemed like something that I could work with. When I try passing the object back to the server side using PageMethods I get this terrible error:

Uncaught Error: Sys.InvalidOperationException: Cannot serialize object with cyclic reference within child properties.

I then tried passing the filteredData through JSON.stringify and got a similar error:

Uncaught TypeError: Converting circular structure to JSON

Has anyone come across this or have any ideas on how to solve this? Thus far my research has not come up with a solution.

Or is there a better way to handle an export for these jQuery DataTables that will work with a larger dataset?

Answer 1

I figured out what my problem was. Based on Bindrid's comment I simplified my query to one column of id's to test his theory. I was still getting cyclic reference error. I then started stripping out the extra jQuery datatables functions.

My table definition was more or less as follows.

 table = $('#myTable').dataTable({

                    "bSortClasses": false,
                    "ajax": {
                        "type": "POST",
                        "url": "/page.aspx/FillTable",
                        "data": {},
                        "contentType": "application/json; charset=utf-8",
                        "dataSrc": "d",                        
                        "error": function (result) {
                            // write the error to the console otherwise.
                            console.log(result.responseJSON.Message + "\n\r\n\r" + result.responseJSON.StackTrace);
                        }
                    },
                    "dom": "<'row'<'col-md-3'l><'col-md-6'><'col-md-3'f>>" +
                                "<'row'<'col-md-12't>>" +
                                "<'row'<'col-md-6'i><'col-md-6'p>>",      
                    },
                    "order": [[2, "asc"]],                   
                    "columnDefs": [
                    {
                        "targets": [1],
                        "title": "unique",
                        "visible": false,
                        "searchable": false                    
                    }],
                    scrollX: true,
                    scrollCollapse: true,                    
                    fixedColumns: {
                        leftColumns: 3
                    },
                    iDisplayLength: 10,
                    initComplete: function (settings, json) {
                        console.log('DataTable has finished initialization.');                       
                    }
                });
            }

The fixedColumns: { leftColumns: 3 }, is what is causing the cyclic error in the export function from the original post. Once those lines were removed the export passed the data to the code behind without error.

I hope this helps someone in the future.