我想在没有数据表插件和使用 jquery 或 javascript 的情况下搜索表的某一列以查找一系列数字。
最小值的文本框和最大值的文本框。
我对某些列进行了简单的搜索,但我不知道如何使其搜索范围。
javascript :
function SFNAAB_Code() {
var input, filter, table, tr, td, i;
input = document.getElementById("SFNAAB_CodeInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
HTML :
<input type="text" id="SFNAAB_CodeInput" onkeyup="SFNAAB_Code()"
placeholder="Search By NAAB Code...">
<table id="myTable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.RegNo)
</th>
<th>
@Html.DisplayNameFor(model => model.NAAB_CODE)
</th>
<th>
@Html.DisplayNameFor(model => model.NAME)
</th>
<th>
@Html.DisplayNameFor(model => model.ICC)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.RegNo)
</td>
<td>
@Html.DisplayFor(modelItem => item.NAAB_CODE)
</td>
<td>
@Html.DisplayFor(modelItem => item.NAME)
</td>
<td>
@Html.DisplayFor(modelItem => item.ICC)
</td>
</tr>
}
</tbody>
</table>
使用具有以下选项的数据表插件的范围搜索解决了它:
var table = $('#myTable').DataTable({
paging: false,
info: false
});
并且还从 sDOM 中删除了 f。
继承人的代码:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0;
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
$(document).ready(function() {
var table = $('#example').DataTable({
paging: false,
info: false
});
$('#min, #max').keyup( function() {
table.draw();
} );
} );
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句