Search code examples
javascriptjqueryjsfdatatablesuirepeat

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

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.

Solution

  • 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>