从数据表中删除自定义按钮

问题描述 投票：0回答：4

如何删除右上角的“复制”、“CSV”、“Excel”、“PDF”和“打印”按钮。我想它们是数据表的默认功能。我正在尝试删除它们，但我没有找到任何有关如何删除或隐藏它们的信息。

以下是代码

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'



        }
    );
jquery html datatables
4个回答
2
投票

这是默认数据表：

<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>

在上面的例子中，他们没有这样的按钮。要显示指定的按钮，您必须包括：

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

及其对应的js文件。要删除这些按钮，只需从数据表初始化代码中删除上述代码即可。

1
投票

下面是显示按钮的代码， 你应该删除你想要删除的按钮。

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

好吧，如果你无法以正常方式删除它们，你可以在浏览器中检查它们，然后使用它们的类、id 通过 jquery 来删除它们

0
投票

由于在当前项目中遇到同样的问题，我遇到了这篇文章。截至 2023 年 8 月，仍然无法找到直接的修复方法。因此，对于那些仍然面临相同类型问题的人，特别是在尝试有条件地显示按钮时，这对我有用。

根据需要设置选项并将空数组传递给按钮对象以禁用它。无需重写 CSS 或使用 jQuery 来禁用按钮

示例代码：

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

就是这样！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.