FEATURE REQUEST - Select rows in DataTable using checkboxes

[hvsharma]

Can we have feature of selecting rows using checkboxes in next release? This is helpful since it is more user-friendly and doesn't require someone to hold ctrl or shift. Moreover, it will be helpful for mobile users as well as it's more intuitive.

For Example : Primefaces Datatable

[stephanrauh]

The other day, one of our users used the datatables.checkbox plugin to achieve your goal. I've asked him to write a short walk-through. Please give him a couple of days time, he'll fill in the details soon.

[stephanrauh]

BTW, I think we won't implement the feature. Instead, we'll add the walk-through to the documentation.

[frankyhoffmann]

To expand the datatable with selectable checkboxes, you have to do following configuration:

1.) Download the JavaScript File „dataTables.checkboxes.min.js“
from the URL: https://www.gyrocode.com/projects/jquery-datatables-checkboxes
2.) Import the JavaScript File to the JSF-Page.
An example for a Import of a JSF-Resource:
<h:outputScript library="adt21app" name="js/dataTables.checkboxes.min.js"></h:outputScript>
3.) Insert the option „customOptions“ in the Bootsfaces datatable with the following parameter:
'columnDefs': [{'targets':0, 'checkboxes': {'selectRow': true}}],'select':{'style':'multi'}

Example:

customOptions="pagingType:'full_numbers',
                           'columnDefs': [{'targets':0, 'checkboxes': {'selectRow': true}}],
                           'select':{'style':'multi'}"

„0“ in the 'targets': parameter means that the first column of the datatable will be the checkbox-column. If you set it to „1“ it will be the second column and so on.

The checkbox column must have a unique ID in the datatable.
An example for the output of the first column in the Bootsfaces datatable:

<b:dataTableColumn label="test" id="checkboxDT" >#{resultList.id}</b:dataTableColumn>

[sometowngeek]

@stephanrauh I'm curious... Why would this not be implemented in the future? It's nice to be able to incorporate it into BootsFaces, but the walkthrough @frankyhoffmann shared seems to suggest using strict jQuery.

The nice thing about using BootsFaces framework is so we wouldn't have to try to come up with a variety of functions to get the feature.

I think the current selection isn't 100% user friendly because there still are some users who doesn't know about ctrl- and shift-clicking. And using a non-framework-implemented table makes the table non-responsive.

I really like using BootsFaces because it implements Bootstrap's responsive CSS.

Please reconsider and add this as a new feature.

[Lb-lea]

Note to be added to the walkthrough : For anyone who wants to use the plugin in an other language than English, it doesn't uses the b:datatables lang option so you have to manually set the language.

<b:dataTable
	customOptions="'columnDefs': [{'targets':0, 'checkboxes': {'selectRow': true}}],
        'select':{'style':'multi'},
	'language': {
		      url: '//cdn.datatables.net/plug-ins/1.10.15/i18n/<TARGET LANGUAGE>.json',
		      'select': {
		                  'rows': {
		                            '_': '%d row selected (in target language)' ,
		                            '0': '',
		                             '1': '%d rows select (in target language)'
		                          }
		                }
	              } "
	lang="<TARGET LANGUAGE>">

The languages.rows sets the message "xx row selected" but it also override the lang="yourLang" in the b:datatable. So you need to specify your language again....

Even if the feature is not included in BF it might be nice to see if we can't for the lang option to work with it.

[stephanrauh]

@Lb-lea I've read your original post (GitHub kindly sends me an email each time someone opens or adds to an issue), and it convinced me. No idea why the plugin breaks the internationalization. I'll have a look at it. Integrating the feature to the BootsFaces library also shifts the responsibility to us, but maybe it's simpler to make every plugin work together if they're part of the core library.

[stephanrauh]

@frankyhoffmann @Lb-lea I've added the feature to BootsFaces, but it seems I didn't get it right yet. For some reason, the message below the table always reports "1 row selected", never "2 rows selected". Any idea what I'm doing wrong?

[stephanrauh]

Now it works! The feature supports both selection-mode="single" and selection-mode="multiple".

[sometowngeek]

@stephanrauh, I think this is broken in 1.4.1

It shows as numbers instead of checkboxes in the documentations.

https://showcase.bootsfaces.net/forms/DataTable.jsf#selectioncolumn

[stephanrauh]

Oops - it's broken in the showcase, but works on my machine. Looks like a forgotten JavaScript file.

[stephanrauh]

Missing imports:

<link type="text/css" rel="stylesheet" href="/BootsFacesWeb/javax.faces.resource/css/dataTables.checkboxes.css.jsf?ln=bsf">
<script type="text/javascript" src="/BootsFacesWeb/javax.faces.resource/js/dataTables.checkboxes.min.js.jsf?ln=bsf"></script>

[stephanrauh]

This feature is going to ship with BootsFaces 1.4.2.