It would be great if how to calculate the number of selected rows/columns/cell could be specified. For example, when implementing a solution that retains selected rows when using server-side processing, a custom function for calculating the number of selected rows is needed. In this case, api.rows( { selected: true } ).flatten().length will only show the number of selected rows on the current page with the current filtering. I'm imagining a solution where the method used for calculating the number of selected items chould be specified when initializing DataTables/Select. For example like this:

$('#table').DataTable({
    select: {
        calculateSelectedRows: function() { return selectedRows.length; }
    }
});

Default selector 'td, th' does not work if an element has a child element, for example:

 <td><span>something</span></td>

I tried to set the selector like:
selector: "td:has(span), td, th"
but it still does not work.

I'm using PHP and I'm having a value for each row/line let say $item_id
so what I wish to able to do is the set my select checkbox to have a that value so I would be able to send the selected values to Ajax.

But it's look like there is no way to assign value to the selections / checkbox

See my question about this
https://datatables.net/forums/discussion/comment/162530

Looking in the source code, I found the multi+shift selection style. I would be nice if this was included in the documentation.

Hey, the checkbox inputs of the selects are not properly updated during an API select() or deselect() operation, after some rows was dynamically added or data were loaded via ajax.

The problem seems to be caused here:

The methods check if the input should be updated, based on the sType of the column. However, when the underlying data is changed (e.g. adding rows), then the sType value is invalidated internally (set to null). That means that the check fails and the checkbox input element is not updated.

Even if you force an update of the sType value (by calling columns().types() API after table initialization) the invalidation of the _aSortData in the next lines fail, because the array is not existing.

Hello @DataTables ,
I am the member of cdnjs project.
We want to host this library.
Whether you could provide the css file on npm or not?
Thanks for your help!

cdnjs/cdnjs#8515
cdnjs/cdnjs#8530

I have 3 DataTables 1.10.8 (ajax on, server-side off) on the page each with Editor 1.5.0. The latest Select extension. I don't initialize select in any DT options, just include in <script>.

In initialization Select produce error in JQuery-2.1.4: 348 - TypeError: Cannot read property length of undefined. It seems that ctx.aanFeatures.i is undefined in dataTables.select.js:L340

The stack trace attached below:

I've got a table where the pagination and information is included multiple times in the DOM string. Select doesn't appear to be adding its own info string to both elements.

Is there an option to do this?

Hello, I'm using DataTables 1.10.6 in a project, and I downloaded the Select plugin's js and css from the CDN (which is, as of now, the same as version 1.1.0)

I loaded the js and css after the datatables ones, and during page load I obtain this error in the javascript console (Firefox):

TypeError: g.ext.selector is undefined

line 11, col 504

Hi,

The types.d.ts file is currently not part of the distribution on npm/unpgk etc. even though the package.json references it.
It most likely needs to be included in the files section of the package.json.

See https://unpkg.com/browse/[email protected]/package.json and https://unpkg.com/browse/[email protected]/

When you click on a row, the first time it selects, but sometimes if you then unselect and then try to select again, It will not select. It seems inconsistent when it will select again and when it wont. Sometimes it just highlights the text instead of selecting the row (prob capturing the double click on a text field).

Code Example: http://live.datatables.net/juxavonu/2/

OS: Mac OS X 10.11
Browser: Chrome 49.0.2623.87

API method select.info() doesn't return state of the info option when called as table.select.info().

Seems like a typo and the code should be:

if ( flag === undefined ) {

instead of

if ( info === undefined ) {

It would be great if the datatables.select bootstrap styling could accommodate bootstrap themes/variables. This would likely require providing a SASS version of the styles that used bootstrap-defined variables like $brand-primary instead of hardcoding color values.

Description of problem:
When using the Select extension the select checkbox default font does not render the check mark properly. It is outside the box that is supposed to contain it. This is because by default all browsers on Windows render the box with Segoe UI Emoji and not Segoe UI Symbol as show in the example.

One fix would be to change the font family for the select boxes, but personally I think an easier change is to modify line 115 in select.dataTables.scss from
content: '\2714';
to
content: '\2713';

2713 is the regular check mark instead of the heavy check mark, and renders the same across all browsers and operating systems without needing to modify font families.

Example: http://live.datatables.net/sasopola/1/

I have multiple DataTables and I want to enable Select only to some of them.

I'm using a setup like this (I have to use the language initializing option for internationalization).

As you can see, the table without Select is displaying the selection information.

Searching through the source code, I've found this line. At this moment, should the code check if the Select is enabled, shouldn't?

I'm using the configuration below to change this behavior but it doesn't sound normal.

$.extend(true, $.fn.dataTable.defaults, {
    "select": {
        "info": false
    },
    "language": {
        "select": {
            "rows": {
                "_": "Selected %d rows",
                "0": "Click on a row to select it",
                "1": "Selected 1 row"
            }
        }
    }
});

I am providing the className option when initializing my Data Table and it does not seem to be used. Instead, I am just getting the default selected class:

$table.DataTable({
  select: {
    className: 'info',
    info: true,
    style: 'single'
  }
});

Also, is it just me or does the example on this page look incorrect with the nested select options?

I've noticed that selection event is not generated in case of multiple quick clicks in a single table row. https://datatables.net/extensions/select/examples/api/events.html reproduces this issue.

I was able to find the difference in code flow and it looks like the culprit is click.dtSelect event handler. window.getSelection().toString() in case of omitted clicks, returns string consisting of a single character...

My browser:
Chrome 51.0.2704.103 m (64-bit)
datatables.net-select 1.1.2

As it is right now, this extension offers only select and deselect events that reflect a selection change, and it can be a bit bothersome if you are only interested in the selection change and not which event.type was fired.

The only workaround right now is to debounce the event handler on both the select and deselect and hope that they have already fired and are done.

Could we have an event that triggers after all changes to the selection have taken place ?

thanks

The following commit is not supported in IE:
0c793f8#diff-7d61f891a3f3cc950e50716b8600aa54

getRootNode is not a supported method in IE. I get an error every time I try to click outside of the table when using IE/Edge. View my forum discussion here:
https://datatables.net/forums/discussion/42275/ie-edge-bug-object-doesnt-support-property-or-method-getrootnode?new=1

Have changes between 1.0.1 and 1.1.0 stopped the custom selector from working as expected?

I currently have a rows which contain buttons (and occasionally text input or select) - when a user clicks on those elements I don't want the row to be selected. It seems I can enforce that by specifying a selector option of ":not(:input)". This works in version 1.0.1 but not in 1.1.0.

Has the addition of line 266 caused the original logic to now fail?

I can't figure out whether the old behavior was intentional or not, it's certainly the behavior I want in my application.

Test case to follow. As suggested, I will also try adding the stopPropagation() to the custom button event handler.

I'm seeing the following behavior on Select 1.0.1, Buttons 1.0.3, DataTables 1.10.9. I have a table of 300 rows with 125 selected.

> table.buttons.exportData({modifier: {selected: undefined}})
< Object {header: Array[13], footer: null, body: Array[300]}
> table.buttons.exportData({modifier: {selected: false}})
< Object {header: Array[13], footer: null, body: Array[175]}
> table.buttons.exportData({modifier: {selected: true}})
< Object {header: Array[13], footer: null, body: Array[0]}

As you can see, the selected: true filter seems broken, as it gives an empty body instead of Array[125].

This of course causes some problems down the road when I want to export-to-csv just the selected rows.

I don't know if this was already considered or not, but I know this is a possibility in the wonderful but older extension made by @mpryvkin (https://github.com/gyrocode/jquery-datatables-checkboxes) and I wondered if it could be possible to also add it in the native extension?

I will try to provide a PR this week if I can free up some time for it :)

For reference, here's how it was implemented in the other extension: https://github.com/gyrocode/jquery-datatables-checkboxes/blob/af373b4b645417984012515d6a4d967f5f61b4f4/js/dataTables.checkboxes.js#L599

Hi,

I recently updated my dependencies and noticed that the version constraint used in datatables.net-select-dt >1.3.4 (f.e. see https://github.com/DataTables/Dist-DataTables-Select-DataTables/blob/master/package.json) causes the plugin to install datatables 2.0.0 and breaking my existing application.

1.3.3 is the last version which has a fixed dependency of datatables.net-select: 1.3.3, everything afterwards has >=1.3.3 which in turn installs the latest version of datatables.net-select which installs the 2.0.0 datatables.

I currently worked around this by using

    "overrides": {
        "datatables.net@>2": "1.13.8"
    },

in my package.json, but I think this should be fixed.

When I changed default class "dataDtables_wrapper" to another Select stops working.
In extension code i found that default class is used as selector to "Ignore clicks inside a sub-table"

Code:
if ( $(e.target).closest('div.dataTables_wrapper')[0] != dt.table().container() ) { return; }

I simply change this to:

if ( $(e.target).closest('div.' + $.fn.dataTableExt.oStdClasses.sWrapper)[0] != dt.table().container() ) { return; }

Now it works for me but I think that you could do this much better.

Hey !

I'm using bower to manage my dependencies but my project doesn't have a sass compiler included.

It would be great if releases could include a compiled version of those sass files. Currently, I have to commit the compiled version to my repository. IMHO, it's kind of a bad practise.

When attempting to load the Select extension (v1.0.1 and v1.1.0-dev) using require, I am getting the following JavaScript error:

Uncaught TypeError: Cannot read property 'row' of undefined    dataTables.select.js:565
(anonymous function) @ dataTables.select.js:565
m.extend.each @ jquery-1.11.1.min.js:2
factory @ dataTables.select.js:561
i.execCb @ require-2.1.15.min.js:29
Z.check @ require-2.1.15.min.js:18
Z.enable @ require-2.1.15.min.js:23
Z.init @ require-2.1.15.min.js:17
E @ require-2.1.15.min.js:14
i.completeLoad @ require-2.1.15.min.js:28
i.onScriptLoad @ require-2.1.15.min.js:29

I confirmed Data Tables is being loaded first.

Any help would be greatly appreciated.

If the table has a selectable classname but is initialized in JS with the selectable option declared, then Select should not change the select style.

The line involved is here:

It's problematic because it prevents people from using the selectable classname for styling purposes while using a style other than os.

When i select items and change page on table, selected element was lost.
If i only change length there is no problem.

$('#table').dataTable({
  select: true,
  columns: [....],
  serverSide: true,
  rowId: 'id',
});

• DataTables 1.10.19
• Select for DataTables 1.2.7

Hi,
I have found that retain selection on reload is broken when style: 'multi'. The example can be found here. The code (shortly):

var tableid = 'table#mytable';
...
var table = $(tableid).DataTable({
    rowId: 'Id',
    select: {
      style: 'multi'
    }
});
...
// somewhere calling DataTables by tableid
$('button').on('click', function () {
    $(tableid).DataTable().ajax.reload();
});

In the case above I see the table is reloading data, right after a (half) second all selected items are reset (deselected). If I use style: 'os' or style: 'single', then Select is working as intended.

• I am using ajax for getting the data without server processing.
• DataTables 1.10.15
• Select for DataTables 1.2.2

Thanks!

When working with a long table where the end user may have to select a lot of rows you can either choose the 'os' style so that they can shift/cmd click to select large amounts of rows at once or you can choose the 'multi' style where they have to click each row individually.

The 'os' style is much faster for the end user and is the preferred option but the end users get frustrated if they mis-click without holding down a modifier key and all their previous selects disappear.

Once possible idea to resolve this end user frustration would be a combination of the 'os' and 'multi' methods where the user can use the shift/cmd modifiers as usual but clicking on a single row without the modifier keys would not cause the previous selections to become unselected.

Hi;
I'm using datatables.net 2.1.7 and updated the select to 2.1.0 today... in types.d.ts getting error of Cannot find name 'ObjectColumnRender'.ts(2304) at
interface DataTablesStaticRender {
/**
* Display a checkbox in the column's cells to be used for and represent
* row selection.
*/
select(): ObjectColumnRender;

	/**
	 * Display a checkbox in the column's cells to be used for and represent
	 * row selection, with the `value` and `name` attributes for the checkbox
	 * `input` being set by properties from the row's data object.
	 *
	 * @param valueProp Name of the data property where the `value` for the
	 *   checkbox is.
	 * @param nameProp Name of the data property where the `name` for the
	 *   checkbox is.
	 */
	select(valueProp: string, nameProp: string): ObjectColumnRender;
}

Hi.
Playing around with the plugin I noticed that when deselecting multiple items the last one remains selected.
I dug a bit into the code and noticed the following code that intentionally prevents the last row from being deselected.

I checked the behavior of many programs and none acts like that.
Can you please explain the reasoning behind it?

Anyway I believe that this behavior should be configurable what is yours?
Thanks.

Hi.
I believe I stumbled on a bug.
The preXhr listener preXhr.dt
attempts to give a solution to keeping the selected items in place when serverSide is on.
The code misses to account for more than two consecutive xhr requests since the whole list of
selected items is not kept but rather only the list of selected in the current page.
Thanks

This is a little bit weird and I am not sure whose error this is in case it qualifies as such. Running

• Datatables-Select 1.2.6
• Datatables-1.10.18 (+semanticui)
• JQuery 3.3.1

In the function enableMouseSelection is this piece of code (line 369ff):

var wrapperClass = dt.settings()[0].oClasses.sWrapper.replace(/ +/g, '.');

// Ignore clicks inside a sub-table
if ( $(e.target).closest('div.'+wrapperClass)[0] != dt.table().container() ) {
    return;
}

This triggers this exception:

jquery-3.3.1.js:1541 Uncaught Error: Syntax error, unrecognized expression: div.ui.grid.dataTables_wrapper.
    at Function.Sizzle.error (jquery-3.3.1.js:1541)
    at Sizzle.tokenize (jquery-3.3.1.js:2193)
    at Sizzle.compile (jquery-3.3.1.js:2587)
    at Sizzle.select (jquery-3.3.1.js:2677)
    at Sizzle (jquery-3.3.1.js:845)
    at Function.Sizzle.matchesSelector (jquery-3.3.1.js:1504)
    at jQuery.fn.init.closest (jquery-3.3.1.js:3060)
    at eval (eval at <anonymous> (dataTables.select.js:372), <anonymous>:1:13)
    at HTMLTableCellElement.<anonymous> (dataTables.select.js:372)
    at HTMLDivElement.dispatch (jquery-3.3.1.js:5183)

Some debugging:

> e.target
<input type=​"checkbox" class=​"dt-checkboxes">​
> $(e.target)
jQuery.fn.init [input.dt-checkboxes]
> wrapperClass
"ui.grid.dataTables_wrapper."
> $(e.target).closest('div.'+wrapperClass)
jquery-3.3.1.js:1541 Uncaught Error: Syntax error, unrecognized expression: div.ui.grid.dataTables_wrapper.

The issue is the class tag of the closest wrapper found:
<div id="data_table_wrapper" class="ui grid dataTables_wrapper<space><space>no-footer">
The issue seems to be the double space before no-footer. No idea why Datatables or jQuery generate this code.

I tried changing the regex to consume double spaces, but this does not work as the string before the regex is missing the no-footer but has a trailing space:

> dt.settings()[0].oClasses.sWrapper
"ui grid dataTables_wrapper "

For me I fixed this particular case by replacing the wrapperClass assignment line with
var wrapperClass = dt.settings()[0].oClasses.sWrapper.replace(/ +$/,'').replace(/ +/g, '.');

but this is hardly a good solution. Any idea what went wrong?

On this page, http://datatables.net/extensions/select/integration under Item selection category, All the 6 options (rows.select, columns.select, etc) are shown to be Options instead of API.
Wrong types and result in 404 :(

A button for (de)selecting all filtered results would be very useful. Then you could type in a search string to display the rows you are interested in, and the selectFiltered-button would select all of these. As you know, the selectAll-button selects all rows, without taking the filter into consideration.

If you are interested in all rows except a few, you could use the selectAll-button to select all rows, use filtering to show the rows you are not interested in, and then use the deselectFiltered-button to deselect these.

Buttons like selectPage and deselectPage could also be useful, when you don't want to (de)select anything that is currently not visible.

Hi,

it would be really nice to have an option with whom one could define that there has to be one(or x) entry selected all of the time. (Maybe as a new selection mode?)
Which would mean that there would be an automatic selection when rendering the table, when there is only one row in the table this one can not be deselected and there is only one case when there is no selection... when the table is empty.
Would be very nice to have such a behavior.