How to modify filtering script for multiple <tfoot> from different table?
I make some table use DataTable. I make this table can filtering data from each column. This is some tfoot for filtering:
<tfoot>
<tr>
<th><input type="text" name="search_Date" value="Search Date" class="search_init" /></th>
<th><input type="text" name="search_Model" value="Search Model" class="search_init" /></th>
<th><input type="text" name="search_Qty" value="Search Qty" class="search_init" /></th>
<th><input type="text" name="search_Name" value="Search Name" class="search_init" /></th>
</tr>
</tfoot>
But how if I want to make the same thing if I make some additional table. So, we have two table in this page and also have a tfoot
like the first table.
<tfoot>
<tr>
<th><input type="text" name="search_Date" value="Search Date" class="search_init" /></th>
<th><input type="text" name="search_Line" value="Search Line" class="search_init" /></th>
<th><input type="text" name="search_Model" value="Search Model" class="search_init" /></th>
<th><input type="text" name="search_Lot_no" value="Search Lot_no" class="search_init" /></th>
<th><input type="text" name="search_Range" value="Search Range" class="search_init" /></th>
</tr>
</tfoot>
I don't know how to modify the dataTable's script. The script is like below:
var asInitVals = new Array();
$(document).ready(function() {
var oTable;
var aTable;
oTable = $("#datadaily").dataTable({.......}); //1st table
aTable = $("#unfinish").dat开发者_如何学JAVAaTable({.......}); //add. table
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
aTable.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 = "";
this.value = "";
}
});
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
});
Could I use one filtering script to control two tfoot? Ff so, how do I do it?
You must specify what's index of the tfoot you've click. Using code:
var index = $(this).index("table tfoot");
Then you should change your data struct:
var TABLE_COUNT = 2;
var DATA_ATABLE = 0;
var DATA_OTABLE = 1;
var tableData = [];
tableData[DATA_ATABLE] = $("#datadaily").dataTable({.......
tableData[DATA_OTABLE] = $("#unfinish").dataTable({.......
Here is demo source:
<table class="table-test" border="1">
<thead>
<tr>
<th>Colum1</th>
<th>Colum2</th>
<th>Colum3</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>F1</th>
<th>F2</th>
<th>F3</th>
</tr>
</tfoot>
</table>
<table class="table-test" border="1">
<thead>
<tr>
<th>Colum1</th>
<th>Colum2</th>
<th>Colum3</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>F1</th>
<th>F2</th>
<th>F3</th>
</tr>
</tfoot>
</table>
<script>
/*@const*/
var TABLE_COUNT = 2;
var DATA_ATABLE = 0;
var DATA_OTABLE = 1;
var tableData = [];
tableData[DATA_ATABLE] = $("#datadaily").dataTable({.......
tableData[DATA_OTABLE] = $("#unfinish").dataTable({.......
$(".table-test tfoot").click(function(){
var index = $(this).index(".table-test tfoot");
//@Todo
tableData[index] = ...................
});
</script>
精彩评论