【发布时间】：2011-10-02 20:25:09
【问题描述】：
我已经在我的应用程序中集成了 jQuery 数据表。我正在使用单个列过滤（使用“输入”元素）。它进来了
脚
HTML 标签。所以从逻辑上讲，它在桌子上。现在我想要的是改变它的位置。我希望它高于
头
html 的标签。谁能指导我如何更改单个列过滤器的位置。虽然他们告诉我们使用 DOM 位置，但我无法理解我们如何做到这一点的逻辑。
Javascript 代码
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
var asInitVals = new Array();
$(document).ready(function(){
var oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'desc'] ],
"bFilter": true,
"bLengthChange": false,
"iDisplayLength": 10,
"bStateSave": true,
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
{ "bSortable": false }
],
"aoColumnDefs": [
{ "sType": 'string-case', "aTargets": [ 2 ] }
],
"oLanguage": {
"sEmptyTable": "There is no order found."
}
});
$("#example_filter").hide();
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
});
/** Support functions to provide a little bit of 'user friendlyness' to the textboxes in the footer **/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").focus( function () {
if ( this.className == "search_init" ){
this.className = "search_init";
this.value = "";
}
});
$("tfoot input").blur( function (i) {
if ( this.value == "" ){
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
$(".sb").live( 'click', function(e) {
Shadowbox.open(this);
e.preventDefault();
});
});
html代码，
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th align="left" width="60">Invoice</th>
<th align="left" width="75">Order Date</th>
<th align="left" width="230">Company</th>
<th align="left" width="60">Promo</th>
<th align="left" width="40">Terms</th>
<th align="left" width="50">Total</th>
<th align="left" width="70">Status</th>
<th align="left" width="70"></th>
</tr>
</thead>
<tbody>
<?php
//$db->debug=1;
if(empty($stid)){
$q="select * from ".ORDER." where order_status=1";
}else{
$q="select * from ".ORDER." where order_status=".intval($stid)."";
}
$rs = $db->Execute($q);
if($rs->RecordCount()>0){
while(!$rs->EOF){
?>
<tr class="gradeX">
<td align="left" valign="top"><?=$rs->fields('order_name');?></td>
<td align="left" valign="top"><?=date('M d, Y',strtotime($rs->fields('order_date')));?></td>
<?php
$q1="select city_name from ".CITY." where city_id=".$rs->fields('delivery_city');
$cityInfo = $db->GetRow($q1);
$q2="select state_name from ".STATE." where state_id=".$rs->fields('delivery_state');
$stateInfo = $db->GetRow($q2);
$q3="select country_name from ".COUNTRY." where country_id=".$rs->fields('delivery_country');
$countryInfo = $db->GetRow($q3);
?>
<td align="left" valign="top"><?=$rs->fields('delivery_company')."<br />".$rs->fields('cust_name')."<br />".$rs->fields('delivery_street_address').", ".$cityInfo['city_name'].", ".$stateInfo['state_name']." ".$rs->fields('delivery_postcode')."<br />".$countryInfo["country_name"];?></td>
<td align="left" valign="top"><?=$rs->fields('order_promo');?></td>
<td align="left" valign="top"><?=$rs->fields('order_terms');?></td>
<td align="left" valign="top"><?=$rs->fields('order_total');?></td>
<td align="left" valign="top">
<?php
if($rs->fields('order_status')=="1"){
echo "Pending";
}else if($rs->fields('order_status')=="2"){
echo "Approved";
}
?>
</td>
<td align="center" valign="top">
<a href="order-detail/<?=$rs->fields('order_id');?>" rel="shadowbox;width=550;height=300;" class="sb"><img src="images/icons/details.png" width="13" height="16" alt="Detail" title="Detail" /></a>
<a href="sale-edit/<?=$rs->fields('order_id');?>" rel="shadowbox;width=550;height=450;" class="sb"><img src="images/icons/edit.png" width="13" height="16" alt="Edit" title="Edit" /></a>
<a href="javascript:void(0);" onclick="javascript:DeleteSale(<?=$rs->fields('order_id');?>);"><img src="images/icons/delete.png" width="14" height="15" alt="Delete" title="Delete" /></a>
<a href="invoice/<?=$rs->fields('order_id');?>" target="_blank"><img src="images/icons/invoice.png" width="16" height="16" alt="Generate Invoice" title="Generate Invoice" /></a>
<?php if($rs->fields('order_status')=="1"){?>
<a href="order-approve/<?=$rs->fields('order_id');?>"><img src="images/icons/approve.png" width="16" height="16" alt="Order Approve" title="Order Approve" /></a>
<?php }?>
</td>
</tr>
<?php
$rs->MoveNext();
}
}
?>
</tbody>
<tfoot>
<tr>
<th align="left" valign="top">Invoice No <input type="text" name="invoice_no" value="Invoice No" class="search_init" /></th>
<th align="left" valign="top">Order Date <input type="text" name="order_date" value="Order Date" class="search_init" /></th>
<th align="left" valign="top">Company <input type="text" name="company" value="Company" class="search_init" /></th>
<th align="left" valign="top">Promo <input type="text" name="promo" value="Promo" class="search_init" /></th>
<th align="left" valign="top">Terms <input type="text" name="terms" value="Terms" class="search_init" /></th>
<th align="left" valign="top">Total <input type="text" name="total" value="Total" class="search_init" /></th>
<th align="left" valign="top"> <input type="hidden" name="status" value="status" class="search_init" /></th>
<th align="left" valign="top"> <input type="hidden" name="emptyrow" value="" class="search_init" /></th>
</tr>
</tfoot>
</table>
</div>
提前致谢，
【问题讨论】：
标签： jquery dom positioning datatables