Why the pagination datatables JQuery doesn't work with JSF ui:repeat?

Question

I'm working on a datatables JQuery in a JSF page, but the issue is that the pagination doesn't work in spite of it is shown.

This is my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://java.sun.com/jsf/passthrough"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
    <title>Test-Page</title>
    <link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="../css/shCore.css" />
    <link rel="stylesheet" type="text/css" href="../css/demo.css" />
    <link rel="stylesheet" type="text/css" href="../css/header.css" />
    <link rel="stylesheet" type="text/css" href="../css/style_combo.css" />
    <style type="text/css" class="init"></style>
    <script type="text/javascript" language="javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="../js/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="../js/demo.js"></script>
    <script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#example').dataTable({
    "bPaginate": true,
    "bFilter": false,
    "bInfo": true,
    "bProcessing" : false,
    "bJQueryUI" : true,
    "sEmptyTable" : "No messages found",
    });
 } );
</script>
</h:head>
<h:body class="dt-example">
    <h:form>
            <table id="example" class="display compact" cellspacing="0"
                width="100%">
                <ui:repeat var="ee" value="#{controller.address}"
                    varStatus="row">
                    <thead>
                        <tr>
                            <ui:repeat value="#{ee.entrySet().toArray()}" var="entete1">
                                <th><h:outputLabel value="#{entete1.key}"
                                        rendered="#{row.index == 0}" /></th>
                            </ui:repeat>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <ui:repeat value="#{ee.entrySet().toArray()}" var="entete">
                                <td><h:outputLabel value="#{entete.value}" /></td>
                            </ui:repeat>
                        </tr>
                    </tbody>
                </ui:repeat>
            </table>
    </h:form>
</h:body>
</ui:composition>

As long as bPaginate is true i believe that the pagination has to work with no problem at all except that my page it is not the case. Any idea ?

NB: i khnow that there is datatable and extendtables in jsf and richfaces but i have to work juste with With the code above.

Please use an appropriate iterating JSF component like `` and not a plain HTML table to show data in a table format. Here you are merely abusing `` quite unnecessarily. Insist upon using [resource libraries](http://stackoverflow.com/q/11988415/1391249) for ``, `` and `` instead of using those messy plain HTML tags ` — Tiny, Feb 14 '15 at 18:55
For constraints of the company I cannot use and i have juste with JQuery Datatable. Also i am not abusing by using because the conscruction my table is dynamics. For => , with JSF 2.2 — Abder KRIMA, Feb 14 '15 at 19:02
I said that i can't use and i have to use what you see in up — Abder KRIMA, Feb 14 '15 at 19:13
OK. Could you please elucidate, "*doesn't work*" in developer's perspective? — Tiny, Feb 14 '15 at 19:16

score 0 · Accepted Answer · answered Feb 27 '15 at 14:55

After a long analysis I found that and do not have to be inside the loop and also the number of columns has to be the same that what we have in the header.

the css and js files are always the same and i changed just the content of <h:form></h:form>

Here is the example which works perfectly well:

<h:form>
        <table id="example" class="cell-border" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <ui:repeat value="#{mycontroler.listOfHead}" var="head">
                        <th><h:outputLabel value="#{head}" /></th>
                    </ui:repeat>
                </tr>
            </thead>
            <tbody>
                <ui:repeat var="details" value="#{mycontroler.ExampleLits}"
                    varStatus="rowStatus">
                    <tr>
                        <ui:repeat value="#{details.entrySet().toArray()}" var="details2">
                            <td><h:outputLabel value="#{details2.value}">
                                </h:outputLabel></td>
                        </ui:repeat>
                    </tr>
                </ui:repeat>
            </tbody>
        </table>
</h:form>

Why the pagination datatables JQuery doesn't work with JSF ui:repeat?

1 Answers1