CODEWITHSUNDEEP
jsp-tagsdisplaytag
Roy Rico
Roy Rico

Reputation: 3841

displaytag export options banner - place at top of table

I'm using the displaytag tag library, and it's worked amazingly so far. However, i don't see a simple option or way to put the export banner at the top of the table instead of the bottom. How can this be accomplished?

Thanks, Roy

Upvotes: 0

Views: 4755

Answers (4)

LostAndConfused
LostAndConfused

Reputation: 191

I know this is 10 years old, but just in case someone goes looking for a simple and working answer the following worked for me. I noticed that displaytag placed everything in the TBODY, so I decided to try and wrap the Export in THEAD and sure enough it worked.

I placed the following in the displaytag.properties file:

export.banner=<thead><tr><td><div class="exportlinks">Download: {0}</div></td></tr></thead>

Upvotes: 0

Saurabha
Saurabha

Reputation: 114

Please add below code :

$(function()
  {

  // Placement on top.#row is display tag id
  $( ".exportlinks" ).insertBefore( "#row" );

});

Upvotes: 1

EmTexX
EmTexX

Reputation: 21

I had the same problem as you. I solved using jquery like this :

My displaytag.properties :

export.banner=<div id="export" class="exportlinks">Exporter : {0}</div>

My table created with DisplayTag in my JSP :

<div id="datagrid">
    <div class="datagrid">
        <display:table name="sessionScope.resultats" sort="list" defaultsort="2" pagesize="<%=nombreLignes %>" export="true">
            <display:column property="code" title="<%=codeLabel %>" sortable="true" href="javascript:edition(document.forms[0], '#')" paramId="code" paramProperty="code" style="width:20%;" />
            <display:column property="nom" title="<%=nomLabel %>" sortable="true" href="javascript:edition(document.forms[0], '#')" paramId="code" paramProperty="code" style="width:80%;" />
            <display:setProperty name="export.pdf" value="true" />
            <display:setProperty name="export.csv.filename" value="${nomExport }.csv"/>
            <display:setProperty name="export.pdf.filename" value="${nomExport }.pdf"/>
        </display:table>
    </div>
</div>

A function in jquery :

$(function()
{
    var export1 = document.getElementById('export');
    if(export1 != null)
    {
        // 2 duplications
        var export2 = export1.cloneNode(true);
        var export3 = export1.cloneNode(true);
        var datagrid = document.getElementById('datagrid');

        // Placement on top 
        datagrid.insertBefore(export2, datagrid.firstChild);

        // Placement on bottom
        datagrid.parentNode.insertBefore(export3, datagrid.nextSibling);

        // Delete node generated by DisplayTag
        export1.parentNode.removeChild(export1);
    }
});

And the result :

enter image description here

Upvotes: 1

Lancelot
Lancelot

Reputation: 2427

We've been able to place the export menu at the top using some css against 'exportTypes' id. I'm not the Front End guy that did it in our team, so there might be more to it, but it looks like you can do something like:

div.framed-outer.guttered #exportTypes {
    *top: -10px;
}

Where framed-outer and guttered are just some div ids around the table we use.

In the displaytag.properties we've defined:

export.banner=<div id="exportTypes"><span class="label">Export: </span>{0}</div>

Again that may not be the whole story but that's what I can see that'd do it in our project. Hope this helps a bit.

Upvotes: 0

Related Questions