I'm in the process of developing a small website using JSP and DataTables (currently only for the first table).
Here's what I have so far:
As you can observe, there seems to be an alignment issue with the search field position. I'm not sure what's causing this problem. What I want is for the end of the search field to stay within the boundaries of the bottom table.
Here is my HTML code :
<TABLE class="table table-striped table-bordered" id="usertable" style="max-width: 800px">
<thead>
<TR>
<Th colspan=2 align=center><FONT color="blue">Toto</font><br>
<i> (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1859e859eb1859e859edf9394">[email protected]</a>) </i><b><FONT color = "red">Administrator</b></font>
</Th>
<Th colspan=1 align=center><a href="UserUpdate?action=update&id=2">
<button type="submit" class="btn btn-default"><FONT color="green"><span class ="glyphicon glyphicon-user">
</span> Edit my account</FONT>
</button></a>
</Th>
</TR>
<TR>
<Th width=40% align="center"><span class ="glyphicon glyphicon-calendar"></span> Fishing Date</Th>
<Th width=40% align="center"><span class="glyphicon glyphicon-dashboard"></span> Fish Weight (Kg)</Th>
<Th width=20% align="center"><i>Action</i></Th>
</TR>
</thead>
<tbody>
<TR>
<TD width=40% align="center">03-07-2014</TD>
<TD width=40% align="center">24.0</TD>
<TD width=20% align=center><a href="FlightUpdate?action=delete&idvol=1">
<button type="submit" class="btn btn-default" onclick="return confirm('Ok to delete the flight?')">
<FONT color="purple"><span class="glyphicon glyphicon-trash"></span> Delete fishing trip</FONT>
</button></a></TD>
</TR>
<TR>
<TD width=40% align="center">22-08-2014</TD>
<TD width=40% align="center">42.0</TD>
<TD width=20% align=center><a href="FlightUpdate?action=delete&idvol=2">
<button type="submit" class="btn btn-default" onclick="return confirm('Ok to delete the flight?')">
<FONT color="purple"><span class="glyphicon glyphicon-trash"></span> Delete fishing trip</FONT>
</button></a></TD>
</TR>
</tbody>
</TABLE>
And here is my JS selector :
<script>
$(document).ready(function() {
$('#usertable').dataTable( {
"dom": '<"top"fp<"clear">>rt'
} );
//$('.carousel').carousel();
});
</script>
Of course, I am utilizing JQuery libraries as well:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.dataTables.css">
<link rel="stylesheet" href="css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
Is there any suggestion on how to align sDom correctly?
Thank you very much!