Skip to content
Related Articles

Related Articles

jQuery Mobile Column-Toggle Table columnBtnText Option

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Jan, 2022
View Discussion
Improve Article
Save Article

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. The Column-Toggle table widget allows to hide/show less important columns with the help of a Column button with checkboxes.

In this article, we are going to learn the jQuery Mobile Column-Toggle Table columnBtnText option. The columnBtnText option sets the Column button text which is by-default ‘Columns…’ which can be changed by this option.

Syntax: The columnBtnText option takes a string value and is initialized as follows:

$("#gfg-table-column-toggle").table-columntoggle({
    columnBtnText: "Show columns"
});

To get after initialization, use the following syntax.

var columnBtnTextOpt = $("#gfg-table-column-toggle")
    .table-columntoggle("option", "columnBtnText");

To set after initialization, use the following syntax.

$("#gfg-table-column-toggle").table-columntoggle(
    "option", "columnBtnText", "Show columns");

CDN Links: Use the following CDNs for your jQuery Mobile project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, the columnBtnText option is set to “Show columns”.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div data-role="page" id="gfgpage">
        <div data-role="header">
            <h1 style="color: green;">GeeksforGeeks</h1>
        </div>
        <div data-role="main" class="ui-content">
            <h3> jQuery Mobile Column-Toggle Table columnBtnText Option</h3>
            <table data-role="table" id="gfg-table-column-toggle"
                   data-mode="columntoggle" 
                   class="ui-responsive table-stroke"
                   data-enhanced="false"
                   data-column-btn-text="Show columns">
                <thead>
                    <tr>
                        <th>Sl No.</th>
                        <th>Article Title</th>
                        <th data-priority="2">Category</th>
                        <th data-priority="1">Topic</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <td><a href=
                                Hashing Data Structure</a>
                        </td>
                        <td>Coding</td>
                        <td>Data Structures</td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td><a href=
                            Graph Data Structure And Algorithms</a>
                        </td>
                        <td>Coding</td>
                        <td>Data Structures</td>
                    </tr>
                    <tr>
                        <th>3</th>
                        <td><a href=
                            ML | Multiple Linear Regression using Python</a>
                        </td>
                        <td>Machine Learning</td>
                        <td>Supervised Learning</td>
                    </tr>
                    <tr>
                        <th>4</th>
                        <td><a href=
                            Implementing DBSCAN algorithm using Sklearn</a>
                        </td>
                        <td>Machine Learning</td>
                        <td>Unsupervised Learning</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        $("#gfg-table-column-toggle").table - columntoggle({
            columnBtnText: "Show columns"
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Column-Toggle Table columnBtnText Option

Reference: https://api.jquerymobile.com/table-columntoggle/#option-columnBtnText


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!