Export buttons are not showing on datatable

Export buttons are not showing on datatable

kanakasenakanakasena Posts: 1Questions: 1Answers: 0
edited September 2020 in Free community support

Link to test case: will load all items dynamically and assigned to datatable, filtter are created dynamically only for few columns and assigned above datatable using filterDropDown.js files.
Debugger code (debug.datatables.net):

<table border="0" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
                <td>Created Date From:</td>
                <td><input name="min" id="min" type="text"></td>
                <td>Created Date To:</td>
                <td><input name="max" id="max" type="text"></td>
                <td><input type="button" name="search" id="search" value="Search"/></td>
            </tr>
        </tbody>
    </table>
<table id="example" class="display nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>Outlet Type</th>
                            <th>Branch Name</th>
                            <th>Store Type</th>
                            <th>Manger or DKAM</th>
                            <th>Governate</th>
                            <th>Status</th>
                            <th>Created Date</th>
                        </tr>
                    </thead>
                    <tbody id="tbl_PTBMgrDB_pending">       
                    </tbody>
                    
</table>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/_layouts/15/SP.Runtime.js"></script>
<script src="/_layouts/15/SP.js"></script>
</script><script src="/_layouts/15/SP.UserProfiles.js"></script>
<script src="~~~~/Style%20Library/TestDev/filterDropDown.js"></script>
<script>

 var  tablepending= $('#example');
                    tablepending.DataTable({ 
                    "dom": 'Bfrtip',
                    "buttons": ['excel', 'pdf'],
                    "columnDefs" : [ { type: 'date', 'targets': [5] } ],              
                    "aaData": data.d.results,
                    "bDestroy":true,
                     buttons: true,
                     "oLanguage": {
                    "sEmptyTable":     "You do not have records."
                    },
                    "aoColumns": [      
                    {    
                        "mData": "OutletType"    
                    },   
                    {    
                        "mData": "Name"    
                    },  
                    {    
                        "mData": "StoreType"    
                    }, 
                    {   
                        "mData": "AMorDKAM","mRender": function(data, type, full, meta) {
                                        var returnText = "";
                                        if (data.Title == undefined) return "";
                                        else return data.Title;
                                        }
                    },
                    {   
                        "mData": "Governorate","mRender": function(data, type, full, meta) {
                                        var returnText = "";
                                        if (data.Title == undefined) return "";
                                        else return data.Title;
                                        }
                    },
                    {   
                        "mData": "LKRequestStatus","mRender": function(data, type, full, meta) {
                                        var returnText = "";
                                        if (data.Title == undefined) return "";
                                        else return data.Title;
                                        }
                    },
                    {    
                        "mData": "Created", "mRender": function (data) {
                            var date = new Date(data);
                            var month = date.getMonth() + 1;
                            return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear(); 
                            }   
                     }
                    ], filterDropDown: { //Multi-column Filtering  
                    columns: [  
                        {  
                            idx: 0  
                        },  
                        {  
                            idx: 1  
                        },  
                                     {  
                                         idx: 3 
                                     },
                                     {  
                                         idx: 4 
                                     },
                                     {  
                                         idx: 5 
                                     }
                                ],  
                                bootstrap: true  
                       }
                        
                    
              }); 
                //addInput('PTO_DB_Pending_filter');
                
               }
               else{
               tablepending.DataTable().clear().draw();
                        
                tablepending.DataTable().destroy();

                 tablepending.DataTable( {
                "oLanguage": {
                "sEmptyTable":     "You do not have any records."
                    }   
                 });
                 tablepending.show();
               }
             }
    catch (e) {    
        alert(e.message);    
    }    
}    
function myErrHandler(data, errMessage) {    
    alert("Error: " + errMessage);    
}
</script>

Error messages shown:
No error messages

Description of problem:

Excel, pdf buttons are not appearing on datatable .

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

Answers

Sign In or Register to comment.