Use radio buttons instead of Checkbox popup in Jquery Mobile Table
Well searching for the code or plugin or anything similar to what i need...
SCREENSHOT:-
The screenshot say it all, basically i want to embed radio buttons for column toggle in jquery mobile tables, so that user can get one column which he selects... Same like a radio button functions...
For the table we implement this line in our code:-
<table class="ui-responsive" data-role="table" data-mode="columntoggle" data-column-btn-theme="d" data-column-btn-text="Click to select week's day..." data-column-popup-theme="c">
Is their a plugin for it or any custom code available? How to do this?
Solution
Working example: http://jsfiddle.net/Gajotres/f5eTT/
Only difference to normal toggle table is that your main column must also be your first column.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Movie Title</th>
<th data-priority="2">Rank</th>
<th data-priority="4">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1</td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>2</td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>3</td>
<td>1972</td>
<td>97%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>4</td>
<td>1939</td>
<td>96%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>5</td>
<td>1962</td>
<td>94%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
<td>6</td>
<td>1964</td>
<td>92%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>7</td>
<td>1967</td>
<td>91%</td>
<td>122</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>8</td>
<td>1939</td>
<td>90%</td>
<td>72</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>9</td>
<td>1952</td>
<td>89%</td>
<td>85</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>10</td>
<td>2010</td>
<td>84%</td>
<td>78</td>
</tr>
</tbody>
</table>
<table data-role="table" id="table-test" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Movie Title</th>
<th data-priority="2">Rank</th>
<th data-priority="4">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1</td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>2</td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>3</td>
<td>1972</td>
<td>97%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>4</td>
<td>1939</td>
<td>96%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>5</td>
<td>1962</td>
<td>94%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
<td>6</td>
<td>1964</td>
<td>92%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>7</td>
<td>1967</td>
<td>91%</td>
<td>122</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>8</td>
<td>1939</td>
<td>90%</td>
<td>72</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>9</td>
<td>1952</td>
<td>89%</td>
<td>85</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>10</td>
<td>2010</td>
<td>84%</td>
<td>78</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Javascript :
$(document).on('pagebeforeshow', '.ui-page', function(){
alterTablePopup('table-column-toggle', 0);
alterTablePopup('table-alt',0);
});
function alterTablePopup(tableID, showColumnID) {
if($.mobile.activePage.find('#'+tableID).length > 0) {
// First unsellect everything, we must trigger click event so table look could change
cleanTableColumns(showColumnID, tableID);
$(document).on('popupafteropen', '#' + tableID + '-popup',function(event, ui) {
var popup = $(this);
//Hide old fieldset
popup.find('fieldset').hide();
$.mobile.activePage.find('#radio-fieldset').remove();
$('<fieldset>').attr({'data-role':'controlgroup','id':'radio-fieldset'}).appendTo(popup);
popup.find('input').each(function(i){
(i === showColumnID) ? $('<input>').attr({'name': tableID+'-radio','id': tableID+'-radio-'+i,'type':'radio','value':'v'+i,'checked':'checked','class':tableID+'-radio'}).appendTo('#radio-fieldset') : $('<input>').attr({'name':tableID+'-radio','id':tableID+'-radio-'+i,'type':'radio','value':'v'+i}).appendTo('#' + tableID + '-popup #radio-fieldset');
$('<label>').attr({'for':tableID+'-radio-'+i}).text($(this).prev().find('.ui-btn-text').text()).appendTo('#' + tableID + '-popup #radio-fieldset');
});
$('[type="radio"]').checkboxradio();
$.mobile.activePage.trigger('create');
});
$(document).on('popupafterclose', '#' + tableID + '-popup',function(event, ui) {
var popup = $(this);
$.mobile.activePage.find('#radio-fieldset').remove();
popup.find('fieldset').show();
});
$(document).on('vmouseup', '#' + tableID + '-popup #radio-fieldset .ui-controlgroup-controls .ui-radio', function(e){
if(e.handled !== true) // This will prevent event triggering more then once
{
var selectedRadio = $(this).find('[type="radio"]').attr('id').replace(tableID+"-radio-","");
cleanTableColumns(selectedRadio, tableID);
e.handled = true;
}
});
}
}
function cleanTableColumns(columnNo, tableID){
$('#' + tableID + '-popup').find('.ui-checkbox label').each(function(i){
($(this).hasClass('ui-checkbox-on')) ? $(this).trigger('vclick') : ''; // Unselect every selected field
(i == columnNo) ? $(this).trigger('vclick') : ''; // select first for further use
});
}
- how to change onclick event with jquery?
- Unexpected token error
- Unexpected token ( in jquery
- Randomize url in meta tag with jQuery?
- jQuery DataTables: control table width
- jQuery binding to a form submit
- How to link a selectInput to a DataTable to update the table based on the selections?
- Can't hide items per page and pagination in datatable when less then number displayed
- Generic way to detect if html form is edited
- How to find the following HTML Element
- How to use inline JavaScript in HTML?
- How to disable scrolling temporarily?
- How to disable scroll without hiding it?
- Getting a list of all dates within a given date range in JavaScript
- moving a div when required
- Why am I getting undefined property when calling a javascript function from another javascript file?
- unique attribute values with jquery
- Get all values from column without duplicates in JavaScript / jQuery
- How can I use jQuery.load to replace a div including the div
- Defining a HTML template to append using jQuery
- How to make buttons that increment and decrement a value when clicked?
- How to stop scrolling of a div when it reaches on a specific div?
- Onchange open URL via select - jQuery
- Uncaught TypeError: 'append' called on an object that does not implement interface URLSearchParams
- Get week of the month
- Not able to trim displayed value in Dropdown
- TypeError: $(...).owlCarousel is not a function
- Load image when the slide is in the viewport slick.js
- How to style horizontal custom scrollbar for a single image?
- Show pause/play icons when hover/mouseenter over video