Dynamic filtering

[Gregstand]

Does anyone know if its possible in JS to dynamically change the filters applying to a Table or View that's linked to a datapage?  I have several checkboxes for Users to select from, and the selections can drastically alter the types of filters I want to apply.   Essentially I'm looking for much greater control over the results table than the Caspio wizard screen filters can allow.

Thanks

[Vitalikssssss]

On 5/23/2017 at 10:48 PM, Gregstand said:

Does anyone know if its possible in JS to dynamically change the filters applying to a Table or View that's linked to a datapage?  I have several checkboxes for Users to select from, and the selections can drastically alter the types of filters I want to apply.   Essentially I'm looking for much greater control over the results table than the Caspio wizard screen filters can allow.

Thanks

Hi Gregstand,

It looks to me that you need something similar to this.

Hope this helps.

 

[Gregstand]

Thanks Vitalikssssss,

Yes, that explains how to filter a results datapage.  But the problem I face is that I'd need many many datapages with their own tailored filters to achieve what I need.  I'm trying to drastically cut down on the number of results datapages by trying to have some control over filtering using JS or jquery.  I don't really care whether the code directly affects the Tables, the Views or the datapages, as long as I can have some control using coding.

Thanks

 

[jhernandez]

On 6/1/2017 at 11:11 AM, Gregstand said:

Thanks Vitalikssssss,

Yes, that explains how to filter a results datapage.  But the problem I face is that I'd need many many datapages with their own tailored filters to achieve what I need.  I'm trying to drastically cut down on the number of results datapages by trying to have some control over filtering using JS or jquery.  I don't really care whether the code directly affects the Tables, the Views or the datapages, as long as I can have some control using coding.

Thanks

 

I actually just learned a rustic way on how to do this.

You will first need to set up your DataPage as a table (I haven't tested this for any other DataPage type, but the principle may be the same). Go through the whole set up, and once you arrive at the Configure Results Page Fields, add a Header and a Footer as DataPage Elements.

Here is where it gets a bit tricky. Go to the Header and click on the "Source" button to add the following HTML code:

<input id="myInput" onkeyup="myFunction()" placeholder="Carrier" type="text" />

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("caspioform");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr.getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr.style.display = "";
      } else {
        tr.style.display = "none";
      }
    } 
  }
}
</script>

Click preview and the filter will only keep the text that matches what's in the input box no matter where the text actually resides. Do note this will only filter the FIRST column in the table. If you want to change the column that's being filter, change this line of code:

td = tr.getElementsByTagName("td")[0]; (Change the [0] to the column where you want the filter to be applied; i.e. [0] is the first column, [1] is the second column, so on and so forth)

Also note this will only work depending on how scripts are ran in the host page. The preview page runs the script just fine, but when you embed the the table in something like Wordpress, you will have to add the Script to Wordpress or this won't work. Some webpages don't let you run JS willy-nilly to prevent websites from crashing.

Also note this is a basic filter that can only filter ONE column at a time. If you need multiple filters to work in tandem, this will not work for you. You can Copy/Paste the same script with some modification to sort different columns (you will have to change the myInput and myFunction in the new script to something like myInput1 and myFunction1), but like I said they will only work on the column you tell them to filter.

I am a pleb when it comes to programming, but I am sure savvy people can work this if you need it.

Thanks.