在 JSF 中操作 JQuery 中的 DataTable

Question

如何重绘或销毁我在 xhtml 中声明的数据表。我尝试了所有方法，但它根本不起作用。

这是我的数据表：

<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) 这样访问表格并调用html 或append。但没有任何效果。我什至没有收到任何错误。

有什么建议/建议吗？

Answer 1

如果您尝试使用 jquery $('#f:\\book') 获取元素将无法正常工作，因为您正在寻找一个名为 f:\book 的 id。

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

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

同时删除 id= 和 "book" 之间的空格