-
-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New:
-init select.selectable option which is a callback that can be…
… used to determine if a function can be selected or not. New: `-api select.cumulative()` method which can be used with server-side processing to get all selected rows across multiple pages.
- Loading branch information
Showing
5 changed files
with
206 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <?xml version="1.0" encoding="UTF-8" ?> | ||
| <dt-api library="Select"> | ||
| <name>select.cumulative()</name> | ||
| <summary>Get a list of selected row ids across pages (server-side processing)</summary> | ||
| <since>2.1.0</since> | ||
|
|
||
| <type type="function"> | ||
| <signature>select.cumulative()</signature> | ||
| <returns type="string[]"> | ||
| A list of IDs for the rows that are selected. | ||
| </returns> | ||
| <description> | ||
| Get a list of IDs for rows that are selected regardless of paging (for use with server-side processing). | ||
| </description> | ||
| </type> | ||
|
|
||
| <description> | ||
| When server-side processing is enabled (`-init serverSide`) DataTables only has knowledge of the rows that are currently shown. That might be only a fraction of the total number of rows in the table, since of course the whole point of server-side processing is to speed things up when working with large data sets. | ||
|
|
||
| As a result Select can only perform selection on rows that are displayed at the client-side. However, Select (as of v2.1.0) will retain a list of all rows that are selected, both reselecting them when they are displayed again, but also providing the list of selected rows (regardless of paging or filtering) using this method. | ||
|
|
||
| For this to work each row needs to be uniquely addressable via a given data point - typically and id / primary key value. Use `-init rowId` to tell DataTables where that value can be found. The values returned by this method will contain these ids. | ||
|
|
||
| When operating with these ids, it is important that you validate that the id still exists when performing an action on it. This is because a row might be deleted, but Select might not be aware of this fact and retain it in its list. | ||
| </description> | ||
|
|
||
| <example title="Get a list of ids on button press"><![CDATA[ | ||
| new DataTable('#example', { | ||
| ajax: '/api/data', | ||
| columns: [ | ||
| { data: 'first_name' }, | ||
| { data: 'last_name' }, | ||
| { data: 'position' }, | ||
| { data: 'office' }, | ||
| { data: 'start_date' }, | ||
| { data: 'salary' } | ||
| ], | ||
| layout: { | ||
| topStart: { | ||
| buttons: [ | ||
| 'pageLength', | ||
| { | ||
| text: 'View selected ids', | ||
| action: function (e, dt) { | ||
| alert( | ||
| 'Information about selected rows: '+ | ||
| JSON.stringify(dt.select.cumulative()) | ||
| ); | ||
| } | ||
| }, | ||
| 'selectAll', | ||
| 'selectNone' | ||
| ] | ||
| } | ||
| }, | ||
| processing: true, | ||
| select: true, | ||
| serverSide: true | ||
| }); | ||
| ]]></example> | ||
|
|
||
| <related>-init rowId</related> | ||
| <related>-init select.headerCheckbox</related> | ||
| </dt-api> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <?xml version="1.0" encoding="UTF-8" ?> | ||
| <dt-example table-type="html" order="11"> | ||
|
|
||
| <css lib="datatables select"> | ||
| tr.unselectable { | ||
| opacity: 0.5; | ||
| } | ||
| </css> | ||
| <js lib="jquery datatables select"> | ||
| <![CDATA[ | ||
| $('#example').DataTable({ | ||
| rowCallback: function (tr, rowData) { | ||
| if (rowData[2] === 'New York') { | ||
| $(tr).addClass('unselectable'); | ||
| } | ||
| }, | ||
| select: { | ||
| selectable: function (rowData) { | ||
| return rowData[2] !== 'New York'; | ||
| } | ||
| } | ||
| }); | ||
| ]]> | ||
| </js> | ||
|
|
||
| <js-vanilla> | ||
| <![CDATA[ | ||
| new DataTable('#example', { | ||
| rowCallback: function (tr, rowData) { | ||
| if (rowData[2] === 'New York') { | ||
| tr.classList.add('unselectable'); | ||
| } | ||
| }, | ||
| select: { | ||
| selectable: function (rowData) { | ||
| return rowData[2] !== 'New York'; | ||
| } | ||
| }, | ||
| columnDefs: [ | ||
| { | ||
| target: 0, | ||
| render: DataTable.render.select() | ||
| } | ||
| ] | ||
| }); | ||
| ]]> | ||
| </js-vanilla> | ||
|
|
||
| <title lib="Select">Disallow selection on specific rows</title> | ||
|
|
||
| <info><![CDATA[ | ||
| This example demonstrates the ability to disable row selection on specific rows using the `-init select.selectable` option. This must be given as a function which will then check the row to see if it should be selectable or not (typically this determination will be based on the data in the row). If not, Select will ignore operations on this row. | ||
| In this example all rows which have a location of "New York" are unselectable. To show this visually a little bit of CSS is used to fade those rows out (class added by the `-init rowCallback` handler). This is optional but it gives the end user a visual clue. If you are using a checkbox for row selection, rows which don't match the selectable requirements will not have a checkbox shown. | ||
| ]]></info> | ||
|
|
||
| </dt-example> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.