details-control not showing icon for child rows

jeevi

i'm trying to show columns in separate child row but its not working i didnot understand what's the exact problem
help me thank you,

   var columnDefs = [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        targets: 0
                    }, {
                        title: "Id",
                        data: [0],

                    }, {
                        title: "Document Name",
                        data: [1],
                    }, {
                        title: "Active",
                        data: [2],
                        createdCell: function (td, cellData) {
                            if (cellData === 1) {
                                $(td).html("<i class=\"fa fa-check text-success\"></i>");
                            } else {
                                $(td).html("<i class=\"fa fa-check text-danger\"></i>");
                            }
                        }
                    }, {
                        title: "Document Category Id",
                        data: [3],
                    }, {
                        title: "created_at",
                        data: [4],


                    }, {
                        title: "Created by",
                        data: [5],

                    } ,{
                        title: "Updated at",
                        data: [6],
                        visible: false

                    },{
                        title: "Updated by",
                        data: [7],
                        visible: false,
                        className: 'none',
                    }

                ];


                myTable = $('#example').DataTable({
                    data: dataSet,
                    columns: columnDefs,
                    dom: 'Bfrtip',
                    idSrc: 0,
                    buttons: [
                        {
                            extend: 'copyHtml5',
                            text: '<i class="fa fa-files-o"></i> copy',
                            titleAttr: 'Copy'
                        },
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fa fa-file-excel-o"></i> excel',
                            titleAttr: 'Excel'
                        },

                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fa fa-file-pdf-o"></i> PDF',
                            titleAttr: 'PDF',
                            orientation: 'landscape',
                            pageSize: 'LEGAL'
                        },


                    ],
                    select: true,
                    responsive: {
                        details: {
                            type: 'column',
                            target: 'tr'
                        }
                    },
                    order: [[1, 'asc']],
                });

jeevi

closed

oxidosocial

In the definition of columns, place the reference of the icon to be displayed, example:

columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": '<i class = "glyphicon glyphicon-plus-sign"> </ i>',
targets: 0
},