Hide a datatable column without rerendering it. JSF Client side manipulation

Question

I used to develop rich client interface applications using Spring MVC mixed with jQuery and html; However, because we don't have a good designer currently, I thought to go with JSF 2.2 using PrimeFaces 5.2 which should give me professional interface without a regular designer.

I have good knowledge about how to use JSF as a component based framework, but my concern is that I want to avoid unnecessary calls to the server as much as possible since I have tens of thousands of requests daily. So, I adhered to use jQuery with JSF and will avoid ajax calls as much as possible to update the view, unless I need to completely restructure it based on some user selections.

Here is the scenario I tried: I have a table from which the user can select to hide/show columns based on checkboxes selection per each column. Now, as I said I don't want to use ajax to rerender the view for each select/unselect and I used jQuery instead.

After I made my first draft page and tried to play around as I used with jQuery, I found that I had nastily to navigate the page source using firebug and build complex jQuery to hide p:dataTable columns.

Is that normal? I mean, when I look to the code and see how much it depends on Primefaces html structure generation, I feel unconfident.

Am I using JSF unwisely or this is the truth of JSF?

primefaces.org/showcase/ui/data/datatable/columnToggler.xhtml is this what you need ? — anotherUser
JSF has a significant learning-curve. It's a component-based framework, and Spring MVC is a request-based framework, so your experience with Spring MVC is not totally transferrable. BalusC wrote a very useful description of this that reflects your experience, hragheb. — DavidS
"I used to develop rich client interface applications using Spring MVC mixed with jQuery and html; However, because we don't have a good designer currently, I thought to go with JSF 2.2 using PrimeFaces 5.2 which should give me professional interface without a regular designer." If this is your main goal, I wonder if JSF is the best choice for you. While PrimeFaces provides nice-looking components, I wouldn't make that the pivotal criteria in choosing between component and request-based frameworks, especially if you already have significant experience with request-based. — DavidS

Xtreme Biker Xtreme Biker · Accepted Answer · 2015-05-12T14:45:32

You can use all the jQuery/JS you want over the JSF views. The main problem is that model doesn't keep updated, as long as you don't sync the state. To see that hiding/showing a column isn't that complex, here you've got a basic full-working example of it using jQuery and its style selector:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<h:body>
    <script>
        function switchColumn() {
            if ($('.style1').is(":visible")) {
                $('.style1').fadeOut(1000);
            } else {
                $('.style1').fadeIn(1000);
            }
        }
    </script>
    <h:form>
        <p:commandButton type="button" onclick="switchColumn();"
            value="Switch" />
        <p:dataTable var="test" value="#{testBean.values}">
            <p:column styleClass="style1">
                #{test.id}
            </p:column>
            <p:column>
                #{test.val1}
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

@ManagedBean
@ViewScoped
public class TestBean {

    private List<TestClass> values = new ArrayList<TestClass>();

    public TestBean() {
        values.addAll(Arrays.asList(new TestClass(1, "val1"), new TestClass(2,
                "val2")));
    }

    public List<TestClass> getValues() {
        return values;
    }

    public class TestClass {

        private Integer id;

        private String val1;

        public TestClass(Integer id, String val1) {
            this.id = id;
            this.val1 = val1;
        }

        public Integer getId() {
            return id;
        }

        public String getVal1() {
            return val1;
        }

    }

}

It must be said JSF is designed to control the request contents and the model updates for you. Is not as light as SpringMVC in these terms, as you cannot choose what to send (not totally). So, if being worried about request/response performaces, maybe you should go with other framework.

See also:

Is there a way to add columns datatable without rerendering the entire table

Hide a datatable column without rerendering it. JSF Client side manipulation

1 Answers