Example 1: search functionality for html table on text box
BY LOVE SINGH,
Call this function onKeyUp event of TEXTBOX.
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("TextBoxID");
filter = input.value.toUpperCase();
table = document.getElementById("TableID");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
var x = $("#TextBoxID").val();
var regex = /^[a-zA-Z]+$/;
if (!x.match(regex)) {
td = tr[i].getElementsByTagName("td")[0];
}
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Example 2: filter table search
new Vue({
el: '#demo',
data: {
sortKey: 'name',
reverse: false,
searchName: '',
searchOperator: '',
searchAge: '',
columns: ['name', 'age'],
newUser: {},
search: "",
name: "",
age: "",
users: [
{ name: 'John', age: 50 },
{ name: 'Jane', age: 22 },
{ name: 'Paul', age: 34 },
{ name: 'Kate', age: 15 },
{ name: 'Amanda', age: 65 },
{ name: 'Steve', age: 38 },
{ name: 'Keith', age: 21 },
{ name: 'Don', age: 50 },
{ name: 'Susan', age: 21 }
]
},
methods: {
sortBy: function (sortKey) {
this.reverse = (this.sortKey == sortKey) ? !this.reverse : false;
this.sortKey = sortKey;
},
filterByName : function(user) {
if (this.searchName.length === 0) {
return true;
}
return (user.name.toLowerCase().indexOf(this.searchName.toLowerCase()) > -1);
},
filterByAge : function (user) {
if (this.searchOperator.length === 0 || this.age.length === 0) {
return true;
}
if (this.searchOperator === '>') {
return (user.age > this.age);
} else if (this.searchOperator === '<') {
return (user.age < this.age);
}
},
orderBy : function (userA, userB) {
let condition = (userA[this.sortKey] > userB[this.sortKey]);
if (this.reverse) {
return !condition;
} else {
return condition;
}
}
},
computed: {
filteredPersons: function () {
return this.users
.filter(this.filterByName)
.filter(this.filterByAge)
.sort(this.orderBy);
}
},
});