CODEWITHSUNDEEP
jqueryhtmldatatables
Ishan Tiwary
Ishan Tiwary

Reputation: 1008

Remove Custom button from Datatable

enter image description here

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 find nay information on how can I remove or hide them.

Following is the code

oTable = $('#lenderList').dataTable(
        {
            bServerSide: true,
            bProcessing: true,
            searching: true,
            sAjaxSource: "loanAdminAjax?ajax=true&searchCol="+$('#category').val(),
            sServerMethod: 'POST',
            sPaginationType: "full_numbers",
            bPaginate: true,
            bLengthChange: true,
            bFilter: true,
            bSort: true,
            bInfo: true,
            bAutoWidth: true,

            aoColumns: [
                {
                    "sName": "loanApplicationNumber",
                    mData: "loanApplicationNumber"
                },
                {
                    "sName": "name",
                    mData: "name"
                },
                {
                    "sName": "submissionDate",
                    mData: "submissionDate"
                },
                {
                    "sName": "kycEmailId",
                    mData: "kycEmailId"
                },
                {
                    "sName": "appVersion",
                    mData: "appVersion"
                },
                {
                    "sName": "documentStatus",
                    mData: "documentStatus"
                },
                {
                    "sName": "latestRemark",
                    mData: "latestRemark"
                },
                {
                    "sName": "appName",
                    mData: "appName"
                }


            ],
            "dom": 'T<"clear"><"button">lfrtip'



        }
    );

Upvotes: 0

Views: 6833

Answers (4)

Nasir Abdalazeez
Nasir Abdalazeez

Reputation: 32

I ran into this post as a result of facing the same issue in my current project. Still cannot find a straight-forward fix as at August 2023. So, for those still facing the same type of problem especially if trying to conditionally show the buttons, here's what worked for me.

Set your options however you want and pass an empty array to the buttons object to disable it. No need to rewrite CSS or use jQuery to disable the buttons

Sample code:

let exporting = $('.datatable').hasClass('export'); // your condition
buttons: exporting ? [{
  extend: 'collection',
  text: 'Export <span class="ix ix-chevron rotate-90"></span>',
  buttons: ['pdf', 'excel']
}] : []

That's it!

Upvotes: 0

JDZ
JDZ

Reputation: 68

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

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

This is the default datatable:

<html>
    <head>
        <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        
        <script type="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>

    <table id="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.

Upvotes: 2

codemirror
codemirror

Reputation: 3572

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'
        ]
    } );
} )

Upvotes: 1

Related Questions