How to reload datatables

rcoskun

hi,
My english is not very good. I'm sorry for the typos.

My problem is exactly the following;

I would like to create datatables according to the data to be selected on the page. But after the election change I get an error.

E.g

    function CallGetReport() {
        
        var ReportModel =
        {
            EventId: $('.ibox-content select[name=EventId]').val(),
            ReportType: $('.ibox-content select[name=ReportType]').val(),
        };
        if (ReportModel.ReportType == 1) {

            $('.ibox.float-e-margins').css('display', 'block');
          
            $('#datatable').DataTable({
                
                destroy: true,
                language: {
                    info: "_TOTAL_ kayıttan _START_ - _END_ kayıt gösteriliyor.",
                    infoEmpty: "Gösterilecek hiç kayıt yok.",
                    loadingRecords: "Kayıtlar yükleniyor.",
                    zeroRecords: "Tablo boş",
                    search: "Arama:",
                    infoFiltered: "(toplam _MAX_ kayıttan filtrelenenler)",
                    buttons: {
                        copyTitle: "Panoya kopyalandı.",
                        copySuccess: "Panoya %d satır kopyalandı",
                        copy: "Kopyala",
                        print: "Yazdır",
                    },

                    paginate: {
                        first: "İlk",
                        previous: "Önceki",
                        next: "Sonraki",
                        last: "Son"
                    },
                },
                "sScrollY": false,
                "sScrollX": false,
                "ajax": {
                    url: '/Report/GeneralTransactionLogReport',
                    data: ReportModel,
                    datatype: "json",
                    dataSrc: "GeneralTransactionLogReportList"
                },
                "columns": [
                        { "data": "EventName", "autoWidth": true, title: "Etkinlik Adı" },
                        { "data": "AreaName", "autoWidth": true, title: "Tribün Adı" },
                        { "data": "GateName", "autoWidth": true, title: "Kapı Adı" },
                        { "data": "CheckPointName", "autoWidth": true, title: "Okuyucu Adı" },
                        { "data": "NormalTicketAttendant", "autoWidth": true, title: "Bilet" },
                        { "data": "KombineTicketAttendant", "autoWidth": true, title: "Kombine" },
                        { "data": "TotalAttendant", "autoWidth": true, title: "Toplam" }
                ],
                dom: '<"html5buttons"B>lTfgitp',
                buttons: [
                    { extend: 'copy' },
                    { extend: 'csv' },
                    { extend: 'excel', title: 'ExampleFile' },
                    { extend: 'pdf', title: 'ExampleFile' },

                    {
                        extend: 'print',
                        customize: function (win) {
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                        }
                    }
                ]

            });
        }
        else if (ReportModel.ReportType == 2) {

                $('.ibox.float-e-margins').css('display', 'block');
                $('#datatable').DataTable({
                  
                    destroy: true,
                    language: {
                        info: "_TOTAL_ kayıttan _START_ - _END_ kayıt gösteriliyor.",
                        infoEmpty: "Gösterilecek hiç kayıt yok.",
                        loadingRecords: "Kayıtlar yükleniyor.",
                        zeroRecords: "Tablo boş",
                        search: "Arama:",
                        infoFiltered: "(toplam _MAX_ kayıttan filtrelenenler)",
                        buttons: {
                            copyTitle: "Panoya kopyalandı.",
                            copySuccess: "Panoya %d satır kopyalandı",
                            copy: "Kopyala",
                            print: "Yazdır",
                        },

                        paginate: {
                            first: "İlk",
                            previous: "Önceki",
                            next: "Sonraki",
                            last: "Son"
                        },
                    },
                    "sScrollY": false,
                    "sScrollX": false,
                    "ajax": {
                        url: '/Report/PassageStateSummaryReport',
                        data: ReportModel,
                        datatype: "json",
                        dataSrc: "PassageStateSummaryReportList"
                    },
                    "columns": [
                            { "data": "TotalTransaction", "autoWidth": true, title: "Toplam Kart Okutma" },
                            { "data": "WlTransaction", "autoWidth": true, title: "Beklenen Kişi" },
                            { "data": "Passed", "autoWidth": true, title: "Geçiş Verilen" },
                            { "data": "WrongGate", "autoWidth": true, title: "Yanlış Kapı" },
                            { "data": "UndefinedCard", "autoWidth": true, title: "Tanımsız Kart" },
                            { "data": "DoubleCheck", "autoWidth": true, title: "Çift Okutma" },
                            { "data": "PassageReset", "autoWidth": true, title: "Tamamlanamayan kart okutma" },
                            { "data": "Instant", "autoWidth": true, title: "Aynı Anda kart okutma" }
                    ],
                    dom: '<"html5buttons"B>lTfgitp',
                    buttons: [
                        { extend: 'copy' },
                        { extend: 'csv' },
                        { extend: 'excel', title: 'ExampleFile' },
                        { extend: 'pdf', title: 'ExampleFile' },

                        {
                            extend: 'print',
                            customize: function (win) {
                                $(win.document.body).addClass('white-bg');
                                $(win.document.body).css('font-size', '10px');

                                $(win.document.body).find('table')
                                        .addClass('compact')
                                        .css('font-size', 'inherit');
                            }
                        }
                    ]

                });
            
        }
             

    }

---

HTML :

<table class="table table-striped table-bordered table-hover dataTables-example" id="datatable"> <thead> </thead> <tbody></tbody> <tfoot> </tfoot> </table>

rcoskun

Error response : Cannot read property 'style' of undefined

kthorngren

Cannot read property 'style' of undefined

Usually means your Datatable columns and table header don't match up. Looks like you haven't defined your table header:

<table class="table table-striped table-bordered table-hover dataTables-example" id="datatable"> <thead> </thead> <tbody></tbody> <tfoot> </tfoot> </table>

You will need to populate the table header with your columns before initializing your Datatable.

Kevin

kthorngren

Sorry I my solution si not accurate and for some reason I'm not able to edit my response.

One DT has 7 columns and the other 8. I believe the error is still referring to missing columns. You may need to use destroy() instead of destroy.

Kevin

allan

Yes - exactly as Kevin says. You are initialising the same element in two different ways. You would need to use something like:

if ( $.fn.dataTable.isDataTable( '#datatable' ) ) {
  $('#datatable').DataTable().destroy();
  $('#datatable').empty();
}
...// do your initialisation

Remove the destroy option.

Allan