在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”之間的空格