How To Search Html Table Data With Search Parameters
I have an HTML table which i am populating with JSON data, there is an search field i have provided which is giving the tabledata on search, Now what i am trying to do is I have
Solution 1:
Have a look at this code.
I use the selectedIndex as eq
If you enable the first option, they can search anywhere
var tableValue = [{
"Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
"User Name": "admin",
"User LoginId": "admin",
"User Password": "admin",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
"User Name": "maiyas",
"User LoginId": "maiyas",
"User Password": "maiyas",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "CHEF BAKERS",
"User Name": "cbadmin",
"User LoginId": "cbadmin",
"User Password": "cbadmin",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "CHEF BAKERS",
"User Name": "cbaker",
"User LoginId": "cbaker",
"User Password": "cbaker",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
"User Name": "jayanagar",
"User LoginId": "jayanagar",
"User Password": "jayanagar",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
"User Name": "malleswaram",
"User LoginId": "malleswaram",
"User Password": "malleswaram",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
"User Name": "kolar",
"User LoginId": "kolar",
"User Password": "kolar",
"User role": "DISTRIBUTOR",
"Active": "Y"
}
]
functionaddTable(tableValue) {
var $tbl = $("<table />", {"class": "table table-striped table-bordered table-hover"}),
$thd = $("<thead/>"),
$tb = $("<tbody/>"),
$trh = $("<tr/>", {"class": "text-center"});
$.each(Object.keys(tableValue[0]), function(_,val) {
$("<th/>").html(val).appendTo($trh);
});
$trh.appendTo($thd);
$.each(tableValue, function(_, item) {
$tr = $("<tr/>", {"class": "filterData"});
$.each(item, function(key,value) {
$("<td/>", {"class": "text-right"}).html(value).appendTo($tr);
$tr.appendTo($tb);
});
});
$tbl.append($thd).append($tb);
$("#table").html($tbl);
}
$(function() {
addTable(tableValue)
$("#myInput").on("input", function() {
var q = $(this).val().toLowerCase();
if (q === "") {
$(".filterData").show();
returntrue;
}
var fldIdx = $("#mySelect")[0].selectedIndex;
$(".filterData").hide().filter(function(i, el) {
var d = fldIdx === 0 ? $(el).text().trim().toLowerCase() : $("td", el).eq(fldIdx - 1).text().trim().toLowerCase()
// console.log(q, d, d.indexOf(q));return (d.indexOf(q) > -1);
}).show();
});
$("#mySelect").on("change", function(e) {
$("#myInput").trigger("input");
});
});<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"><selectid="mySelect"><option>All</option><option>Distributor Name</option><option>User Name</option><option>User LoginId</option><option>User Password</option><option>User Role</option><option>Active</option></select><inputid="myInput"type="text"placeholder="Search.."><divid="table"></div>Solution 2:
You should not do the searching on the actual elements (on the DOM that is), 'cause it is VERY slow. Consider searching and making changes on the initial data array instead. Let the actual TABLE be a mere representation visualization of the array in it's current state. Then your code and logic will become cleaner, easier to comprehend and maintain, and much MUCH faster.
Here's the snippet:
$(document).ready(function() {
var filters = {
header: '',
value: ''
};
var tableValue = [
{
isVisible: true,
data: {
"Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
"User Name": "admin",
"User LoginId": "admin",
"User Password": "admin",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
},
{
isVisible: true,
data: {
"Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
"User Name": "kolar",
"User LoginId": "kolar",
"User Password": "kolar",
"User role": "DISTRIBUTOR",
"Active": "Y"
}
}
];
functionaddTable(tableValue) {
// you could also use these to construct dynamic select boxvar headers = Object.keys(tableValue[0].data); // or hardcode these somewhere// construct headervar thead = '<tr><th>' + headers.join('</th><th>') + '</th></tr>';
var tbody = '';
for (var i = 0; i < tableValue.length; i++) { // thid one to make tbodyif (!tableValue[i].isVisible) continue; // ignore non relevant items
tbody += '<tr>';
for (var header in tableValue[i].data) {
tbody += '<td>' + tableValue[i].data[header] + '</td>';
}
tbody += '</tr>';
}
if (!tbody) {
tbody = '<tr><td colspan="'+headers.length+'">No results.</td></tr>';
}
document.getElementById("table").innerHTML = '<table class="table table-striped table-bordered table-hover">' + thead + tbody + '</table>';
}
functionfilterTable() {
var re = newRegExp(filters.value, 'i');
var matchContents = function(str) {
return re.test(str);
};
tableValue.forEach(function(row) {
var data = row.data;
if (filters.header) {
row.isVisible = matchContents(data[filters.header]);
} else {
for (var header in data) {
if (matchContents(data[header])) {
row.isVisible = true;
return;
}
}
row.isVisible = false;
}
});
addTable(tableValue);
}
$("#mySelect").on("change", function(e) {
filters.header = $(":eq("+this.selectedIndex+")", this).text();
filterTable();
});
$("#myInput").on("keyup", function() {
filters.value = $(this).val().toLowerCase();
filterTable();
});
addTable(tableValue);
});<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"><selectid="mySelect"><option></option><option>Distributor Name</option><option>User Name</option><option>User LoginId</option><option>User Password</option><option>User Role</option><option>Active</option></select><inputid="myInput"type="text"placeholder="Search.."><divid="table"></div>I also somewhat simplified addTable() logic, it was over complicated.
Solution 3:
You may attach user defined (your own) columnName property to each cell DOM object you create. Then, you can enumerate cells in search function doFilter and check if they columnName property match current filter field.
$(document).ready(function() {
var tableValue = [{
"Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
"User Name": "admin",
"User LoginId": "admin",
"User Password": "admin",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
"User Name": "maiyas",
"User LoginId": "maiyas",
"User Password": "maiyas",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "CHEF BAKERS",
"User Name": "cbadmin",
"User LoginId": "cbadmin",
"User Password": "cbadmin",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "CHEF BAKERS",
"User Name": "cbaker",
"User LoginId": "cbaker",
"User Password": "cbaker",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
"User Name": "jayanagar",
"User LoginId": "jayanagar",
"User Password": "jayanagar",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
"User Name": "malleswaram",
"User LoginId": "malleswaram",
"User Password": "malleswaram",
"User role": "DISTRIBUTOR",
"Active": "Y"
},
{
"Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
"User Name": "kolar",
"User LoginId": "kolar",
"User Password": "kolar",
"User role": "DISTRIBUTOR",
"Active": "Y"
}
]
functionaddTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) { //this one to make theadvar th = document.createElement("th");
th.innerHTML = col[i];
tr.classList.add("text-center");
tr.appendChild(th);
}
for (var i = 0; i < tableValue.length; i++) { // thid one to make tbody
tr = table.insertRow(-1);
tr.classList.add("filterData"); //hear i am adding the class in bodyfor (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.columnName = col[j];
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata);
tabCell.classList.add("text-right");
}
tabCell.innerHTML = tabledata;
}
var divContainer = document.getElementById("table");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
}
addTable(tableValue);
functiondoFilter(filterField, q)
{
q = q.toLowerCase();
if ((filterField === "") || (q === "")) {
$(".filterData").show();
return;
}
// we have something to filter
$(".filterData").hide().filter(function(i, el) {
var rowCells = el.cells;
//console.log('el',el.cells, filterField, q);for (var ci = 0; ci < el.cells.length; ci++) {
var cell = rowCells[ci];
if (cell.columnName == filterField) {
var d = $(cell).text().trim().toLowerCase();
//console.log(q, d, d.indexOf(q));return (d.indexOf(q) > -1);
}
}
returnfalse;
}).show();
}
$("#mySelect").on("change", function(e) {
doFilter($("#mySelect").val(), $("#myInput").val());
});
$("#myInput").on("keyup", function() {
doFilter($("#mySelect").val(), $("#myInput").val());
});
});
BTW ability to attach user-defined properties to any DOM object in many cases may simplify code dramatically. Just to keep things clean, you may decide to attach whole data record to the tr for example. Just to not interfere with standard properties, you may do it in facion of el.appData = { field1 : value1, ... }, and access as el.appData.field1. In that case you inject single appData property object that easy to track down in your code.
Post a Comment for "How To Search Html Table Data With Search Parameters"