Open In App
Related Articles

jQuery Mobile Column-Toggle Table refresh() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
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 refresh() Method. This method is used to updates the labels in the cells. 

Syntax:  

$( ".selector" ).table-columntoggle( "refresh" );

Parameters: This method does not accept any argument.

Return type: This method refresh the widget.

CDN Link: Below are some jQuery Mobile scripts that will be needed for your project so add these to your 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: This example describes the uses of the jQuery Mobile Column-Toggle Table refresh() Method.

HTML

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src=
"//code.jquery.com/jquery-3.2.1.min.js">
    </script>
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>
</head>
  
<body>
    <center>
        <div data-role="page">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>jQuery Mobile Column-Toggle Table refresh Method</h3>
        <div id="log"></div>
        <div data-role="header">
        </div>
        <div role="main">
            <table data-role="table"
                id="GFG"
                data-mode="columntoggle">
                <thead>
                    <tr>
                        <th data-priority="1">
                          Company Name
                        </th>
                        <th data-priority="persist">
                          Website
                        </th>
                        <th data-priority="2">
                          Year
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>GeeksforGeeks</th>
                        <td><a href="https://www.geeksforgeeks.org/"
                            data-rel="external">
                          WWW.GeeksforGeeks.org
                          </a>
                        </td>
                        <td>2010</td>
                    </tr>
                </tbody>
            </table>
            <input type="button" 
                   id="btn"
                   style="width:250px;" 
                   value="Refresh">
        </div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#btn").on('click', function () {
                $("#log").html('Column-Toggle Table widget has been Refresh.');
                $("#GFG").table-columntoggle("refresh");
            });
        });
    </script>
</body>
  
</html>

                    

Output:

jQuery Mobile Column-Toggle Table refresh() Method

jQuery Mobile Column-Toggle Table refresh Method

Reference: https://api.jquerymobile.com/table-columntoggle/#method-refresh



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