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

How to apply a filter in Table and Report controls

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

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!