How to hide buttons related to data table 3 button print and export and copy ?

Question

I work on asp.net web forms . I face issue I can't hide buttons display related to table id example .

from inspect element all these buttons (Export-copy-print) take class selector dt-buttons .

so How to hide these buttons(print-copy-Export) .

these buttons no need on it so I need to hide it

protected void Search_Click(object sender, EventArgs e)
    {
            repPSStatus.DataSource = dt;
            repPSStatus.DataBind();
    }

when make inspect to browser elements:

<div id="ContentPlaceHolder1_PSdiv">
                                <div class="row">
                                    <div class="table-responsive">
                                        <div id="example_wrapper" class="dataTables_wrapper no-footer"><div class="dt-buttons">   <button class="dt-button buttons-collection" tabindex="0" aria-controls="example" type="button" aria-haspopup="true" aria-expanded="false"><span>Export</span></button> <button class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="example" type="button"><span>Copy</span></button> <button class="dt-button buttons-print" tabindex="0" aria-controls="example" type="button"><span>Print</span></button> </div><div id="example_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="example"></label></div><table class="display dataTable no-footer" id="example" role="grid" aria-describedby="example_info">
                                            <thead>
                                                <tr role="row"><th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Branch Code: activate to sort column descending" style="width: 141px;">Branch Code</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Entred Datetime: activate to sort column ascending" style="width: 183px;">Entred Datetime</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Order Type: activate to sort column ascending" style="width: 126px;">Order Type</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Printer_name: activate to sort column ascending" style="width: 409px;">Printer_name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 79px;">Status</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="id: activate to sort column ascending" style="width: 50px;">id</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 34px;"><input id="ContentPlaceHolder1_chkHeader" type="checkbox" name="ctl00$ContentPlaceHolder1$chkHeader"></th></tr>
                                            </thead>
                                            <tbody>

                                                            <td><input id="ContentPlaceHolder1_repPSStatus_chkSel_9" type="checkbox" name="ctl00$ContentPlaceHolder1$repPSStatus$ctl09$chkSel"></td>
                                                        </tr></tbody>

                                        </table><div class="dataTables_info" id="example_info" role="status" aria-live="polite">Showing 1 to 10 of 4,493 entries</div><div class="dataTables_paginate paging_simple_numbers" id="example_paginate"><a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="0" tabindex="-1" id="example_previous">Previous</a><span><a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a><a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a><a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a><a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a><a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a><span class="ellipsis">…</span><a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">450</a></span><a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a></div></div>
                                    </div>

                                </div>
                                 
                            </div>

on aspx web form i try below :

<div class="pl-lg-4 d-none"   id="PSdiv" runat="server">
                            <div class="row">
                                <div class="table-responsive">
                                    <table style="margin-left:25px" class="display" id="example">
                                        <thead>
                                            <tr>
                                                <th style="width:2px">Branch Code</th>
                                                <th style="width:80px">Entred Datetime</th>
                                               
                                                
                                                
                                                
                                                
                                            <div class="pl-lg-4 d-none"   id="PSdiv" runat="server">
                                <div class="row">
                                    <div class="table-responsive">
                                        <table style="margin-left:25px" class="display" id="example">
                                            <thead>
                                                <tr>
                                        </thead>
                                        <tbody>
                                            <asp:Repeater runat="server" ID="repPSStatus">
                                                <ItemTemplate>
                                                    <tr>
                                                        <td style="width:2px"><%# Eval("BranchCode") %></td>
                                                        <td style="width:80px"><%# Eval("EntredDatetime") %></td>                      
                                                    </tr>
                                                </ItemTemplate>
                                            </asp:Repeater>
                                         
                                          
                                        </tbody>

                                    </table>
                                </div>

                            </div>
                             
                        </div>

what I try is to hide class dt-button to hide 3 buttons but nothing happen and issue still exist

<script>
$(document).ready(function () {
$('.dt-button').hide();
 });
 </script>

Answer 1

As we explained in your other threads, Web Forms does not work well with standard HTML and jQuery/JavaScript. Web Forms uses a post back pattern and server controls to update the user interface. It is much easier to use the tools that come with Web Forms to show and hide server control buttons.

Move to MVC or Razor Pages fi you want to build modern JavaScript applications.

With that being said, you did not share enough code to figure out what mistakes you are making. I created a simple test by coping your code and the buttons are hidden as expected. Of course, the jQuery code hides all elements with the dt-button class. Make an effort to debug your code. Or, as we ask in all your recent threads, share enough code to reproduce the problem. Otherwise, we are left guessing.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowHide.aspx.cs" Inherits="WebFormsDemo.JSDemos.ShowHide" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="ContentPlaceHolder1_PSdiv">
                <div class="row">
                    <div class="table-responsive">
                        <div id="example_wrapper" class="dataTables_wrapper no-footer">
                            <div class="dt-buttons">
                                <button class="dt-button buttons-collection" tabindex="0" aria-controls="example" type="button" aria-haspopup="true" aria-expanded="false">
                                    <span>Export</span>
                                </button>
                                <button class="dt-button buttons-copy buttons-html5" tabindex="0" aria-controls="example" type="button"><span>Copy</span></button>
                                <button class="dt-button buttons-print" tabindex="0" aria-controls="example" type="button"><span>Print</span></button>
                            </div>
                            <div id="example_filter" class="dataTables_filter">
                                <label>Search:<input type="search" class="" placeholder="" aria-controls="example"></label></div>
                            <table class="display dataTable no-footer" id="example" role="grid" aria-describedby="example_info">
                                <thead>
                                    <tr role="row">
                                        <th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Branch Code: activate to sort column descending" style="width: 141px;">Branch Code</th>
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Entred Datetime: activate to sort column ascending" style="width: 183px;">Entred Datetime</th>
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Order Type: activate to sort column ascending" style="width: 126px;">Order Type</th>
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Printer_name: activate to sort column ascending" style="width: 409px;">Printer_name</th>
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 79px;">Status</th>
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="id: activate to sort column ascending" style="width: 50px;">id</th>
                                        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 34px;">
                                            <input id="ContentPlaceHolder1_chkHeader" type="checkbox" name="ctl00$ContentPlaceHolder1$chkHeader"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                    <td>
                                        <input id="ContentPlaceHolder1_repPSStatus_chkSel_9" type="checkbox" name="ctl00$ContentPlaceHolder1$repPSStatus$ctl09$chkSel">

                                    </td>
                                    </tr>
                                </tbody>

                            </table>
                            <div class="dataTables_info" id="example_info" role="status" aria-live="polite">Showing 1 to 10 of 4,493 entries</div>
                            <div class="dataTables_paginate paging_simple_numbers" id="example_paginate"><a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="0" tabindex="-1" id="example_previous">Previous</a><span><a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a><a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a><a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a><a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a><a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a><span class="ellipsis">…</span><a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">450</a></span><a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a></div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </form>
    <script>
        $(document).ready(function () {
            $('.dt-button').hide();
        });
    </script>
</body>
</html>

Answer 2

Hi @Ahmed Salah Abed Elaziz,

Is there an error message in the browser when you press F12?

on aspx web form i try below :

The code in the web form you provided does not seem to have a button.

Have you used the jquery file?

You can refer to the following code:

Best regards,

Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.