Datatable - How to change column names

1

So I put together a small test of the DataTable (BS5) component and attempted two simple tests.

  1. Clear, add / remove data (at runtime)
  2. Update column names (at runtime).

The first test worked, I can add or remove data to the existing 3 column table layout by simply specifying some JSON data like so,

  DataTable1.clear()
  DataTable1.settings.data = JSON.parse("[[""10/21/2024 3:17:48 PM"",""TEST"",""$50000""]]")
  DataTable1.build()

No problems with that.

But I’ve no luck updating the column names other than directly / manually editing the DataTable initialization code inside of the ‘index.html’ file within the project folder… not ideal.

I’ve tried the following tests with no luck:

DataTable1.clear()
DataTable1.settings.columns = JSON.parse("[{title: ""Date/Time""}, {title: ""Type""}, {title: ""Amount""}]")
DataTable1.build()

I also tried this code based on the Datatables examples at their website,

DataTable1.column(0).title = "Date/Time"
DataTable1.column(1).title("Type")

None of that worked.

I should add this, I add data to the table after I fire the column update attempts. The data gets added to the table but the Column names retain the same names as they were initialized with. My attempts to set new values are simply ignored.

Does anyone know how I can edit / update the columns at runtime?

As a side, once this is solved, it would make the greatest of sense to add a ‘Columns’ property to the component to simplify this. I mean the columns are almost as frequently used as the ‘value’ or ‘text’ property on a text box.

Thanks again,
-FRC

2

Datatables is a powerful control - you can do almost anything with it. The definitive documentation (and support) for it is available on the developer’s website.

3

Yes thats true there are examples on their website. Also I could not get them to function within NSB.

I think I have it solved though, I’m a little short on time. I ditched using the datatable and just switched to using the jqWidgets Listbox which easily accepted JSON formatted data (at runtime even!) and displays the results instantly with one line of code. No fancy columns but I need functional right now, I can work on ‘pretty’ later.

lstTrans.source = “[”“10/21/2024 12:56 PM CHARGE $500.00"”, ““10/21/2024 04:56 PM REFUND $430.00"”]”

-FRC

4

Sorry, I posted too soon, this is the updated (fixed) code that actually works for me. This code is for the BASIC language version of the jqWidgets Listbox. In this example, I feed in a raw string (which could come from an AJAX response or whatever) and then convert it to a JSON object, then insert it into the Listbox. The refresh happens immediately afterward.

Items of note:

  1. The way you access the Listbox in code is inconsistent vs the usual BASIC methods but it works just fine.
  2. Also accessing the listbox objects own “lstTest.source” property at runtime doesn’t appear to do anything however it does work to set an Initial value (at design-time). Only the method below appears to work at runtime.
  3. This is a compiled APK test. I did not test this as a Webapp or on iOS.
  '// Listbox object is named lstTest
  strSourceRaw = "[""10/21/2024 12:56 PM CHARGE $500.00"", ""10/21/2024 04:56 PM REFUND $430.00""]"
  strSourceJSON = JSON.parse(strSourceRaw) '// Convert to JSON object
  $("#lstTest").jqxListBox({source: strSourceJSON}) '// This triggers refresh of the listbox named lstTest