Building a search function with DataTables plugin (VII)

Introduction

From my experience some Notes may contain a lot of columns (not sure what the limit is?) and represented on the web, often users need so see the same amount of columns. So what do you do then?

Column visibility to the rescue!

Part of the buttons module is the column visibility. This requires to load an additional resource:

<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/buttons-1.2.1/js/buttons.colVis.js</href>
</resource>

Also remember here to disable AMD loading.

From here it is quiet easy to have the visibility option available as a button in the ‘button bar’. Just add the colvis option in the configuration.

In case you want to result of (in)visibility of columns represented in any export option you need to specify the exportOptions property for the buttons e.g. as followed:

buttons: [
‘copy’,
‘csv’,
‘excel’,
{
extend: ‘pdfHtml5’,
orientation: ‘landscape’,
pageSize: ‘LEGAL’,
title: ‘Person Details’
},
{
extend: ‘print’,
exportOptions: {
columns: ‘:visible’
}
},
‘colvis’
],

Result

As a result a new button is presented and when clicked you can choose which column to make (in)visible:

datatables07

column API

In case you do not want to present a button, but for example anchor links the column API comes at help.

Here is a sample how to register change in a column visibility when clicking an anchor:

$(‘a.toggle-vis’).on( ‘click’, function (e) {
var db = $(“#persons”).DataTable();
e.preventDefault();

// Get the column API object
var column = db.column( $(this).attr(‘data-column’) );

// Toggle the visibility
column.visible( ! column.visible() );
} );

And here is the HTML for presenting the anchors:

Column visibility:FirstnameLastnameCompanyJob title

Finally the end result. Ofcourse you can be creative with CSS for the anchor links, adding different layout for each column state. Be creative!

datatables07b

In another post I will describe how you can accomplish something similar in Xpages with a viewpanel (with a bit of more code)…

Building a search function with DataTables plugin (VI)

Introduction

Often business analists who work with the data in tables eat & sleep in their spreadsheet world so a common asked question is: can we export the data? “Ofcourse you can!” with the datatable component.

Modifications

Below is a short summary of the changed/added items.

Configuration

In order to add the buttons you specify in the datatable configuration which buttons you would like to have e.g.:

dom: ‘Bfrtip’,
buttons: [
‘copy’,
‘csv’,
‘excel’,
{
extend: ‘pdfHtml5’,
orientation: ‘landscape’,
pageSize: ‘LEGAL’,
title: ‘Person Details’
},
‘print’
]

 

Required files

Which files are required for the buttons feature depend on which buttons you would like to display. In the download builder you can specify for which options you would like to go.

AMD fix

An important thing to notice is that most JS files use AMD loading. There have been posted multiple questions and answers how to fix AMD loading with XPages. In my repository I have just removed the amd checking.

Files overview

Probably the files you would like to use will be listed in the Theme design element:

<!– adding buttons –>
<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/buttons-1.2.1/js/dataTables.buttons.js</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/buttons-1.2.1/js/buttons.flash.js</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/jszip-2.5.0/jszip.js</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/pdfmake-0.1.18/build/pdfmake.js</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/pdfmake-0.1.18/build/vfs_fonts.js</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/buttons-1.2.1/js/buttons.html5.js</href>
</resource>
<resource>
<content-type>application/x-javascript</content-type>
<href>DataTables/buttons-1.2.1/js/buttons.print.js</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>DataTables/buttons-1.2.1/css/buttons.dataTables.min.css</href>
</resource>

 

Result

As a result you will see the buttons displayed above the table. If you apply filtering to the table the buttons will pick up the provided terms.

datatables06

A little less coding than an X-agent to create a PDF or spreadsheet 🙂

A downsize might be that users are not aware of the amount of data that might reside in your datatable (the only x-number of entries are displayed). Pressing the PDF button with 40K of documents in your notes view takes a bit of time…