Datatable creates additional columns #914

dx325 · 2018-02-14T16:20:05Z

Hi guys, im pretty new in JSF/html coding and have a decent Problem with datatables.
I just created a datatable and it looks fine, but it creates an additional column for every column I create.
The columns are named "column#1, column#2 etc.."

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">
<b:container fluid="true">

    <h:body>
        <ui:composition template="/WEB-INF/template.xhtml">
            <ui:define name="title">Users
</ui:define>
            <ui:define name="content">           
                <b:form>                                    
                    <b:column medium-screen="2">
                    	
                        <b:inputText id="email" value="#{usersBean.user.email}" autocomplete="off"
                         required="true"  requiredMessage="Die E-Mail darf nicht leer sein." label="Email"/>
                    	
                        
                        <b:inputSecret id="password" value="#{usersBean.user.password}" autocomplete="off"
                         required="true"  requiredMessage="Das Passwort darf nicht leer sein." label="Passwort"/>

						
                        <b:inputText id="firstname" value="#{usersBean.user.firstname}" autocomplete="off"
                         required="true"  requiredMessage="Der Vorname darf nicht leer sein." label="Vorname"/>
                        
                        
                        <b:inputText id="lastname" value="#{usersBean.user.lastname}" autocomplete="off"
                         required="true"  requiredMessage="Der Nachname darf nicht leer sein." label="Nachname"/> 
                    </b:column>
                    <b:row>
                    <b:commandButton value="Save" action="#{usersBean.save}" />
                    </b:row>
                </b:form>        
<h:form>
<b:dataTable  value="#{usersBean.getAll()}" var="a">
    <b:dataTableColumn value="#{a.id}" label="swag" /> 
  </b:dataTable>
</h:form>

 </ui:define>
</ui:composition>
                
    </h:body>
    </b:container>
</html>

chongma · 2018-02-14T18:33:55Z

in your example you didn't terminate the <b:dataTable> or the <h:form> e.g.

<h:form>
<b:dataTable  value="#{usersBean.getAll()}" var="a">
    <b:dataTableColumn value="#{a.id}" label="swag" />
</b:dataTable>
</h:form>

dx325 · 2018-02-14T18:53:47Z

Sorry, I updated the post. Forgot to copy it because I had to hurry up.

chongma · 2018-02-14T19:06:27Z

b:container should always be inside h:body

dx325 · 2018-02-14T19:50:13Z

Ok thanks, but this also did not fixed the bug.. I really don't unterstand this problem..

chongma · 2018-02-14T20:00:35Z

I think the doctype declaration should always be <!DOCTYPE html> although I do not think this would cause the problem. Does your template also define the html elements again?

dx325 · 2018-02-14T20:21:55Z

yeah, this is the template Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">
      

    <h:head>
        <title><ui:insert name="title">Grades</ui:insert></title>
    </h:head>
    <h:body rendered="#{loginBean.isLoggedIn()}">
        <div id="top" class="top">
            <b:form id="menue">
                <b:button id="gradesLink" value="Grades" outcome="/grades" />
                <b:commandButton id="logoutButton" value="Abmelden" action="#{loginBean.logout()}" />
            </b:form>
        </div>
        <div id="main_content" class="main_content">
            <ui:insert name="content" />
        </div>
    </h:body>
    <h:body rendered="#{!loginBean.isLoggedIn()}">
        <p><b:link value="Du musst Dich erst anmelden." outcome="/index" /></p>
    </h:body>
</html>

chongma · 2018-02-14T20:43:18Z

then your original code should be like

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui" template="/WEB-INF/template.xhtml">
     <ui:define name="title">Users</ui:define>
     <ui:define name="content">
          <b:container fluid="true">
...your contents
          </b:container>
    </ui:define>
</ui:composition>

and your template like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">
    <h:head>
        <title><ui:insert name="title">Grades</ui:insert></title>
    </h:head> 
    <h:body>
    <ui:fragment rendered="#{loginBean.isLoggedIn()}">
...
    </ui:fragment>
    <ui:fragment rendered="#{!loginBean.isLoggedIn()}">
...
    </ui:fragment>
    </h:body>
</html>

although i am not sure it will fix the b:dataTable

dx325 · 2018-02-14T21:46:44Z

Unfortunately its not fixing it... It really does not make any sense lol

chongma · 2018-02-15T11:11:52Z

not sure how it might be related to the problem with b:dataTable but can you post some of your bean code? your b:dataTable has a value of usersBean.getAll() which is not what i would expect.

if your bean had this format:

@Named
@ViewScoped
public class UsersBean implements Serializable {
	private static final long serialVersionUID = 1L;

	@Inject
	private UserDao userDao;

	private List<User> all;

	public String onload() {
		setAll(userDao.select());
		return null;
	}

	public List<User> getAll() {
		return all;
	}

	public void setAll(List<User> all) {
		this.all = all;
	}
}

then i would expect it to be <b:dataTable var="user" value="#{usersBean.all}">... because the getter would handle the retrieval without explicitly using getAll()

Perhaps if you paste the html of the generated table it might help diagnose the issue

dx325 · 2018-02-15T13:17:48Z

Yes, the bean Looks exactly like that. But it also didnt fixed the Problem.

<th tabindex="0" class="sorting" aria-controls="j_idt13:j_idt14" style="width: 37px;" aria-label="Id: aktivieren, um Spalte aufsteigend zu sortieren" rowspan="1" colspan="1">swag</th>
<th tabindex="0" class="sorting" aria-controls="j_idt13:j_idt14" style="width: 124px;" aria-label="Column #1: aktivieren, um Spalte aufsteigend zu sortieren" rowspan="1" colspan="1">Column #1</th>

chongma · 2018-02-15T14:07:58Z

can you try commenting out the whole b:form above the b:dataTable and see if it has any effect?
also, just a thought...

<Parameter name="javax.faces.PROJECT_STAGE" value="Development"
		override="true" />
<Parameter name="javax.faces.FACELETS_REFRESH_PERIOD" value="0"
		override="true" />
<Parameter name="javax.faces.FACELETS_SKIP_COMMENTS" value="true"
		override="true" />

have you set any of these parameters in your context.xml or web.xml? development stage will give you error messages. refresh period will redeploy your xhtml. skip comments will ignore any commented code (otherwise it will be processed)

dx325 · 2018-02-19T15:20:38Z

Hi, sorry for my late response.
Yes, 2 of these Parameters were set but they dont make any difference.

Interestingly , I cant reach the page if the b:form is outcommented. (I see an empty page)
The Code just Looks like this; I dont see the Problem..

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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://xmlns.jcp.org/jsf/facelets"
      xmlns:b="http://bootsfaces.net/ui">

    <h:body>
        <ui:composition template="/WEB-INF/template.xhtml">
            <ui:define name="title">Benutzerverwaltung</ui:define>
            <ui:define name="content">
            
        
<b:form>
<b:dataTable value="#{usersBean.allUsers}" var="u">
    <b:dataTableColumn value="#{u.id}" /> 
    <b:dataTableColumn value="#{u.email}" /> 
    <b:dataTableColumn value="#{u.firstname}" /> 
    <b:dataTableColumn value="#{u.lastname}" />
    <b:dataTableColumn value="#{u.password}"/> 
  </b:dataTable>
</b:form>


 </ui:define>
</ui:composition>

                
    </h:body>
</html>

chongma · 2018-02-19T16:13:12Z

could you send me a private gist of the exact code of your xhtml?

stephanrauh · 2018-06-02T21:56:39Z

@dx325 Sorry for the late answer. I'm trying to reproduce your bug report without success.

The additional column is rendered if there's a column without label. In this case, it's not really an additional column, because it just fills the gap of the missing <th> tag.

I suspect you've been using a buggy version of BootsFaces. Do you still have the problem, and if so, which version of BootsFaces are you using?

For the moment, I'll close the ticket because I couldn't reproduce it. But we're still listening to the channel :).

bonndan · 2019-10-28T13:57:13Z

This behavior can be observed for instance when putting html comments between dataTableColumn tags. Even in the latest version 1.4.2

wearingart · 2020-01-30T18:53:41Z

I'm also seeing this same behavior in 1.4.2. An extra blank column is being added.
EDIT:
I figured out why it was adding an extra column in my case. I had a commented out line

between two <b:dataTableCoumn> tags. When I removed the comment, the table was generated correctly.

stephanrauh closed this as completed Jun 2, 2018

stephanrauh assigned stephanrauh and chongma Jun 2, 2018

stephanrauh added the couldn't reproduce Sometimes, we're reported a bug without being able to reproduce it. label Jun 2, 2018

TheCoder4eu mentioned this issue Jul 14, 2018

v1.3.0 Ship List #965

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datatable creates additional columns #914

Datatable creates additional columns #914

dx325 commented Feb 14, 2018 •

edited by stephanrauh

Loading

chongma commented Feb 14, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 14, 2018

chongma commented Feb 14, 2018

dx325 commented Feb 14, 2018

chongma commented Feb 14, 2018

dx325 commented Feb 14, 2018 •

edited by stephanrauh

Loading

chongma commented Feb 14, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 14, 2018 •

edited

Loading

chongma commented Feb 15, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 15, 2018 •

edited by stephanrauh

Loading

chongma commented Feb 15, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 19, 2018 •

edited by stephanrauh

Loading

chongma commented Feb 19, 2018

stephanrauh commented Jun 2, 2018

bonndan commented Oct 28, 2019 •

edited

Loading

wearingart commented Jan 30, 2020 •

edited

Loading

Datatable creates additional columns #914

Datatable creates additional columns #914

Comments

dx325 commented Feb 14, 2018 • edited by stephanrauh Loading

chongma commented Feb 14, 2018 • edited by stephanrauh Loading

dx325 commented Feb 14, 2018

chongma commented Feb 14, 2018

dx325 commented Feb 14, 2018

chongma commented Feb 14, 2018

dx325 commented Feb 14, 2018 • edited by stephanrauh Loading

chongma commented Feb 14, 2018 • edited by stephanrauh Loading

dx325 commented Feb 14, 2018 • edited Loading

chongma commented Feb 15, 2018 • edited by stephanrauh Loading

dx325 commented Feb 15, 2018 • edited by stephanrauh Loading

chongma commented Feb 15, 2018 • edited by stephanrauh Loading

dx325 commented Feb 19, 2018 • edited by stephanrauh Loading

chongma commented Feb 19, 2018

stephanrauh commented Jun 2, 2018

bonndan commented Oct 28, 2019 • edited Loading

wearingart commented Jan 30, 2020 • edited Loading

dx325 commented Feb 14, 2018 •

edited by stephanrauh

Loading

chongma commented Feb 14, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 14, 2018 •

edited by stephanrauh

Loading

chongma commented Feb 14, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 14, 2018 •

edited

Loading

chongma commented Feb 15, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 15, 2018 •

edited by stephanrauh

Loading

chongma commented Feb 15, 2018 •

edited by stephanrauh

Loading

dx325 commented Feb 19, 2018 •

edited by stephanrauh

Loading

bonndan commented Oct 28, 2019 •

edited

Loading

wearingart commented Jan 30, 2020 •

edited

Loading