Search

This example shows DataTables and the Select extension being used with Fomantic-UI (a maintained fork of Semantic-UI). The DataTables / Fomantic-UI integration provides seamless integration for DataTables to be used in a Fomantic-UI page.

This example shows DataTables and Select being used with jQuery UI providing the base styling information. The DataTables / jQuery UI integration provides seamless integration for DataTables to be used in a jQuery UI page.

Select, like all other DataTables extensions fully supports being themed by external styling frameworks. Styling using the core frameworks supported by DataTables are demonstrated in this section.

This example shows DataTables and the Select extension being used with the Foundation framework providing the styling. The DataTables / Foundation integration provides seamless integration for DataTables to be used in a Foundation page.

This example shows DataTables and the Select extension being used with Bulma providing the styling. The DataTables / Bulma integration provides seamless integration for DataTables to be used in a Bulma page.

This example shows DataTables and the Select extension being used with Bootstrap 5 providing the styling. The DataTables / Bootstrap 5 integration provides seamless integration for DataTables to be used in a Bootstrap 5 page.

This example shows DataTables and the Select extension being used with Bootstrap 4 providing the styling. The DataTables / Bootstrap 4 integration provides seamless integration for DataTables to be used in a Bootstrap 4 page.

This example shows DataTables and the Select extension being used with the Bootstrap framework providing the styling. The DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap page.

Select is an extension for DataTables that provides table item selection capabilities. In its most simple form it can be enabled on a DataTable by setting the select option to be true. This will enable Select's default options - row selection which is performed using the os method (click to select a single item, cmd/ctrl to add and remove items or shift to select a range of items) - see the select.style option. This example shows how to disable the deselection of rows by clicking on them by using the toggleable option. toggleable is true by default, meaning that clicking a selected rows will deselect it. By setting toggleable to false when a selected row is clicked it will remain selected rather than deselecting. On initialisation this example will preselect a row, meaning that at least 1 row will always have to have been selected at any given time.

This example shows how select integrates with the stateSave initialisation option. Note that for the selection state of rows to be saved, the rows must have a unique identifier available. You can tell DataTables where to find the id property through the rowId option.

Excellent, thank you Allan. I tried to add a div before the table with the overflow:auto + removing -scrollX but the scrollbar was always showing. I didn't thought of targeting the div you mentionned.

hey thanks. Your reply and everyone here help me tremendously.

Thank you Allan! Have a nice day!

I'd like to export the data in a particular view, with data loaded from Ajax via SearchPanes filter (and the rest of the filter sets). I'm hoping that if the data is all in memory (which is a bit tricky to calculate because Scroller fetches a number of rows based on a formula, but let's suppose for the moment that it fits. Will the export to csv work? If it doesn't fit in memory, I'm not quite sure how to handle it. My thought is to use the same URL that I use to load the ajax and dispatch an event somewhere that creating the report using that data. That seems like a lot of work, so the alternative might be to restrict reports to small enough to fit in the scroller. I'm looking for some guidance. The Export buttons don't talk about serverSide data.

So if you do something like: INSERT INTO yourTable (col1, col2) VALUES ("A", "B") RETURNING OBJECTID; directly in the database, does that also give the error? I'm wondering if the fact that it is such a large number is causing it to be an object that Oracle can't work with for RETURNING. If you try the same with a simple integer for the primary key, does it then work? Allan

Thanks for the update - good to hear that the latest versions are working well for you. Allan

columns().dataSrc() will get you the data source for the selected columns, so you could use: tabla.columns().dataSrc().toArray() to get an array of data with the data source for each column. You might want to set data: null for the first column with the checkboxes if you take that approach. Allan

json = JSON.parse(decrypted); This assigned a different object to the local json variable. It does not effect the object that had been passed in and assigned to the local json variable. The reason why json.recordsTotal = decryptedData.recordsTotal || 0 works, is that you are mutating the original object, not just a local variable pointer. Allan

The nightly build gets cached by CloudFlare's edge servers. You might need to add a query parameter to the URL - I usually use the current date. Excellent to hear that has helped - thanks for letting me know. I'll probably do a release on Friday for the change. Allan

Link to test case: https://live.datatables.net/xomujosa/7/edit Debugger code (debug.datatables.net): Error messages shown: Description of problem: Hi. In this test case, I want to use the values of the 4 rows called « Trimestre » (rowgroup) to create the series for a chart. I have made a test case with what I could do : create the 4 series but I think I should do it on the draw event of the table but I can't find how to access to the rowgrouping infos from here. I've put some comments on the test case and also fake values for the series (at the very end of the JS code) so you can see what kind of chart I want to create. https://live.datatables.net/xomujosa/7/edit Do you have any clue for me ? Thanks