Manipulate DataTable in JQuery in JSF

Question

How do I redraw or destroy a datatable I declare in my xhtml. I tried everything but it simply doesnt work.

This is my 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>

And this is how I am trying to access it in my script:

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

These are my imports:

<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 even tried accessing the table like this $("$book) and calling html or append to it. But nothing works. I don't even get any errors.

Any suggestions/recommendations?

First of all, read [How to select JSF components using jQuery?](http://stackoverflow.com/questions/7927716/how-to-select-jsf-components-using-jquery) — Jasper de Vries, Apr 27 '17 at 17:48

score 0 · Answer 1 · answered Apr 26 '17 at 14:45

0

If you try to get the element with jquery $('#f:\\book') isn't gonna work cause you are looking for an id called f:\book .

If you want to get the datatable in jQuery you should try the selector book directly

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

Also remove the space in between id= and "book"

answered Apr 26 '17 at 14:45

SteinB

162
1
11

1

If the `` is in an ``, the actual client-side id is of the datatable is `f:book`. The ':' needs to be escaped and that is most likely what the OP tried in a wrong way with using `#f:\\book` – Kukeltje Apr 26 '17 at 15:58

Manipulate DataTable in JQuery in JSF

1 Answers1