Skip to content Skip to sidebar Skip to footer

Remove Custom Button From Datatable

How can I remove the Copy, CSV, Excel, PDF and Print button on the top right corner. They are the default feature of datatables I suppose. I am trying to remove them but I did not

Solution 1:

This is the default datatable:

<html><head><linkhref="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"rel="stylesheet"type="text/css" /><scripttype="text/javascript"language="javascript"src="https://code.jquery.com/jquery-3.0.0.min.js"></script><scripttype="text/javascript"language="javascript"src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script><scripttype="text/javascript"language="javascript"class="init">
        $(document).ready(function() {
            var data = [];
            data.push(
                [1,"Sasha","Brenna","0800 1111"],
                [2,"Sage","Mia","(01012) 405872"],
                [3,"Chelsea","Allistair","076 0578 0265"],
                [4,"Uta","Savannah","070 1247 5884"],
                [5,"Remedios","Berk","0995 181 0007"],
                [6,"Ruby","Wayne","0800 1111"],
                [7,"Faith","Fredericka","(01709) 099879"],
                [8,"Myra","Harrison","070 4241 9576"],
                [9,"Drake","Miriam","0800 733635"],
                [10,"Reed","Shannon","076 8597 5067"]
            );
             
            $('#data_table').DataTable( {
                data: data
            });
        });
        </script><style>.odd{
            background-color: #FFF8FB!important;
        }
        .even{
            background-color: #DDEBF8!important;
        }
        </style></head><body><div><tableid="data_table"><thead><tr><th>Emp Code</th><th>First Name</th><th>Last Name</th><th>Mobile</th></tr></thead><tbody><!-- Dynamic Body --></tbody></table></body></div></html>

In the above example, their are no such buttons. To show the specified buttons you have to include:

dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]

and their corresponding js files. To remove these buttons, just remove the above code from your datatable initialization code.

Solution 2:

Below is the code to show the buttons, you should remove the buttons which you want to.

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} )

Solution 3:

Well, if you cant remove them in normal way, you can inspect them in browser, then use their classes, ids to remove them by jquery

Post a Comment for "Remove Custom Button From Datatable"