DecSoft Support - How to apply a filter in Table and Report controls

How to apply a filter in Table and Report controls

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Take a look at some frequently asked questions about us and our products!

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Asley Cruz

Hi David, I found this function to filter a table. It works but the table in AB2 needs to be refreshed to take effect.
The table only takes effect when I do click in any other part of the project.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table

If you know to refresh the table, please, let me know. Many thanks David :)

AsleyCruz.com

Graphic & Web Designer

My app: AC Biblia

My game: AC Trivlia

decsoft

Hola Asley,

You no need to filter the table itself (the HTML markup), but the Table's "data" property. Whatever change you do into the "data" propery is automatically reflected in the table (HTML markup).

Purchase one or more licenses of our products if they are useful to you!

decsoft

Hello Asley,

Maybe a bit of code can clarify the things here. Based in the "Table" sample app, go to the "view1" Show event, and, replace the Javascript code that you can see by the below one:


app.setVar('tableOriginalData',  [
  {name: 'Peter', sport: 'Tennis', phone: 8798261},
  {name: 'Danny', sport: 'Futbol', phone: 5673436},
  {name: 'David', sport: 'Basket', phone: 3729642},
  {name: 'Samuel', sport: 'Golf', phone: 9382791},
  {name: 'Marcos', sport: 'Cars', phone: 2716391},
]);

views.view1.table1.data =
 app.store.tableOriginalData;

Originally we set the Array into the "table1.data" property, but, to filter the contents, we save a copy of the original "table1.data" in another variable, in this case "app.store.tableOriginalData". Now place a Text Input control in the "view1", below the Table, and, place the below code in his "KeyUp" event:


// This code filter the Table's data variable searching in the "name" field of the objects.

// If the Text Input control value is empty, we set the original data to the table
if (app.trimStr(views.view1.input1.value) === '') {
  views.view1.table1.data = app.store.tableOriginalData;
  return false;
}

// In other case we want to filter the table's data variable

var
  data = [],
  query = app.lowerCase(views.view1.input1.value);

// Iterate over the table's data records

for (var i in app.store.tableOriginalData) {

  // Search for the query (the input's value) in the "name" field of the record

  if (app.strSearch(app.lowerCase(app.store.tableOriginalData[i].name), query) !== -1) {

    // If we found the query in the name, then add it to our new "data" variable

    data.push(app.store.tableOriginalData[i]);
  }
}


// And finally assign the filtered data variable into the table

views.view1.table1.data = data;

That's all. Run the app and type something in the new Text Input control: you must see that only the records who his name contains the query (the Input Text value) is shown in the table and not other records. It's more or less easy to expand the search to other fields, etc. Please, go ahead if you have some further questions!