How to hide Scroll Icons in DataTable

Sign in to vote

User-719153870 posted

Hi jsshivalik,

The scrollbar you added in jquery datatable is encapsulated.

It comes with the style of the scrollbar. You can override the original style of the scrollbar by rewriting the style in the page, which hide the Scroll Icons.

Please refer to below codes:

ASPX:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" />
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#newtab").DataTable({
                scrollY: "200px",
                initComplete: function (settings, json) {
                    $('body').find('.dataTables_scrollBody').addClass("scrollbar");
                },

            });
        });
    </script>
    <style type="text/css">
        .scrollbar::-webkit-scrollbar {
            background-color: lightgray;
        }

        .scrollbar::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table class="display" id="newtab" style="width: 100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                    </tr>
                    <tr>
                        <td>Airi Satou</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>33</td>
                        <td>2008/11/28</td>
                        <td>$162,700</td>
                    </tr>
                    <tr>
                        <td>Brielle Williamson</td>
                        <td>Integration Specialist</td>
                        <td>New York</td>
                        <td>61</td>
                        <td>2012/12/02</td>
                        <td>$372,000</td>
                    </tr>
                    <tr>
                        <td>Herrod Chandler</td>
                        <td>Sales Assistant</td>
                        <td>San Francisco</td>
                        <td>59</td>
                        <td>2012/08/06</td>
                        <td>$137,500</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </form>
</body>
</html>

Here is result of my demo:

And whose Underline exactly you want to display?

Best Regard,

Yang Shen

Monday, July 1, 2019 8:46 AM

0

Sign in to vote

User-797751191 posted

Hi Yang

It is still showing Sorting icons . I have below code

<script>
            $(function () {
                $('#gvwData').dataTable({
                    "bFilter": false,
                    order: [],
                    columnDefs: [{ orderable: false, targets: [0, 1] }]
                });
            });
        </script>

<asp:GridView ID="gvwData" </aspGridView>

<asp:BoundField DataField="Location" HeaderText="Location"/>
<asp:BoundField DataField="Id" HeaderText="Id"/>

</Columns>

</GridView>

Thanks

Monday, July 1, 2019 9:41 AM

0

Sign in to vote

User-719153870 posted

Hi jsshivalik,

You will need to add below codes in your <script> so that you can override the original style of the scrollbar.

Please refer to below:

<script>
        $(function () {
            $('#gvwData').dataTable({
                scrollY: "200px",
                "bFilter": false,
                order: [],
                columnDefs: [{ orderable: false, targets: [0, 1] }],
                initComplete: function (settings, json) {
                    $('body').find('.dataTables_scrollBody').addClass("scrollbar");
                },
            });
        });
    </script>
    <style type="text/css">
        .scrollbar::-webkit-scrollbar {
            background-color: lightgray;
        }

        .scrollbar::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: darkgray;
        }
    </style>

Best Regard,

Yang Shen

Tuesday, July 2, 2019 1:35 AM

Asked by:

How to hide Scroll Icons in DataTable

Question

All replies