topic Re: Search function in a table in App Development

Search function in a table

erwanallain — Sat, 16 Nov 2024 07:14:45 GMT

Hello, I develop a qlik sense extension (a table) and i want to know how I can put a the search function like the original table (see picture)
Thank.

Re: Search function in a table

Anil_Babu_Samineni — Wed, 21 Nov 2018 09:22:30 GMT

You developed Qliksense Extension? There must be one more script to create search icon as well - That you have to find out? You may help which is that extension?

Re: Search function in a table

erwanallain — Wed, 21 Nov 2018 10:00:59 GMT

Hello, yes i think too they is a script or a API for use the search function in qlik sense, but i didn't find it. I didn't find other table extension who use this search function... This is why I ask to the Qlik community.

Re: Search function in a table

erwanallain — Fri, 23 Nov 2018 09:28:57 GMT

Ok, I have a solution.

The support said me : Unfortunately, we do not have an example or documentation to share for what you are trying to develop.

So I can't have the exact same search function, but I have developpe an other one:

I put an unique ID on my table, and a input type text before the table:

var uniqueID = getUniqueID();
var input = <input class="inputText_7" type="text" placeholder="Search...">, html = <table id="'+uniqueID+'" >;

The uniqueID was initialised by this function :

function getUniqueID(){
  var uniqueID = new Date();
  return uniqueID.getTime();
}

Then I just create my table, I print it, and I create a event:

$element.html( input+html );
$element.find('.inputText_7').on('keyup', function() {
  var filter = this.value.toUpperCase();
  searching(hypercube.qDataPages[0].qMatrix, filter, uniqueID);
});

And the more important function:

	function searching (rows, inp, uniqueID) {
		var tr, td, i, tmp, table;
  		table = document.getElementById(uniqueID);
		tr = table.getElementsByTagName("tr");
  		for (i = 0; i < tr.length; i++) {
    		   td = tr[i].getElementsByTagName("td")[0];
    		   if (td) {
      			if (td.innerHTML.toUpperCase().indexOf(inp) > -1)
       		 		tr[i].style.display = "";
      			else tr[i].style.display = "none";
    		   }
  		}
	}