2017-04-26 4 views
0

xhtmlで宣言したデータテーブルを再描画または破棄するにはどうすればよいですか?私はすべてを試しましたが、それは単に仕事をしません。 JSFのJQueryでDataTableを操作する

この

は私の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 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> 

I:

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

これらは私の輸入品ですこのようなテーブルにアクセスしようとしても$("$book)と呼び出してhtmlまたはそれに。しかし、何も動作しません。私は何の誤りもない。

提案/推奨事項はありますか?

+0

まず、読みセレクタ帳を試してみてください[どのようにJSFコンポーネントをjQueryを使用して選択しますか?](http://stackoverflow.com/questions/7927716/how-to-select-jsf-components-using-jquery) –

答えて

0

jqueryで要素を取得しようとすると、$('#f:\\book')が機能しなくなる原因は、f:\ bookというIDを探しているためです。

あなたはjQueryの中でデータテーブルを取得したい場合は、直接

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

また、IDの間にスペースを削除=と、すべての「ブック」

+1

' 'は' 'にあり、実際のクライアント側IDはデータテーブルのもので' f:book'です。 ':'はエスケープする必要があります。これはOPが '#f:\\ book'を使って間違った方法で試したものです – Kukeltje

関連する問題