jQuery Mobile Column-Toggle Table classes.columnBtn Option
Last Updated :
07 Feb, 2022
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 classes.columnBtn Option. The classes.columnBtn option is a class assigned to the column toggle button.
Syntax:
<div class="ui-table-columntoggle-btn">
// content
</div>
Parameter: This option does not accept any parameter/argument.
Return Type: This option does not return any value.
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 jQuery Mobile Column-Toggle Table classes.columnBtn 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 src =
</ script >
< script src =
</ script >
</ head >
< body >
< center >
< div data-role = "page" id = "gfgpage" >
< div >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
</ div >
< div data-role = "main" class = "ui-content" >
< h3 >
jQuery Mobile Column-Toggle Table classes.columnBtn Option
</ h3 >
< table data-role = "table"
id = "gfg-table-column-toggle"
data-mode = "columntoggle"
class = "ui-table-columntoggle-btn"
data-column-btn-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 >
</ center >
</ body >
</ html >
|
Output:
jQuery Mobile Column-Toggle Table classes.columnBtn Option
Reference: https://api.jquerymobile.com/jQuery-Mobile-Panel, jQuery-Mobile, -columntoggle/#option-classes.columnBtn
Share your thoughts in the comments
Please Login to comment...