p:datatable pagination does not work

Question

I'm trying to render a DataTable with pagination but no code snippet i found so far really works. I guess I'm missing something very little ...

This is my test site with very reduced code and it still does not work:

test.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<body>
<ui:composition>

    <h:form>
        <p:dataTable id="dataTable" var="car" value="#{testBean.createCars(50)}"
            paginator="true" rows="10"
            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
            rowsPerPageTemplate="5,10,15">
            <f:facet name="header">
            Ajax Pagination
        </f:facet>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Brand" />
                </f:facet>
                <h:outputText value="#{car.brand}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Year" />
                </f:facet>
                <h:outputText value="#{car.year}" />
            </p:column>

            <p:column>
                <f:facet name="header">
                    <h:outputText value="Color" />
                </f:facet>
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>
    </h:form>

</ui:composition>
</body>
</html>

testBean.java (Code taken from http://www.primefaces.org/showcase/ui/data/datatable/paginator.xhtml)

@Named 
public class TestBean implements Serializable {

/** serialVersionUID. */
private static final long serialVersionUID = 1L;

private final static String[] colors;

private final static String[] brands;

static {
    colors = new String[10];
    colors[0] = "Black";
    colors[1] = "White";
    colors[2] = "Green";
    colors[3] = "Red";
    colors[4] = "Blue";
    colors[5] = "Orange";
    colors[6] = "Silver";
    colors[7] = "Yellow";
    colors[8] = "Brown";
    colors[9] = "Maroon";

    brands = new String[10];
    brands[0] = "BMW";
    brands[1] = "Mercedes";
    brands[2] = "Volvo";
    brands[3] = "Audi";
    brands[4] = "Renault";
    brands[5] = "Fiat";
    brands[6] = "Volkswagen";
    brands[7] = "Honda";
    brands[8] = "Jaguar";
    brands[9] = "Ford";
}

public List<Car> createCars(int size) {
    List<Car> list = new ArrayList<Car>();
    for (int i = 0; i < size; i++) {
        list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
    }

    return list;
}

private String getRandomId() {
    return UUID.randomUUID().toString().substring(0, 8);
}

private int getRandomYear() {
    return (int) (Math.random() * 50 + 1960);
}

private String getRandomColor() {
    return colors[(int) (Math.random() * 10)];
}

private String getRandomBrand() {
    return brands[(int) (Math.random() * 10)];
}

public int getRandomPrice() {
    return (int) (Math.random() * 100000);
}

public boolean getRandomSoldState() {
    return (Math.random() > 0.5) ? true : false;
}

public List<String> getColors() {
    return Arrays.asList(colors);
}

public List<String> getBrands() {
    return Arrays.asList(brands);
}

}

My output is always:

https://i.stack.imgur.com/MXy7Y.png

Anyone can help me here ?

UPDATE 1 Even if I use the following Code

<p:dataTable id="dataTable" var="car" value="#{testBean.cars}"

and

@PostConstruct
public void createCars() {
    int size = 50;
    if (cars == null) {
        cars = new ArrayList<Car>();
        for (int i = 0; i < size; i++) {
            cars.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
        }
    }
}

public List<Car> getCars() {
    return cars;
}

it still does not work

Now check how often your postconstruct is called. Most likly more than you expect. Checkyour beanscope — Kukeltje, Aug 11 '15 at 08:13
I added a system.out.println(...) and the message was shown only once from server startup to page display. If i reopen the page it does not get called again, so I think my beanscope is fine here ? How can this affect the pagination buttons that don't show up ? — K.M., Aug 11 '15 at 08:23

Domen Petrič · Answer 1 · 2015-08-11T20:27:29.500

Maybe there is just that you didn't paste all the code, but i am missing scope.

Try put

@SessionScope

just before

@Named

And keep code that Kukeltje gave to you. It's definitely step in right direction

UPDATE: try to add tags in ui:composition

<html> 
 <body> 
   <ui:composition
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui">

I think css are not loaded

UPDATE 2:

Here is code with working pagination from primefaces showcase. Compare with your code and test it.

 <?xml version="1.0" encoding="UTF-8"?> 
<html 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://primefaces.org/ui">     
<h:head>    
</h:head>   
<h:body>        
<h:form prependId="false">          
<p:dataTable id="dataTable" var="car" value="#{tableBean.cars}" paginator="true" rows="10" paginatorTemplate="CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"rowsPerPageTemplate="5,10,15">
            <f:facet name="header">
                Ajax Pagination
            </f:facet>
         <p:column>
            <f:facet name="header">
                <h:outputText value="Brand" />
            </f:facet>
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Year" />
            </f:facet>
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column>
            <f:facet name="header">
                <h:outputText value="Color" />
            </f:facet>
            <h:outputText value="#{car.color}" />
        </p:column>  </p:dataTable>

    </h:form>   
</h:body>
 </html>

Added the annotation but it didn't make the trick. Still my pagination looks like this "pp12345pp" — K.M., Aug 11 '15 at 08:28
i changed it, your update did not work either. How can i make them load ? — K.M., Aug 11 '15 at 09:20
I am watching what i am doing different and now only difference is that i have you have — Domen Petrič, Aug 11 '15 at 09:30
Download offical primefaces example thats in showcase. There is how: http://www.mkyong.com/jsf2/primefaces/download-primefaces-showcase-and-source-code/ — Domen Petrič, Aug 11 '15 at 09:50
@DomenPetrič: there can be more differences, you cannot be sure — Kukeltje, Aug 11 '15 at 20:41
And did you check the mkyong page? It is wrong in many ways. It was right 3 years ago. — Kukeltje, Aug 11 '15 at 20:42
yes i build same thing on my enviroment. Run it with jboss in watch it working. The only difference with code i pasted is that i used only id column so i didn't have so much work to do — Domen Petrič, Aug 11 '15 at 21:03

score 1 · Answer 2 · answered Nov 17 '16 at 12:26

1

I faced this issue. But the problem was that I had two datalist have the same widgetVar name. Maybe it helps to somebody.

answered Nov 17 '16 at 12:26

misman

1,347
3
21
39

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

Check via adding as 'Sytem.out.println' how often your 'createCars(50)' is called. Most likely way more than you expect. And then look at the differences with the PrimeFaces Showcase.

The code you point to does this:

@PostConstruct
public void init() {
    cars = service.createCars(50);
}

public List<Car> getCars() {
    return cars;
}

and

<p:dataTable var="car" value="#{dtPaginatorView.cars}"...

While you directly call the createCars(...).

And it is weird that all 'examples' you saw did not work, since the PrimeFaces showcase works perfectly.

See also:

Why JSF calls getters multiple times

edited May 23 '17 at 12:32

Community

1
1

answered Aug 10 '15 at 14:41

Kukeltje

12,223
4
24
47

Your code is unreadable. And 'it still does not work' is to vague. Lots of debug you can do yourself if you just analyze the behaviour. The screenshot tells nothing. What happened was that you saw the same data each time. That is stll the case? Then check how often your method is called where you create the new data. – Kukeltje Aug 11 '15 at 08:10
the new data is now created once after injection. no idea if that has any effect on the "wrong" pagination ... it's just not clickable. Do I miss .js or .css -files or images ? – K.M. Aug 11 '15 at 08:10
1

Yep, you also mis an `h:head` – Kukeltje Aug 11 '15 at 09:12
Added it but it's still the same output – K.M. Aug 11 '15 at 09:21
Hmmm maybe the head misses in the main page. Please create an mcve. All this guessing takes to much time – Kukeltje Aug 11 '15 at 09:24

score 0 · Accepted Answer · answered Aug 12 '15 at 07:21

The problem was clearly nothing of what we all thought of ... it was just the wrong usage of <ui:composition> ... </ui:composition>

After I deleted the tag it was fixed. The problem here was that <ui:composition> ignores ALL content around it (even tags like <head> of <body>). This means that the xhtml file wasn't parsed as a correct html-page. And without any <head>-tag the javascript could not be included, so the functionality was disabled and the pagination didn't work as it should.

I hope this helps anyone out at some point. I will clearly never do this mistake again.

Thanks anyway for all of your time and help you spent on this!

It should.. That is why I stated your might have been missing a h:head or whatever in a template or so, so it was something in the direction we were thinking (but you did not respond to that comment) and you now say you do not have a template? well, yess than no js or css is loaded. And btw, all the other things in the other were wrong to. Maybe better to step back and read a little about the basics — Kukeltje, Aug 12 '15 at 10:04

p:datatable pagination does not work

4 Answers4