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 data-iconpos="notext" href="#panel" data-role="button" data-icon="bars"></a>
     
  <h1 class="ui-title" role="heading">NBA FANATICO</h1>
    <div class="ui-btn-right"  data-type="horizontal">
 <div id="search">
     <a data-iconpos="notext" href="" data-role="button" data-icon="search" ></a>
   </div>
     
      <a data-iconpos="notext" href="#page2" data-role="button" data-icon="home" ></a>
      <a data-iconpos="notext" href="#page1" data-role="button" data-icon="delete" ></a>
    </div>
</div>

<br />
 <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>
    </tr>
    
    
    </tbody>
     </table>

</div>
</div>

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

#tbcontent{

zoom:80%;


}

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();
});