我这里有一个代码,这是一个表数据的示例,我们可以在每个列中进行过滤,现在我想在具有多个值的状态字段中进行过滤,例如:如果我想打印已完成的数据,该怎么办?正在进行和暂停,那么这些数据应该是唯一要打印的数据,我该怎么办?,请帮忙!
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px" class='Province'>Province1
</td>
<td width="20px" class='LGU'>Municipality/LGU1
</td>
<td width="20px" class='Barangay'>Barangay1
</td>
<td width="30px" class='Project'>Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px" class='Status'>completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2013
</td>
<td width="20px" class='Province'>Province2
</td>
<td width="20px" class='LGU'>Municipality/LGU2
</td>
<td width="20px" class='Barangay'>Barangay2
</td>
<td width="30px" class='Project'>Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px" class='Status'>ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px" class='Province'>Province3
</td>
<td width="20px" class='LGU'>Municipality/LGU3
</td>
<td width="20px" class='Barangay'>Barangay3
</td>
<td width="30px" class='Project'>Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px" class='Status'>suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px" class='Province'>Province4
</td>
<td width="20px" class='LGU'>Municipality/LGU4
</td>
<td width="20px" class='Barangay'>Barangay4
</td>
<td width="30px" class='Project'>Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px" class='Status'>cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
答案 0 :(得分:1)
您可以在此处使用status
过滤器中的关键字分隔符,并在拆分此分隔符后将其作为array
读取。
这是一个使用空格作为分隔符的代码,并在多个值上过滤状态列:
let val = this.value;
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
let vals = val.split(" ").map(function(v) {
return v.toLowerCase();
});
return vals.some(function(v) {
return content.indexOf(v) > -1;
});
}).length === len;
}).show();
注意:
这只会在status
列中使用,我在这里制作了一个完整的演示代码段。
<强>演示:
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function() {
var $i = $filters.filter(function() {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function() {
return this.className
}).get().join(',.');
if (this.id != 'Status') {
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
} else {
let val = this.value;
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
let vals = val.split(" ").map(function(v) {
return v.toLowerCase();
});
return vals.some(function(v) {
return content.indexOf(v) > -1;
});
}).length === len;
}).show();
}
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px" class='Province'>Province1
</td>
<td width="20px" class='LGU'>Municipality/LGU1
</td>
<td width="20px" class='Barangay'>Barangay1
</td>
<td width="30px" class='Project'>Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px" class='Status'>completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2013
</td>
<td width="20px" class='Province'>Province2
</td>
<td width="20px" class='LGU'>Municipality/LGU2
</td>
<td width="20px" class='Barangay'>Barangay2
</td>
<td width="30px" class='Project'>Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px" class='Status'>ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px" class='Province'>Province3
</td>
<td width="20px" class='LGU'>Municipality/LGU3
</td>
<td width="20px" class='Barangay'>Barangay3
</td>
<td width="30px" class='Project'>Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px" class='Status'>suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px" class='Province'>Province4
</td>
<td width="20px" class='LGU'>Municipality/LGU4
</td>
<td width="20px" class='Barangay'>Barangay4
</td>
<td width="30px" class='Project'>Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px" class='Status'>cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
这是使用Status
过滤器下拉列表的代码段:
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function() {
var $i = $filters.filter(function() {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function() {
return this.className
}).get().join(',.');
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
$("#Status").on("change", function() {
let val = $(this).val();
$rows.hide().filter(function() {
return $('td', this).filter(function() {
var content = this.textContent;
let vals = val.map(function(v) {
return v.toLowerCase();
});
return vals.some(function(v) {
return content.indexOf(v) > -1;
});
}).length >0;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<select multiple class="Status" id="Status" style="width: 100px;">
<option value="completed">completed</option>
<option value="ongoing">ongoing</option>
<option value="suspended">suspended</option>
<option value="cancelled">cancelled</option>
</select>
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px" class='Province'>Province1
</td>
<td width="20px" class='LGU'>Municipality/LGU1
</td>
<td width="20px" class='Barangay'>Barangay1
</td>
<td width="30px" class='Project'>Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px" class='Status'>completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2013
</td>
<td width="20px" class='Province'>Province2
</td>
<td width="20px" class='LGU'>Municipality/LGU2
</td>
<td width="20px" class='Barangay'>Barangay2
</td>
<td width="30px" class='Project'>Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px" class='Status'>ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px" class='Province'>Province3
</td>
<td width="20px" class='LGU'>Municipality/LGU3
</td>
<td width="20px" class='Barangay'>Barangay3
</td>
<td width="30px" class='Project'>Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px" class='Status'>suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px" class='Province'>Province4
</td>
<td width="20px" class='LGU'>Municipality/LGU4
</td>
<td width="20px" class='Barangay'>Barangay4
</td>
<td width="30px" class='Project'>Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px" class='Status'>cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
我希望它符合您的需求。