Xpages, Bootstrap and Data Views

Question

I have a Data View in an Xpage application which is using the Bootstrap theme. I started to use a View, but could never get the pagers lines up, and the data view is working better.

But I do not understand where to put my table class css. For example, if I want a stripped table I enter "table table-striped" in the styleClass of the view (or maybe it is the dataStyleClass). If I do that in the styleClass of the data view, I do not get strips.

I tried the suggestion from Mark below, but something is not working. I added a script call and used the id of the tableview. It already has a class of "cleearfix table" on it.

I have added Chrome's web inspector to show what is going on.

I see 2 issues: The first is that the JavaScript code is placed (and executed) before the table is defined, so it will never find it. Two possible solutions: place it below the table or wrap it in a $(document).ready( function() { } ) (just as done a few lines earlier in your screenshot). If you do this it still won't work because of the second issue: the jQuery selector you're using is wrong: it looks for a table with the dataView1_ajax class. Change it to the one in my answer and it will find the table. — Mark Leusink

Mark Leusink Mark Leusink · Accepted Answer · 2015-12-29T08:42:04

The xe:dataView control does have a styleClass attribute, but classes that you set there are added to the div element that wraps the dataview, not the table (and that's where Bootstrap needs the table-striped class. I would solve this with some JavaScript to add the classes you need on the table element

<xp:scriptBlock
id="scriptBlock1">
  <xp:this.value><![CDATA[
    $("table.dataview").addClass("table-striped table-hover")
  ]]></xp:this.value>
</xp:scriptBlock>

Xpages, Bootstrap and Data Views

1 Answers