Cannot display table data

DhanashreeKolwadkar

Below code is getting called on the success of ajax call. When checked getting all the values tables are not getting displayed. Please help.

function displayTable(data, count, attrs) {
    attMap = JSON.parse(attrs);
    var t;
    var y = data;
    a = JSON.parse(data);
    var target_col = a.groupBy;
alert(attMap.scrollable);
    if (target_col < 0) {
       if (attMap['scrollable'] == 1) {
            t = jQuery('#fsDataTable' + count).DataTable({
                "scrollY":        attMap["scroll_height"],
                "scrollCollapse": true,
                "paging":         false
            });
        }else{
            alert('in else');
            t = jQuery('#fsDataTable' + count).DataTable({
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            });
            alert(JSON.stringify(t));
        }
        if (typeof(y.order_by) != "undefined" && y.order_by !== null) {
            t.order([y.order_by, 'asc']);
        }
    } else {
        var order = [[target_col, 'asc']];
        if (typeof(y.order_by) != "undefined" && y.order_by !== null) {
            order.push([y.order_by, 'asc']);
        }
        if(attMap['scrollable'] == 0) {
            t = jQuery('#fsDataTable' + count).DataTable({
                "columnDefs": [
                    {"visible": false, "targets": target_col}
                ],
                "order": order,
                "displayLength": 50,
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],

                "drawCallback": function (settings) {
                    var api = this.api();
                    var rows = api.rows({page: 'current'}).nodes();
                    var last = null;

                    api.column(target_col, {page: 'current'}).data().each(function (group, i) {
                        if (last !== group) {
                            jQuery(rows).eq(i).before(
                                '<tr class="netmemberdirectory_group"><td colspan="5">' + group + '</td></tr>'
                            );

                            last = group;
                        }
                    });
                }
            });     }else{
            t = jQuery('#fsDataTable' + count).DataTable({
                "columnDefs": [
                    {"visible": false, "targets": target_col}
                ],
                "order": order,

                //"displayLength": 50,
                "scrollY":         attMap["scroll_height"],
                "scrollCollapse": true,
                "paging":         false,

                "drawCallback": function (settings) {
                    var api = this.api();
                    var rows = api.rows({page: 'current'}).nodes();
                    var last = null;

                    api.column(target_col, {page: 'current'}).data().each(function (group, i) {
                        if (last !== group) {
                            jQuery(rows).eq(i).before(
                                '<tr class="netmemberdirectory_group"><td colspan="5">' + group + '</td></tr>'
                            );

                            last = group;
                        }
                    });
                }
            });
        }
        // Order by the grouping
        jQuery('#fsDataTable' + count + ' tbody').on('click', 'tr.netmemberdirectory_group', function () {
            alert('fsdata');
            var currentOrder = t.order()[0];
            alert(currentOrder);
            if (currentOrder[0] === target_col && currentOrder[1] === 'asc') {
                t.order([target_col, 'desc']).draw();
            }
            else {
                alert('dddd');
                t.order([target_col, 'asc']).draw();
            }
        });

    }

colin

Hi @DhanashreeKolwadkar ,

Are the tables being created? Or just empty of data? There's a lot of code there, so it would be easier if you could give a live example or a more simplified scenario.

Thanks,

Colin

DhanashreeKolwadkar

Hi @colin,

Thanks for the reply. I m getting data but Tables are not getting created. I m working on development site. I can give you reference.

https://cosn.org/cosn-membership-directory

jQuery('#fsDataTable' + count).DataTable({
                "order": a.order,
                "displayLength": 50,
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "drawCallback": function (settings) {
                    var api = this.api();
                    var rows = api.rows({page: 'current'}).nodes();
                    var last = null;

                    api.column(target_col, {page: 'current'}).data().each(function (group, i) {
                        if (last !== group) {
                            jQuery(rows).eq(i).before(
                                '<tr class="netmemberdirectory_group"><td colspan="5">' + group + '</td></tr>'
                            );

                            last = group;
                        }
                    });
                }
            });

colin

I just took a look, but I'm seeing multiple DataTables, all loaded, and all with data. What makes you think they're not being created?