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>
     
     
     
     

         

<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>
 ...

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


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