Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.min.js:36

isabilal

I'm trying to do dataTables server side using version 10.4.1.
I'm selecting data from different views with different columns and number of columns so it has to be dynamic. Some of them don't contain so much data, but some of them have up to 400.000 rows and 30 columns. But I'm always getting the above error.

Here is my client-side code

$('.button').click(function (event) {
        event.preventDefault();

        if ($('#GroupElement_Id option:selected').val() != '') {

            var viewname = $('#GroupElement_Id option:selected').val();

            //  if data-table has been initialized then destroy it
            if ($('#gem-table').hasClass('dataTable')) {
                var table = $('#gem-table').DataTable();
                //  remove all rows. important to call before destroy.
                table.clear();
                //  remove those enhancements and return the table to its original un-enhanced state
                //  call if create new tables based on new criteria with different initialisation settings 
                table.destroy();
                //  empty in case the columns change
                $('#gem-table thead tr').empty();
                $('#gem-table tbody').empty();
                $('#gem-table tfoot tr').empty();
            }

            //  Ajax call that gets the data
            $.ajax({
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                url: apiBaseUmbraco + 'gem/gemdataserverside/',
                data:
                    {
                        'viewname': viewname,
                        'all': $('#all-gem-rows').is(':checked') ? 1 : 0
                    },
                dataType: 'JSON',
                beforeSend: function () {
                    $('.ajax-loader').show();
                },
                success: function (response) {
                    var tableColumns = jQuery.parseJSON(response).columns;
                    var columns = [];
                    var headers = '';
                    var footers = '';

                    //  build up table header, footer 
                    //  and columns JSON array for the data-table
                    $.each(tableColumns, function (index, value) {
                        headers += '<th>' + value + '</th>';
                        footers += '<th>' + value + '</th>';
                        var headerObj = new Object();
                        headerObj['sName'] = value;
                        columns.push(headerObj);
                    });

                    //  insert header and footer into the table
                    $('#gem-table thead tr').html(headers);
                    $('#gem-table tfoot tr').html(footers);

                    $('#gem-table').dataTable({
                        'bServerSide': true,
                        'sAjaxSource': apiBaseUmbraco + 'gem/gemdataserverside/?viewname=' + viewname + '&all=' + ($('#all-gem-rows').is(':checked') ? '1' : '0'),
                        'bProcessing': true,
                        'aoColumns': columns,
                        dom: 'T<"clear">lfrtip',
                        'tableTools': {
                            'sSwfPath': '/swf/copy_csv_xls_pdf.swf'
                        },
                        'responsive': true,
                        'lengthMenu': [[25, 50, 100, -1], [25, 50, 100, 'All']],
                        'drawCallback': function (settings) {
                            $('.ajax-loader').hide();
                        },
                        
                    });

                    //  scroll down to data-table
                    $('html, body').animate({
                        scrollTop: $('#gem-table_wrapper').offset().top
                    }, 1000);

                },
                error: function (result) {
                    alert('Service call failed: ' + result.status + ' Type :' + result.statusText);
                }
            });

        } else {

        }
    });

Hope someone can help.

Thanks in advance.

Best,
Bilal

allan

Hi Bilal,

Can you please link to the page, or a test page, that shows the issue, as required in the forum rules so we can help debug the problem.

Regards,
Allan

isabilal

Hi Allan,

Thanks for your answer.
It's not possible for me to deploy to my test server because of database size restrictions - it's a quite large database. Is there anything I can do to provide you with debug information?

Best,
Bilal

isabilal

Hi again,

I used the DataTables debugger on my local dev environment, Here's the six letter reference: iqatec

Thanks in advance.

Best,
Bilal

allan

It looks like the server is returning a string, rather than a JSON object.

i.e. it is returning:

"{\"sEcho\":\"1\",\"iTotalRecords\":7222, ...

It should be returning:

{"sEcho":"1","iTotalRecords":7222, ...

Allan

isabilal

Thanks, that helped me a lot - Now I'm seeing the data in the DataTable debugger, but DataTable is not able to match the columns with the row data: DataTables warning: table-id=gem-table - Requested unknown parameter 'A' for row 0. That does not add up since I have a column named A. http://debug.datatables.net/esivip

Thanks in advance.

Best,
Bilal

isabilal

I got it to work! Thanks a lot for the feedback. I really appreciate it.

Best,
Bilal