jQuery Mobile Column-Toggle Table columnBtnText Option
Last Updated :
26 Jan, 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 columnBtnText option. The columnBtnText option sets the Column button text which is by-default ‘Columns…’ which can be changed by this option.
Syntax: The columnBtnText option takes a string value and is initialized as follows:
$("#gfg-table-column-toggle").table-columntoggle({
columnBtnText: "Show columns"
});
To get after initialization, use the following syntax.
var columnBtnTextOpt = $("#gfg-table-column-toggle")
.table-columntoggle("option", "columnBtnText");
To set after initialization, use the following syntax.
$("#gfg-table-column-toggle").table-columntoggle(
"option", "columnBtnText", "Show columns");
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 the following example, the columnBtnText option is set to “Show columns”.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< 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 columnBtnText Option</ h3 >
< table data-role = "table" id = "gfg-table-column-toggle"
data-mode = "columntoggle"
class = "ui-responsive table-stroke"
data-enhanced = "false"
data-column-btn-text = "Show columns" >
< 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({
columnBtnText: "Show columns"
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://api.jquerymobile.com/table-columntoggle/#option-columnBtnText
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...