在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之間的空間中的數據表=和「書」