Child datatables error

nadhirov

i have code to build child datatables

 var KTDatatableChildRemoteDataDemo = function() { // Private functions // demo initializer 
                 var demo = function() {
                     var datatable = $('.kt-datatable').KTDatatable({ // datasource definition 
                         data: {
                             type: 'remote',
                             source: {
                                 read: {
                                    url: '<?= base_url($c_name . 'listdata') ?>',
                                    // method: 'post'
                                },
                             },
                             pageSize: 10, // display 20 records per page  
                             serverPaging: true,
                             serverFiltering: false,
                             serverSorting: true,
                         }, // layout definition 
                         layout: {
                             scroll: false,
                             height: null,
                             footer: false,
                         }, // column sorting 
                         sortable: true,
                         pagination: true,
                         detail: {
                             title: 'Load sub table',
                             content: subTableInit,
                         },
                         search: {
                             input: $('#generalSearch'),
                         }, // columns definition 
                         columns: [{
                             field: 'ID',
                             title: '',
                             sortable: false,
                             width: 10,
                             textAlign: 'center',
                         },
                         {
                             field: 'NAMA_LENGKAP',
                             title: 'Full Name',
                         }, {
                            field: 'JENIS_KELAMIN',
                            title: 'Gender',
                            width: 80,
                            template: function(row) {
                                 var status = {
                                     "L": {
                                         'title': 'Male',
                                         'state': 'danger'
                                     },
                                     "P": {
                                         'title': 'Female',
                                         'state': 'primary'
                                     },
                                 };
                                 return '<span class=\"kt-badge kt-badge--' + status[row.JENIS_KELAMIN].state + ' kt-badge--dot\"></span>&nbsp;<span class=\"kt-font-bold kt-font-' + status[row.JENIS_KELAMIN].state + '\">' + status[row.JENIS_KELAMIN].title + '</span>';
                            },
                        }, {
                            field: 'TEMPAT_LAHIR',
                            title: 'Place and Date Born',
                            autoHide: false,
                            width: 80,
                            template: function (row) {
                                if (row.TANGGAL_LAHIR === null || row.TANGGAL_LAHIR  ==='1970-01-01') {
                                    return row.TEMPAT_LAHIR + ' ';
                                } else {
                                    var a = moment(row.TANGGAL_LAHIR);
                                    return row.TEMPAT_LAHIR + ' ' + a.format("D-M-YYYY");
                                }
                            }
                        },{
                            field: 'KOTA',
                            title: 'City',
                            width: 90,
                        }],
                     });
                     $('#kt_form_gender').on('change', function() {
                         datatable.search($(this).val().toLowerCase(), 'JENIS_KELAMIN');
                     });
                     $('#kt_form_gender').selectpicker();

                     function subTableInit(e) {
                         $('<div/>').attr('id', 'child_data_ajax_' + e.data.ID).appendTo(e.detailCell).KTDatatable({
                             data: {
                                 type: 'remote',
                                 source: {
                                     read: {
                                        url: '<?= base_url($c_name . 'listUniversitas') ?>',
                                        method: 'post',
                                         params: { // custom query 
                                             ID: e.data.ID,
                                         },
                                     },
                                 },
                                 pageSize: 10,
                                 serverPaging: true,
                                 serverFiltering: false,
                                 serverSorting: true,
                             }, // layout definition 
                             layout: {
                                 scroll: true,
                                 height: 300,
                                 footer: false, // enable/disable datatable spinner.  
                                 spinner: {
                                     type: 1,
                                     theme: 'default',
                                 },
                             },
                             sortable: true, // columns definition  
                             columns: [{
                                 field: 'UNIVERSITAS',
                                 title: 'Universitas',
                                 width: 100,
                             }, {
                                 field: 'TAHUN_AKADEMIK',
                                 title: 'Year',
                             }, {
                                field: 'STATUS',
                                title: 'Status',
                                width: 90,
                                template: function(row) {
                                    if(row.STATUS === null){
                                        return '';
                                    }else{
                                        var status = {
                                            1: {
                                                'title': 'On Progress',
                                                'state': 'primary'
                                            },
                                            2: {
                                                'title': 'Accepted',
                                                'state': 'success'
                                            },
                                            3: {
                                                'title': 'Failed',
                                                'state': 'danger'
                                            },
                                        };
                                        return '<span class=\"kt-badge kt-badge--' + status[row.STATUS].state + ' kt-badge--dot\"></span>&nbsp;<span class=\"kt-font-bold kt-font-' + status[row.STATUS].state + '\">' + status[row.STATUS].title + '</span>';
                                    }
                                },
                            }],
                         });
                     }
                 };
                 return { // Public functions 
                        init: function() { // init dmeo 
                        demo();
                     },
                 };
             }();
             jQuery(document).ready(function() {
                 KTDatatableChildRemoteDataDemo.init();
             });

and it will be error in $('

').attr('id', 'child_data_ajax_' + e.data.ID).appendTo(e.detailCell).KTDatatable({
undefined ID

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin