在JSF中使用JQuery中的DataTable进行操作

时间:2017-04-26 13:31:59

标签: jquery jsf datatable

如何重绘或销毁我在xhtml中声明的数据表。我尝试了一切,但它根本不起作用。

这是我的DataTable:

<h:dataTable  id= "book" var="book" value="#{bean.booksByAuthor}" rowClasses="even-row,odd-row">
                <h:column>
                    <f:facet name="header">Title</f:facet>
                    <h:outputText value="#{book.title}" class=""/>
                </h:column>
                <h:column>
                    <f:facet name="header">ISBN</f:facet>
                    <h:outputText value="#{book.ISBN}"/>
                </h:column>
                <h:column>
                    <f:facet name="header">Price</f:facet>
                    <h:outputText value="#{book.price}"/>
                </h:column>
                <h:column>
                    <h:commandButton value="Buy" action="buyItem">
                        <f:param name="book2Buy" value="#{book.ISBN}" />
                    </h:commandButton>
                </h:column>
            </h:dataTable>

这就是我试图在我的脚本中访问它的方式:

<script>
        function change() {
            event.preventDefault();
            $('#f:\\book').DataTable().clear();
            $('#f:\\book').DataTable().destroy();
        }
    </script>

这些是我的进口商品:

<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.12.1/jquery-ui.js"></script>

    <!--    Data Table-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/datatables.min.js"></script>

我甚至尝试像$("$book)一样访问该表,并向其调用htmlappend。但没有任何作用。我甚至没有任何错误。

有任何建议/建议吗?

1 个答案:

答案 0 :(得分:0)

如果你尝试使用jquery $('#f:\\book')来获取元素,那么因为你正在寻找一个名为f:\ book的id。

如果你想在jQuery中获取数据表,你应该直接尝试选择器书

function change() {
    event.preventDefault();
    $('#book').DataTable().clear();
    $('#book').DataTable().destroy();
}

同时删除id =和&#34; book&#34;之间的空格。