jQM 1.4 sortable list
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="page3" data-role="page">
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#panel" data-icon="bars" data-iconpos="notext" class="ui-btn-left"></a>
<!-- 2nd LEFT BUTTON FROM THE LEFT --> <a href="#" data-icon="search" id="search" data-iconpos="notext" class="ui-btn-left" style="margin-left: 30px"></a>
<!-- HEADER TITLE -->
<h1>NBA FANATICO</h1>
<!-- 1st RIGHT BUTTON FROM THE RIGHT --> <a href="#page1" data-icon="delete" data-iconpos="notext" class="ui-btn-right"></a>
<!-- 2nd RIGHT BUTTON FROM THE RIGHT --> <a href="#page2" data-icon="home" data-iconpos="notext" class="ui-btn-right" style="margin-right: 30px;"></a>
</div>
<div data-role="content" id="tbcontent">
<table cellpadding="2" cellspacing="2" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Points</th>
<th>Rebounds</th>
<th>Assist</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lebron James</td>
<td>27</td>
<td>11</td>
<td>10</td>
</tr>
<tr>
<td>Kobe Bryant</td>
<td>30</td>
<td>4</td>
<td>2</td>
...
CSS
.login-box {
margin: auto;
padding: auto;
background: none repeat scroll 0% 0% rgb(241, 241, 241);
border: 1px solid rgb(229, 229, 229);
width:300px;
}
.ui-field-contain {
border-bottom-width: 0px;
}
#loginbtn {
text-align: center;
width: 150px;
margin: auto;
}
#loginprompt {
text-align: right;
}
#loginprompt h4 {
text-align: left;
font-size: 14px;
}
#header {
text-align: center;
}
#header h5 {
color: #373E4A;
font-size: 11px;
font-family: Courier;
}
#header h3 {
font-family: sans-serif;
}
#login {
width: 85%;
margin:auto;
}
#icons {
text-align: right;
}
#icons {
text-align: right;
clear:both;
}
#icons .left {
float: left;
padding-top:5px;
margin: 2px;
}
#nav hr {
width: 119%;
}
a#log.ui-link.ui-btn.ui-btn-a.ui-shadow.ui-corner-all {
background-color: #4289C1;
color: white;
font-size: 16px;
font-family: sans-serif;
}
}
.ui-panel {
bottom: 0 !important;
}
.ui-panel-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 4px !important;
padding-right: 30px !important;
height: 98% !important;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.ui-panel-inner .ui-btn {
white-space: normal;
font-size: 15px;
width: 170px;
}
.ui-btn.ui-corner-all.ui-btn-inherit.ui-btn-icon-left.ui-checkbox-on {
width: 150px;
}
#example_filter {
display:none;
padding-right: 100px;
}
label {
padding-top: 5px;
width: 200px;
}
#search {
float: left;
padding-top:-5px;
margin: 2px;
}
#example_filter {
margin: 9px 0 0 -118px;
position: absolute;
z-index: 9999999;
left: 50%;
top: 0;
}
JavaScript
$(document).ready(function () {
$('#example').dataTable({
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"oLanguage": {
"sSearch": ""
}
});
$('.dataTables_filter input').attr("placeholder", "enter seach terms here");
});
$('#search').click(function (e) {
$('#example_filter').toggle();
});
$(document).on("pagecontainershow", function () {
SetMinHeight();
});
$(window).on("resize orientationchange", function () {
SetMinHeight();
});
function SetMinHeight() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").css("min-height", content + "px");
}