Question

我有一张这样的表：

enter image description here

我想在表格“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>

我该怎么做？

Answer 1

我建议你使用jquery datatables插件，它很简单易用

http://datatables.net/

要使用它，请确保标签中的标头和标签中的标题，然后只需设置以下内容

        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");
            }

使用jQuery动态过滤

1 个答案: