Skip to content
Related Articles

Related Articles

jQuery Mobile Column-Toggle Table enhanced 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 enhanced option. The enhanced option indicates the markup necessary for the column toggle. The default value is false. If set to true, the table shrinks, and the Column Button disappears.

Syntax: The enhanced option takes a boolean value and is initialized as follows:

$("#gfg-table-column-toggle").table-columntoggle({
    enhanced: true,
});
  • To get the enhanced option after initialization, use the following syntax.

    var enhancedOpt = $("#gfg-table-column-toggle")
    .table-columntoggle("option", "enhanced");
  • To set the enhanced option after initialization, use the following syntax.

    $("#gfg-table-column-toggle")
    .table-columntoggle("option", "enhanced", "true");

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 this example, we have set the enhanced option to true.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <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 enhanced Option</h3>
            <table data-role="table"
                   id="gfg-table-column-toggle" 
                   data-mode="columntoggle" 
                   class="ui-responsive table-stroke" 
                   data-enhanced="true">
                <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({
            enhanced: true,
        });
    </script>
</body>
  
</html>


Output

jQuery Mobile Column-Toggle Table enhanced Option

jQuery Mobile Column-Toggle Table enhanced Option

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!