Open In App

jQuery Mobile Column-Toggle Table create Event

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Column-Toggle Table create Event. This event is triggered when the Column-Toggle Table widget is created.

Syntax:  

Initializing the Column-Toggle Table create event.

$( ".selector" ).table({
create: function( event, ui ) {}
});
  • Binding an event listener to the tablecreate event.

    $( ".selector" ).on( "tablecreate", function( event, ui ) {} );

Parameters: It accepts a callback function that has two parameters.

  • event: It accepts event type value.
  • ui: It accepts Object type value. The ui object can be empty but used for consistency with other events.

CDN Link: First, add jQuery Mobile scripts needed for your project.

<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>

Example: This example describes the jQuery Mobile Column-Toggle Table create Event.

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 create Event</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>
        </div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#GFG").table({
                create: function (event, ui) { }
            });
            $("#GFG").on("tablecreate", function (event, ui) { });
            $("#log").html('Column-Toggle Table widget has been created.');
        });
    </script>
</body>
  
</html>


Output:

jQuery Mobile Column-Toggle Table create Event

jQuery Mobile Column-Toggle Table create Event

Reference: https://api.jquerymobile.com/table-columntoggle/#event-create



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