Demostration of Filter the Table Data

1. In boostrapTable() the first argument is method that we want to apply. In this case we were using "filterBy"
2. The second argument is the filters that we want to apply and filter the records. In this case we were giving "tags" that has been selected.
3. The third argument we had given is filterAlgorithm which can be customized by giving own function instead of "and" & "or".

Working of custom And

function checkTags(filterTags, rowTags) {
  for (var i = 0; i < filterTags.length; i++) {
    if (!rowTags.includes(filterTags[i])) {
      return false;
    }
  }
  return true;
}

The above code will returns true in two cases:

1. when no tags selected and filterTags array is empty.
2. if all filters tags are included in rowTags (this is what we want)

The loop will iterate according to the length of filterTags (the tags that are given from the checked checkboxes).

true: If whole array is iterated and !rowTags.includes(filterTags[i]) condition (which means i tag is not found in rowTags array) not satisfy for all the elements in an array, then obviously it will returns true. That means rowTags contains all the elements that are in filterTags array.

false: If element (tag in this case) at position i of filterTags array is not included in the rowTags array (the tags that are in the table row), it will return false and stop the loop and does not iterate the rest of the element in the filterTags array, if there are some remaining to iterate.

The second scenario is if filterTags array is empty, means no tags are provided to filter then no loop will be iterated because of the condition i < filterTags.length. And return true will be executed.

Examples for And

Lets figure it out with some examples

var filterTags1 = ["Tag 1", "Tag 2"];
var rowTags1 = ["Tag 1", "Tag 2", "Tag 3"];
console.log(checkTags(filterTags1, rowTags1));  // Output: true

var filterTags2 = ["Tag 1", "Tag 2", "Tag3"];
var rowTags2 = ["Tag 1", "Tag 2", "Tag 3", "Tag3"];
console.log(checkTags(filterTags2, rowTags2));  // Output: true

var filterTags3 = ["Tag 1", "Tag 2"];
var rowTags3 = ["Tag 1", "Tag 3", "Tag 4"];
console.log(checkTags(filterTags3, rowTags3));  // Output: false

var filterTags4 = ["Tag 1", "Tag 2", "Tag 3"];
var rowTags4 = ["Tag 1", "Tag 2", "Tag 4"];
console.log(checkTags(filterTags4, rowTags4));  // Output: false

var filterTags5 = ["Tag 1", "Tag 2", "Tag 3"];
var rowTags5 = ["Tag 1", "Tag 2"];
console.log(checkTags(filterTags5, rowTags5));  // Output: false

var filterTags6 = [];
var rowTags6 = ["Tag 1", "Tag 2"];
console.log(checkTags(filterTags6, rowTags6));  // Output: true

Shorten Code For And

function checkTags(filterTags, rowTags) {
  return filterTags.every(tag => rowTags.includes(tag));
}

In the above code, we use the every() method, which checks if every element in the filterTags array satisfies a given condition. The condition, in this case, is whether each tag in filterTags is present in rowTags using the includes() method.

If all tags in filterTags are found in rowTags, the every() method returns true. Otherwise, it returns false.

Working of custom Or

for (var i = 0; i < filterTags.length; i++) {
    if (rowTags.includes(filterTags[i])) {
        return true;
    }
}
return false;

The above code will returns false in two cases:

1. when no tags selected and filterTags array is empty. (this is the issue you may not like)
2. if all filters tags are not included in rowTags array

The loop will iterate according to the length of filterTags (the tags that are given from the checked checkboxes).

true: If any of the element (tag in this case) at position i of filterTags array is included in the array of rowTags (the tags that are in the table row), it will returns "true".

false: If whole array is iterated and rowTags.includes(filterTags[i]) condition not satisfy for all the elements in an array, then obviously it will returns fase. That means rowTags array does not contains any of the element that is in filterTags array.

The second scenario is if filterTags array is empty, means no tags are provided to filter then no loop will be iterated because of the condition i < filterTags.length. And return false will be executed.

Examples for Or

Lets figure it out with some examples

var filterTags1 = ["Tag 1", "Tag 2", "Tag 3"];
var rowTags1 = ["Tag 1", "Tag 2"];
console.log(checkTags(filterTags1, rowTags1));  // Output: true

var filterTags2 = ["Tag 1"];
var rowTags2 = ["Tag 1", "Tag 2"];
console.log(checkTags(filterTags2, rowTags2));  // Output: true

var filterTags3 = ["Tag 3", "Tag 4", "Tag 5"];
var rowTags3 = ["Tag 1", "Tag 2"];
console.log(checkTags(filterTags3, rowTags3));  // Output: false

var filterTags4 = [];
var rowTags4 = ["Tag 1", "Tag 2"];
console.log(checkTags(filterTags4, rowTags4));  // Output: false

Shorten Code For Or

function checkTags(filterTags, rowTags) {
  return filterTags.some((tag) => rowTags.includes(tag));
}

In the above code, the some() method checks if at least one element in the array satisfies a given condition. In this case, it iterates over each element (tag) in the filterTags array and checks if rowTags includes that particular tag. If rowTags includes at least one tag from filterTags, the some() method returns true. Otherwise, it returns false.

It returns true if at least one tag from filterTags is found in rowTags. If no tags match, it returns false.