我有一张这样的表:
我想在表格“Show Filter”上方制作过滤器以实时过滤表格。例如,当用户更改年龄输入的值时,表格将相应更改而无需任何提交。但我不知道我该怎么做。该表的HTML代码如下:
<table class="table table-bordered table-hover data-display">
<thead>
<tr>
<th>Count</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Religion</th>
<th>Knowledge Level</th>
</tr>
</thead>
<tbody>
<c:forEach var="studentInfo" items="${ studentInfo }" varStatus="i">
<c:if test="${ studentInfo.graduate eq false }">
<tr>
<td>${ i.count }</td>
<td><a href="#">${ studentInfo.name }</a></td>
<td>${ studentInfo.age }</td>
<td>${ studentInfo.gender }</td>
<td>${ studentInfo.religion }</td>
<td>${ studentInfo.knowledgeLevel }</td>
</tr>
</c:if>
</c:forEach>
</tbody>
</table>
我该怎么做?
答案 0 :(得分:0)
我建议你使用jquery datatables插件,它很简单易用
要使用它,请确保标签中的标头和标签中的标题,然后只需设置以下内容
var oTable = $("#yourtableID").dataTable({
"oLanguage": {
"sUrl": "IFYOUWANTOTHERLANGUAGE.txt"
},
"sDom": 'T<"clear">lfrtip',
"iDisplayLength": 20,
"aLengthMenu": [[20, 40, 80, -1], [20, 40, 80, "All"]]
});
然后当你想要过滤时,可以使用fnFilter来做,我附上部分代码作为参考,请参考网站了解详情
if ( selected_val == "toplevel"){
oTable.fnFilter( '^$', "6", true, false );
//oTable.fnDraw()
} else if (selected_val == "topall"){
//alert("clearing");
oTable.fnFilter("","6");
oTable.fnDraw();
} else {
oTable.fnFilter("^"+selected_val+"$", "6", "true");
}