Open In App

jQuery Mobile Column-Toggle Table columnPopupTheme Option

Improve
Improve
Like Article
Like
Save
Share
Report

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 columnPopupTheme Option. The columnPopupTheme option sets the color scheme for the column chooser popup checkboxes dialog.

Syntax: We need to pass a single character to the columnPopupTheme option from a-z where each character represents a specific color scheme. To initialize the option, use the following syntax.

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

    // Get the option
    var colPopupThemeOpt = $(“#gfg-table-column-toggle”).table-columntoggle(“option”, “columnPopupTheme”);

  • To set the columnPopupTheme after initialization, use the following syntax:

    // Set the option
    $(“#gfg-table-column-toggle”).table-columntoggle(“option”, “columnPopupTheme”, “b”);

CDN Links: Use the following CDN links 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, we have used the dark theme for the column popup by using the character “b” for the columnBtnTheme option.

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>
    <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 columnPopupTheme Option
            </h3>
            <table data-role="table" id="gfg-table-column-toggle" 
                   data-mode="columntoggle"
                   class="ui-responsive table-stroke"
                   data-column-popup-theme="b">
                <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({
            columnPopupTheme: "b"
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Column-Toggle Table columnPopupThemeOption

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



Last Updated : 20 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads