Jquery Datatables positioning features

Dev Shed Forums Sponsor:

March 12th, 2013, 01:40 PM

harrjm

Contributing User

Join Date: Jun 2011

Posts: 33

Time spent in forums: 15 h 6 m 53 sec
Reputation Power: 2

Jquery Datatables positioning features

I have a basic Jquery DataTable using thee following code. This gives you the table as well as a page size drop down to select 10, 25, 50 etc. per page as well as text that says "Displaying 1 to 10 of 50" kind of thing. However they are stuck to the far left and I just want to be able to position them otherwise. However I dont have them (or know how to have them) as an actual html element so that I can put them into divs or whatever I would need to do to simply align them with the right/left side of the table. Any help?

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>

	<title>CS Consultant Management System</title>

<style>

#example {
margin-left: auto;
width:980px;
}
#example_paginate {
margin-top:25px;
font-family:arial;
}
a.ui-button, a.ui-button:link, a.ui-button:visited {
position: relative;
left: 50%;
border:solid 1px black;
color:black;
background:lightgray;
padding:5px;
text-align:center;
}
.dataTables_filter {
display: none; 
}
a.ui-button:hover, a.ui-button:active {
margin-left:15px;
border:solid 1px black;
color:black;
background:white;
padding:5px;
text-align:center;
cursor:pointer;
float: right;
}
a.ui-state-disabled, a.ui-state-disabled:link, a.ui-state-disabled:visited, a.ui-state-disabled:hover, a.ui-state-disabled:active {

border:solid 1px black;
color:black;
background:gray;
padding:5px;
text-align:center;
cursor:pointer;
}
table {
margin-left: auto;
margin-right: auto;
border-collapse:collapse;
border:solid 1px black;
margin-top:25px;
}

td {
border:solid 1px black;
padding:10px;
}
th {
padding:10px;
}
table.dataTable th{background-color: lightgrey;}
table.dataTable tr.odd { background-image: url("white_wall.png");  border:1px lightgrey;}
 table.dataTable tr.even{  background-color: white;  border:1px lightgrey; }
</style>
                <link rel="stylesheet" type="text/css" href="othercss.css">
<script type="text/javascript" src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/complete.js"></script>
		<script src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        	<script src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
		<script type="text/javascript">
$(document).ready(function(){
     $('#example').dataTable({
             bJQueryUI: true,
			 "sPaginationType": "full_numbers",
			 "aaSorting": [[ 6, "asc" ]],
			 "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 0,1,2,3,4,5,6 ] }
       ]
})

		  .columnFilter({
		  
			aoColumns: [ { type: "text"  },
				     { type: "select", values: ['Bernstein', 'Daughtrey', 'Fox', 'Grove', 'Harris', 'Kirkpatrick'
					     , 'Mayfield', 'Norton', 'Simmons', 'Sprague' ]},
				     {type: "select", values: ['139', '239', '240', '345', '350', '450', '460']},
					 {type: "select", values: ['001', '002', '003', '004', '005', '006']},
					 { type: "text"  },
				     { type: "select", values: [ 'PA', 'LAB']},
				     null 
				]

		});
});

</script>

</head>
<body>
<center><img id = "logo" src="logo.png" alt="leftbar" onclick = "window.location.href='mainpage.html"></img></center>

			   
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>Student</th>
			<th>Teacher</th>
			<th>Course</th>
			<th>Section</th>
			<th>Assignment</th>
			<th>Assignment Type</th>
			<th>Priority</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Student</th>
			<th>Teacher</th>
			<th>Course</th>
			<th>Section</th>
			<th>Assignment</th>
			<th>Assignment Type</th>
			<th>Priority</th>
		</tr>
	</tfoot>
	<tbody>

		<tr class="gradeX">
			<td>Justin</td>
			<td>Bernstein</td>
			<td>240</td>
			<td>001</td>
			<td>PA 1</td>
			<td>PA</td>
			<td>1</td>
		</tr>
				<tr class="gradeX">
			<td>Joe</td>
			<td>Sprague</td>
			<td>139</td>
			<td>002</td>
			<td>PA 2</td>
			<td>PA</td>
			<td>2</td>
		</tr>
				<tr class="gradeX">
			<td>Bob</td>
			<td>Norton</td>
			<td>350</td>
			<td>001</td>
			<td>-</td>
			<td>Lab</td>
			<td>5</td>
		</tr>
				<tr class="gradeX">
			<td>Sam</td>
			<td>Mayfield</td>
			<td>460</td>
			<td>006</td>
			<td>PA 3</td>
			<td>PA</td>
			<td>6</td>
		</tr>
				<tr class="gradeX">
			<td>Matt</td>
			<td>Grove</td>
			<td>350</td>
			<td>003</td>
			<td>-</td>
			<td>Lab</td>
			<td>4</td>
		</tr>
				<tr class="gradeX">
			<td>Mark</td>
			<td>Fox</td>
			<td>239</td>
			<td>005</td>
			<td>-</td>
			<td>Lab</td>
			<td>3</td>
		</tr>
				<tr class="gradeX">
			<td>Sue</td>
			<td>Harris</td>
			<td>345</td>
			<td>002</td>
			<td>PA 1</td>
			<td>PA</td>
			<td>7</td>
		</tr>
		

	
	</tbody>
</table>

</body>
</html>

Jquery Datatables positioning features

Developer Shed Advertisers and Affiliates