Search in multiple columns using contains selectors - javascript

i am creating a search where user can search in multiple columns.
I achieved doing search for single columns using jQuery :contains, but not getting how to do multiple column search?
CODE:
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input type="text" onkeyup="search('name', this.value);" />
</td>
<td>
<input type="text" onkeyup="search('number', this.value);" />
</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr>
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr>
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
Java Script Code Here :
function search(field, val) {
if (val.length > 1) {
$('.search_name').parent('tr').hide();
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function(elem) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
if (field == 'name') {
$('.search_name:contains(' + val + ')').parent('tr').show();
}
if (field == 'number') {
$('.search_number:contains(' + val + ')').parent('tr').show();
}
} else {
$('.search_name').parent('tr').show();
}
}
From the above code it searches for single column at a time but i want search word in name abcd with number 12345, so than it shows only 1 row which matches both the keywords.
DEMO PLUNKER

Try This
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input id="searchName" type="text" onkeyup="search();" />
</td>
<td>
<input id="searchNumber" type="text" onkeyup="search();" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
function search() {
var searchName = $("#searchName").val() || '';
var searchNumber = $("#searchNumber").val() || '';
if (searchName == '' && searchNumber == '') {
$('tr.data').show();
}
else {
$('tr.data').hide();
if (searchName != '' && searchNumber != '') {
var eleSearchName = $(".search_name:contains(" + searchName + ")");
if (eleSearchName.length > 0) {
$.each(eleSearchName, function () {
if ($(this).next("td.search_number:contains(" + searchNumber + ")").length > 0)
$(this).parent('tr').show();
});
}
}
else if (searchName != '') {
$('.search_name:contains(' + searchName + ')').parent('tr').show();
}
else if (searchNumber != '') {
$('.search_number:contains(' + searchNumber + ')').parent('tr').show();
}
else {
$('tr.data').show();
}
}
}
</script>
</body>
</html>
UPDATE: Try this Generic Code upto N number of columns :)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input class="searchbox" data-class="search_name" type="text" />
</td>
<td>
<input class="searchbox" data-class="search_number" type="text" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
$(".searchbox").on('keyup', function () {
if ($(this).val() != '') {
search(this);
}
else {
$(".data").show();
$.each($(".searchbox"), function () {
if ($(this).val() != '') {
$(this).keyup();
}
});
}
});
function search(ele) {
var val = $(ele).val() || '';
if (val == '')
return;
var dataclass = $(ele).attr('data-class');
var SearchInText = '';
$.each($(".data:visible"), function () {
SearchInText = $(this).find("td." + dataclass).text();
if (SearchInText.indexOf(val) == -1)
$(this).hide();
});
}
</script>
</body>
</html>

Related

How Can I filter the data based on textbox values that inside the table data?

$("#srch").on("keyup", function() {
var value = $(this).val();
$("#Filtertable tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:nth(1)").val();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
<table id="Filtertable" style="width: 40%; border: 1px solid black;">
<thead>
<tr>
<th></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Tom"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Jerry"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Happy Morning"> </td>
</tr>
</tbody>
</table>
This is my code, Can someone explain How to get the value of textbox inside the td
How can I filter the data after adding some extra rows, Tried Many examples but nothing worked so far, Please Help.
Is there any alternative Way available to do this filter???
Nothing worked so far since I dont know How to get it done!
Any solution without using JQuery is also appriciated..
There is 2 problems.
To get the value in a <td> you have to use .text(), or you can add input in the selector.
var id = $row.find("td:nth(1) input").val();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
Also it has to be id.indexOf(value) == -1
Demo
$("#srch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#Filtertable tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:nth(1) input").val().toLowerCase();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Filtertable" style="width: 40%; border: 1px solid black;">
<thead>
<tr>
<th></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Tom"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Jerry"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Happy Morning"> </td>
</tr>
</tbody>
</table>
<input id="srch" />

How to delete two "tr" rows with js?

When I delete product into basket, products deleted successfully but company name does not delete. I'm using javascript. i cant solve the problem, help me pls...
function getCurrentRow(t) {
var v = parseInt($.trim(t.attr("data-row-id")));
if (isNaN(v)) {
console.log("data-row-id:null");
return null;
}
var currentRow = getRow(v);
if (currentRow == null) {
console.log("currentRow:null");
return null;
}
return currentRow;
}
// Delete
basketContainer.on('click', 'button[data-button-name="delete"]', function() {
var o = $(this);
var t = o.closest("tr");
var currentRow = getCurrentRow(t);
if (currentRow == null) {
return;
}
postData(t, currentRow.index, {
"basketid": currentRow.id,
"pdoductid": currentRow.ProductID,
"count": 0,
"cmdtype": cmdTypes.Delete
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<thead>
<tr data-row-id="item.id">
<td colspan="4" style="color: #d53434">Shop: <strong>Shop name</strong></td>
</tr>
</thead>
<tbody>
<tr role="row" data-row-id="item2.id">
...
</tr>
</tbody>
</table>
You mean remove the table when no more products from that shop?
$("#basketContainer").on('click', 'button[data-button-name="delete"]', function() {
const $tr = $(this).closest("tr");
const $tb = $(this).closest("tbody");
$tr.remove()
if ($tb.find("tr").length === 0) $tb.closest("table").remove()
});
table {
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="basketContainer">
<table>
<thead>
<tr data-row-id="item.id">
<td colspan="4" style="color: #d53434">Shop: <strong>Shop name 1</strong></td>
</tr>
</thead>
<tbody>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr data-row-id="item.id">
<td colspan="4" style="color: #d53434">Shop: <strong>Shop name 2</strong></td>
</tr>
</thead>
<tbody>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
<tr role="row" data-row-id="item2.id">
<td><button type="button" data-button-name="delete">Delete</button></td>
</tr>
</tbody>
</table>
</div>

Javascript table filter doesn't show table headers

Im using a script to filter a table based on a select value. The script works, the only problem is that it filter also the headers of the table, which Id like to show always.
This is the javascript and the table:
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:last-child').text().split(';').indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>
My question is: How can I edit the script to show the headers?
Thank you for your time :D
let me know if I have to explain the situation better.
you can add a more specific selector :
var dataset = $('table tbody tr');
Please find the below solution with output.
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return index !== 0 && $(item).find('td:last-child').text().split(';').map(x => x.trim()).indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDA; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>

Filter Table per columb

I have code here which filtering table doesn't work, then I want the status filter with checkbox, what I have to do?, please help me!
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px">Program1
</td>
<td width="10px">2012
</td>
<td width="20px">Province1
</td>
<td width="20px">Municipality/LGU1
</td>
<td width="20px">Barangay1
</td>
<td width="30px">Project1
</td>
<td width="20px">200000
</td>
<td width="20px">completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px">Program1
</td>
<td width="10px">2013
</td>
<td width="20px">Province2
</td>
<td width="20px">Municipality/LGU2
</td>
<td width="20px">Barangay2
</td>
<td width="30px">Project2
</td>
<td width="20px">500000
</td>
<td width="20px">ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px">Program3
</td>
<td width="10px">2014
</td>
<td width="20px">Province3
</td>
<td width="20px">Municipality/LGU3
</td>
<td width="20px">Barangay3
</td>
<td width="30px">Project3
</td>
<td width="20px">6000000
</td>
<td width="20px">suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px">Program4
</td>
<td width="10px">2016
</td>
<td width="20px">Province4
</td>
<td width="20px">Municipality/LGU4
</td>
<td width="20px">Barangay4
</td>
<td width="30px">Project4
</td>
<td width="20px">1000000
</td>
<td width="20px">cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
Thank you in advance!
What you have done in your javaScript / Jquery side is correct. You missed to add the relevant class names to your HTML. I added classes for year (and I made a change to have 2 records for 2012) and allocation and it seems working.
Try searching with year = 2012 and allocation = 200000
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px">Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px">Province1
</td>
<td width="20px">Municipality/LGU1
</td>
<td width="20px">Barangay1
</td>
<td width="30px">Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px">completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px">Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px">Province2
</td>
<td width="20px">Municipality/LGU2
</td>
<td width="20px">Barangay2
</td>
<td width="30px">Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px">ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px">Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px">Province3
</td>
<td width="20px">Municipality/LGU3
</td>
<td width="20px">Barangay3
</td>
<td width="30px">Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px">suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px">Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px">Province4
</td>
<td width="20px">Municipality/LGU4
</td>
<td width="20px">Barangay4
</td>
<td width="30px">Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px">cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
I have changed code and working for status as well
fiddle: https://codepen.io/creativedev/pen/yEOPbz
$(document).ready(function(){
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
});
var len = $i.length;
if (len === 0)
return $rows.show();
var cls = '.' + $i.map(function () {
return this.className;
}).get().join(',.');
if(cls.indexOf(",") > -1){
var array = cls.split(",");
$.each(array,function(i){
$rows.hide().filter(function () {
return $('td', this).filter(function () {//console.log(this);
var content = this.textContent,
inputVal = $i.filter(array[i]).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length == len;
}).show();
});
}else{
$rows.hide().filter(function () {
return $('td', this).filter(function () {
var content = this.textContent,
inputVal = $i.filter(cls).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
}
});
});

A little calculation

With this code, how do I put multiplication * to make #ttc = #totalcout * #marge
When I click on the checkboxes, I manage to make the additions, but I can not integrate the multiplication to do the TTC
// Addition when click checkbox
$("input[type=checkbox]").click(function(e) {
var total = 0;
$("input[type=checkbox]:checked").each(function() {
total += parseFloat($(this).val());
});
if (total == 0) {
$("#totalcout").html(0);
} else {
$("#totalcout").html(total + ' €');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Coût HT</th>
<th>Marge</th>
<th>Prix TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<p id="totalcout"></p>
</td>
<td align="center">
<p id="marge">5</p>
</td>
<td align="center">
<p id="ttc"></p>
</td>
</tr>
</tbody>
</table>
After you have calculated your new total, multiple that times marge and update #ttc with that newly calculated value.
// Addition when click checkbox
$("input[type=checkbox]").click(function(e) {
var total = 0;
$("input[type=checkbox]:checked").each(function() {
total += parseFloat($(this).val());
});
if (total == 0) {
$("#totalcout").html(0);
} else {
$("#totalcout").html(total + ' €');
}
// Now that you've recalculated the total, multiply that times 'marge' and insert that into '#ttc'
const marge = parseFloat($("#marge").html());
$("#ttc").html(parseFloat(total) * marge + ' €');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value=5>5</input>
<input type="checkbox" value=10>10</input>
<table class="table table-bordered">
<thead>
<tr>
<th>Coût HT</th>
<th>Marge</th>
<th>Prix TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<p id="totalcout"></p>
</td>
<td align="center">
<p id="marge">5</p>
</td>
<td align="center">
<p id="ttc"></p>
</td>
</tr>
</tbody>
</table>

Categories