我使用datatables.So表示一些数据在此操作中我正确获取数据并且排序选项也可用,但问题是搜索框和列表框未正确对齐。我正在发布代码......
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#metalPager').dataTable( {
"sPaginationType": "full_numbers",
"bFilter":true,
"aoColumns": [
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }
]
} );
} );
</script>
<table width='70%' cellpadding="0" cellspacing="0" border="1"
class="metalDisplay">
<thead>
<tr>
<th>Congratulations....</th>
</tr>
</thead>
</table>
</br>
<table align="center" width='70%' cellpadding="0" cellspacing="0" border="1" id="metalPager">
<thead>
<tr>
<th>SAPCODE</th>
<th>FIRST NAME</th>
<th>LAST NAME</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<logic:iterate name="listOfSTPUsers" id="listOfSTPUsersId">
<tr>
<td><bean:write name="listOfSTPUsersId" property="sapcode"/></td>
<td><bean:write name="listOfSTPUsersId" property="firstname"/></td>
<td><bean:write name="listOfSTPUsersId" property="lastname"/></td>
<td><bean:write name="listOfSTPUsersId" property="status"/></td>
</tr>
</logic:iterate>
</tbody>
</table>
这是dataTables的css
.dataTables_wrapper { position: relative; min-height: 302px; _height: 302px; clear: both; }
.dataTables_processing { position: absolute; top: 0px; left: 50%; width: 250px; margin-left: -125px; border: 1px solid #ddd; text-align: center; color: #999; font-size: 11px; padding: 2px 0; }
.dataTables_length { width: 40%; float: left; font-size:13px; font-weight:bold; color:#70A76A; padding: 5px 0; }
.dataTables_filter { width: 50%; float: right; text-align: right; font-size:13px; font-weight:bold; color:#70A76A; padding-bottom:35px; }
.dataTables_info { width: 60%; float: left; font-size:13px; color:#70A76A; padding-top:5px; }
.dataTables_paginate { width: 44px; * width: 50px; float: right; text-align: right; padding-top:5px; }
这是我的代码。我无法正确对齐它。请帮助