I was considering using the Select extension of DataTables to provide a radio button for selecting one item. But I’m having problems with understanding what files I need to add to my project in extra files.
I downloaded the css and js files for the extension from the site and created a subfolder in the project called Select and included Select in the extrafiles.
I then added the following to the initialization of the data table, before setting the columns, data, etc.
The files were NOT showing in chrome sources. I have now dropped both of them onto the project explorer, I even moved them to the top. They do now show in sources.
I also get a pop up alert box, that I didn’t mention - it says
DataTables warning: table id=ChoiceDataTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
The console after the change shows the same messages and the pop up msg box shows the same as before as well.
DataTables example - Simple initialisation has an example that shows different files. I assume the jquery 3.5.1 is already there. One file replaces and the other is new. And no CSS file. I added them to the project, and I get less errors. The error box comes up with same error, but different line number, and the aDataSort message is the only one in the console log. And the final alert is still the same about reinitialization.
Actually, I missed the CSS files, and so this is now a set of 4 files. Still no luck. I moved on to trying the sample. It also gets this issue when I add the same 4 files at the top and change the main() to:
After some research, it looks like I’m supposed to do the following, but apparently there’s at least one more step needed. Any suggestions would help.
For the appropriate files and link and script tags, go to this site Download.
Use the tool to determine what files and code you need to make this work and download the additional files.
Since AppStudio already has DataTables for BootStrap4 and the Scroller Extension, we only need to add the Select extension (or any other extension you may want to use ). The tool has steps and here’s what to select for AppStudio
Step 1: Select Datatables.
Step 2 - do not select any items.
Extension - select Select
Step 3 - select the Download tab. Select Minify
Download the files - the two files will come in a zip file. You’ll want to unzip them into a folder under your project, maybe called DataTablesExtensions.
Add the folder name to the extraFiles property of the project.
Copy the HTML code from the tool into the extraHeaders property of the project
Initialize the Select extension with the following prior to setting other datatables properties.
$('#DataTable1').DataTable( {
select: true
} );
First, let’s talk about the files in the zip. You get many more than you need. You should become familiar with the Link and Script tags AppStudio creates in your index.html file and how extraHeaders works in this respect.
The correct files are the two files listed in the link and script tags you put into the extra headers.
Second, the extraHeaders have the wrong folder name in them. Be sure to fix them to point to where you put the two files, eg, subfolder DataTablesExtensions.
However, this doesn’t fix my problem of the reinitialization not allowed and the nDataSort property of undefined error.
There are two issues going on that is stopping this from working.
#1 - the nDatasort error is a bug in DataTables and occurs when you have these three things: 1) only one column, 2) that column has a sort order specified, and 3) you tried to initialize the Select extension).
You can avoid the single column issue in the sample by adding a column. Then the nDatasort error disappears. If you have to, create a hidden column with nothing in it, to avoid these issues.
#2 - The second error is the one about you are not allowed to reinitialize a datatable. Well, I didn’t think I was, but AppStudio does initialize DataTables. Here’s what is included in my index.html:
The timeout was not an expected solution to waiting to build(). I really don’t understand why AppStudio does this initialization. Seems like doing so elimanates features and draws a default datatable that will have to be redrawn anyway. But I also realize that changing the way this is implemented will break apps.
How do I direct AppStudio to remove this code from the deployment?
It does this in part so a table always gets drawn. It can be updated later.
I’ve done this in projects:
util.destroyTable('myTable');
destroyTable(table) {
if (!$.fn.DataTable.isDataTable(`#${table}`)) return;
$(`#${table}`).DataTable().destroy(); // remove table
$(`#${table}`).empty(); // this needs to be here - completely cleanup the table
$(`#${table}`).off('click', 'td'); // need to kill event listener
},
I’m a bit concerned that the datatables.build() in the AppStudio initialization which is on a timer to occur 500 ms later, will cause problems. If I put your code into the main(), followed by a new initialization, then it will execute before the delayed build() (most likely). Executing the build again after main() is unnecessary, but should work. But if it builds in the middle of the destruction of the table, I’m sure it would cause an error.
This still leads me to suggest an IDE property on the datatables control to either pre-initialize as it does now, or to not do any initialization.
And I’m sure the reason for the delayed build was to provide a better user experience, by delaying the build, which obviously does a ton of work. But, that sort of delaying generally bits you in the butt.
Your method works, but I have to wait till after the build() that AppStudio includes before I destroy and rebuild the table. This really seems difficult for someone to glean from the docs. I really suggest some additions to the docs to note how this is setup.
However, I still think the best solution is to add the Select extension as a property and provide a property for the initialization not to occur. I understand existing users and projects, but I also think you’re making a big mess for newbees. Default the property to initialize as it does now.
This is what I finally got working with the sample. I really like the check boxes. The highlight can be removed so that just the check box indicates selection of item. The check boxes can be round radio buttons, etc. Multi-item select can be enabled. But, the main thing was getting the Select extension integrated and initialized.
The project code: Datatable.appstudio.zip (59.8 KB) includes all of the suggestions above. Basically everything listed was needed.
Hoping some of you will like this feature and let @ghenne know you’d like this included as a normal feature of AppStudio, and be sure to mention adding another the property to remove AppStudio’s pre-initialization of data tables as well.
). The tool has steps and here’s what to select for AppStudio
