Filter by column using checkboxes - javascript

I would like to be able to filter my table of data with the use of checkboxes.
#{
var schools = CurrentPage.Children.OrderBy("kommun");
}
<dl class="dropdown">
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Linköping" />Linköping
</li>
<li>
<input type="checkbox" value="Norrköping" />Norrköping
</li>
<li>
<input type="checkbox" value="Mjölby" />Mjölby
</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
<div id="no-more-tables" class="sorttable">
<table>
<thead>
<tr>
<th style="width: 15%;" data-sort-initial="true">
Kommun
</th>
<th style="width: 20%;">
Skola
</th>
<th style="width: 15%;">
Datum
</th>
<th style="width: 15%;" data-sort-ignore="true">
Tid
</th>
<th style="width: 20%;" data-sort-ignore="true">
Adress
</th>
<th style="width: 15%;" data-sort-ignore="true">
Övrigt
</th>
</tr>
</thead>
<tbody>
#foreach (var school in schools)
{
var times = school.Children.Where("date > DateTime.Now.Date").OrderBy("date");
foreach (var time in times)
{
<tr>
<td data-title="Kommun">
#if (!string.IsNullOrEmpty(school.kommun))
{
#school.kommun
}
else
{
<text> </text>
}
</td>
<td data-title="Skola">
#if (!string.IsNullOrEmpty(school.Name))
{
#school.Name
}
else
{
<text> </text>
}
</td>
<td data-title="Datum">
#if (time.date != null)
{
#time.date.ToString("yyyy-MM-dd")
}
else
{
<text> </text>
}
</td>
<td data-title="Tid">
#if (!string.IsNullOrEmpty(time.time))
{
#time.time
}
else
{
<text> </text>
}
</td>
<td data-title="Adress">
#if (!string.IsNullOrEmpty(school.adress))
{
#school.adress
}
else
{
<text> </text>
}
</td>
<td data-title="Övrigt">
#if (!string.IsNullOrEmpty(school.oevrigt.ToString()))
{
#school.oevrigt
}
else
{
<text> </text>
}
</td>
</tr>
}
}
</tbody>
</table>
Where do I go from here? I've never worked with filters before but I'm assuming I have to check the value from the filter with the table of data. I also know I need JavaScript too because I don't want the page to reload every time the user picks a filter.
I would appreciate any help

Using just javascript
/* Demo filtering table using checkboxes. Filters against first td value */ /* Demo filtering table using checkboxes. Filters against first td value */
/* Set 'ready' handler' */
document.addEventListener('DOMContentLoaded', initFunc);
/* When document ready, set click handlers for the filter boxes */
function initFunc(event) {
var filters = document.getElementsByName('tablefilter');
for (var i = 0; i < filters.length; i++) {
filters[i].addEventListener('click', buildAndExecFilter);
}
}
/*
This function gets called when clicking on table filter checkboxes.
It builds a list of selected values and then filters the table based on that
*/
function buildAndExecFilter() {
var show = [];
var filters = document.getElementsByName('tablefilter');
for (var i = 0; i < filters.length; i++) {
if (filters[i].checked) {
show.push(filters[i].value);
}
}
execFilter(show); // Filter based on selected values
}
function execFilter(show) {
/* For all rows of table, see if td 0 contains a selected value to filter */
var rows = document.getElementById('tablebody').getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var display = ""; // Default to display
// If it is not found in the selected filter values, don't show it
if (show.indexOf(rows[i].children[0].textContent) === -1) {
display = "none";
}
// Update the display accordingly
rows[i].style.display = display;
}
}
<input name='tablefilter' type='checkbox' value='1' id='tablefilter1' checked/>
<label for='tablefilter1'>1</label>
<input name='tablefilter' type='checkbox' value='2' id='tablefilter2' checked/>
<label for='tablefilter2'>2</label>
<input name='tablefilter' type='checkbox' value='3' id='tablefilter3' checked/>
<label for='tablefilter3'>3</label>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody id='tablebody'>
<tr>
<td>1</td>
<td>One</td>
<td>First</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
<td>Second</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
<td>Third</td>
</tr>
</tbody>
</table>

Related

AngularJs - Populate the tables by checking header names

I have two objects one contains selected records and another contains selected fields. Now I need to populate the table dynamically by checking the column header name or value.
I referred Populate table with ng-repeat and check matching header data
Completed:
I able to add the headers dynamically to the table/columns.
Working code is in Plunker
HTML
<table class="dataTable no-footer leadTable">
<thead>
<tr role="row">
<th>
<input type="checkbox" ng-model="selectedSObject[key]" class="select_tertiary_selectAll" />
</th>
<th ng-repeat="k in sFields[key]" ng-value="{{k.name}}" style="font-weight: 400; border-right: none; background-color: #0070d2; padding: 10px 18px;">
<div> {{k.label}} </div>
</th>
</tr>
</thead>
<tbody>
<tr role="row" ng-class="odd" ng-repeat="record in value.filtered">
<td>
<input type="checkbox" ng-model="record.checked" />
</td>
<td ng-repeat="(key_1, value_1) in record" style="padding: 10px 18px;">
<div> {{value_1}} </div>
</td>
</tr>
</tbody>
</table>
JS
$scope.sFields = getSFields($scope.sObjectCSVData);
$scope.iterableRecords = getiterableRecords($scope.sObjectCSVData, allRecords)
function getiterableRecords(sCSVData, allRecords) {
var sObjectRecords = {};
if (allRecords) {
Object.entries(sCSVData).forEach(function(key) {
if (sCSVData[key[0]].filtered.length != 0) {
if (sObjectRecords[key[0]]) {
sObjectRecords[key[0]].push(sCSVData[key[0]].filtered)
} else {
sObjectRecords[key[0]] = []
sObjectRecords[key[0]].push(sCSVData[key[0]].filtered)
}
}
});
}
return sObjectRecords
}
function getSFields(sCSVData) {
var fields = {};
Object.entries(sCSVData).forEach(function(key) {
if (sCSVData[key[0]].filtered.length != 0) {
for (var i = 0; i < sCSVData[key[0]].sObjectFields.length; i++) {
if (fields[key[0]]) {
fields[key[0]].push(sCSVData[key[0]].sObjectFields[i])
} else {
fields[key[0]] = []
fields[key[0]].push(sCSVData[key[0]].sObjectFields[i])
}
}
}
});
return fields
}
Need to do:
Now I have to populate the table with the respective values by checking the column name.
I'm working in AngularJS 1.6.9
By adding small changes, Now I can able to populate the table,
The code I followed is as below,
<tbody>
<tr role="row" ng-class="odd" ng-repeat="record in value[0]">
<td>
<input type="checkbox" ng-model="record.checked" />
</td>
<td ng-repeat="k in sFields[key]" style="padding: 10px 18px;">
{{record [k.name]}} </div>
</td>
</tr>
The working code is in the below mentioned plunker,
Populate the table by checking the header name
For ref.

How to filter JS table using multiple inputs

I am writing c# application . I have to filter Js table using multiple inputs. When i type something into only one input it works fine, but if I want to search table for example by "Service Price" and "Parts Price" it finds nothing.
<form id="search-repairs">
<p>
Service Price : <input type="text" id="searchServicePrice" class="searchInput" onkeyup="searchingEngine(3)" />
Parts Price : <input type="text" id="searchPartsPrice" class="searchInput" onkeyup="searchingEngine(2)" />
Summary Price : <input type="text" id="searchBySumPrice" class="searchInput" onkeyup="searchingEngine(5)" />
Date : <input type="text" id="searchDate" class="searchInput" onkeyup="searchingEngine(0)" />
</p>
</form>
<table id="table" class="table table-striped table-hover">
<thead>
<tr>
<th>
Date
</th>
<th>
Description
</th>
<th>
PartsPrice
</th>
<th>
Price
</th>
<th>
ServicerId
</th>
<th>
summaryPrice
</th>
</tr>
</thead>
<tbody id="searchBody">
#foreach (var item in Model)
{
var price = item.Price;
var partsPrice = item.PartsPrice;
var sum = price + partsPrice;
<tr>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.PartsPrice)
</td>
<td name="price">
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
#Html.DisplayFor(modelItem => item.ServicerId)
</td>
<td>
#Html.DisplayFor(modelItem => sum);
</td>
</tr>
}
</tbody>
</table>
And here is my code to filter this table. It is plain javascript code. I think there is something wrong in filter variable. I have tried a lot of different solutions but it didn't want to work in any case.
function searchingEngine(col) {
var table, trs, searchByPrice, searchByPartsPrice, searchByDate, searchBySumPrice, filter, i, td;
table = document.getElementById("table");
trs = table.getElementsByTagName("tr");
searchByPrice = document.forms['search-repairs'].querySelector("#searchServicePrice");
searchByPartsPrice = document.forms['search-repairs'].querySelector("#searchPartsPrice");
searchByDate = document.forms['search-repairs'].querySelector("#searchDate");
searchBySumPrice = document.forms['search-repairs'].querySelector("#searchBySumPrice");
filter = searchByPrice.value.toUpperCase() || searchByPartsPrice.value.toUpperCase() ||
searchByDate.value.toUpperCase() || searchBySumPrice.value.toUpperCase();
for (i = 0; i < trs.length; i++) {
td = trs[i].getElementsByTagName("td")[col];
if (td) {
if (td.textContent.toUpperCase().indexOf(filter) > -1) {
trs[i].style.display = "";
} else {
trs[i].style.display = "none";
}
}
}
}

Store Table Row Selections Across Multiple Pages

I have a search results table with a checkbox allowing users to select 1 or more rows - this is working fine on a single page at the moment. However I have to use pagination to limit the results to 20 rows per page, so once the user clicks the Next Page button to go to the 2nd page of search results their selections are lost.
Is there a way to keep their selections from page to page?
Here's an example of how the table appears with the script that sets a hidden form input:
$(function() {
//column checkbox select all or cancel
$("input.select-all").click(function() {
var checked = this.checked;
$("input.select-item").each(function(index, item) {
item.checked = checked;
});
// update the hidden input with the selected selectedProductIDs
var items = [];
$("input.select-item:checked:checked").each(function(index, item) {
items[index] = item.value;
});
if (items.length < 1) {
$('#selectedProductIDs').val('');
} else {
var values = items.join(',');
$('#selectedProductIDs').val(values);
}
});
//check selected items
$("input.select-item").click(function() {
var checked = this.checked;
console.log(checked);
checkSelected();
// update the hidden input with the selected assetIDs
var items = [];
$("input.select-item:checked:checked").each(function(index, item) {
items[index] = item.value;
});
if (items.length < 1) {
$('#selectedProductIDs').val('');
} else {
var values = items.join(',');
$('#selectedProductIDs').val(values);
}
});
//check is all selected
function checkSelected() {
var all = $("input.select-all")[0];
var total = $("input.select-item").length;
var len = $("input.select-item:checked:checked").length;
console.log("total:" + total);
console.log("len:" + len);
all.checked = len === total;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<table class="table table-condensed table-striped table-bordered">
<thead>
<th><input type="checkbox" class="select-all checkbox" name="select-all" /></th>
<th class="text-center" scope="col">Product ID</th>
<th class="text-center" scope="col">Description</th>
</thead>
<tbody>
<tr class="" id="85799">
<td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td>
<td>12345</td>
<td>Apples</td>
<td></td>
</tr>
<tr class="" id="85800">
<td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td>
<td>67890</td>
<td>Bananas</td>
<td></td>
</tr>
<tr class="" id="85801">
<td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td>
<td>55441</td>
<td>Oranges</td>
<td></td>
</tr>
</tbody>
</table>
<form class="form-horizontal" id="processSelections" action="processSelections.php" method="post" role="form">
<input type="hidden" name="selectedProductIDs" id="selectedProductIDs" value="">
<div>
<div class="text-center">
<button type="submit" name="buttonType" value="createShipments" id="save" class="btn btn-success">Process Selections</button>
</div>
</div>
</form>
I ended up having the AJAX script call a PHP page which updated a $_SESSION variable with the selected items so this would persist from page to page.

filter table rows not working

I've have a html table where I'm trying to filter by keeping the rows that match on the text written. But whatever I write in my textbox the first row is always removed..
JS:
$("#searchInput").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
jo.show();
return;
}
//hide all the rows
jo.hide();
//Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
//show the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
Table:
<input id="searchInput" value="Type To Filter">
<br/>
<table class="mGrid" id="table">
<tr>
<th>
COLUMN1
</th>
<th>
COLUMN2
</th>
<th>
COLUMN3
</th>
</tr>
<tbody ID="fbody">
<tr>
<td>
NAME1
</td>
<td>
3
</td>
<td>
HOUSE
</td>
</tr>
<tr>
<td>
NAME2
</td>
<td>
5
</td>
<td>
LAKE
</td>
</tr>
<tr>
<td>
NAME3
</td>
<td>
7
</td>
<td>
DOG
</td>
</tr>
<tr>
<td>
NAME555
</td>
<td>
1337
</td>
<td>
CAT
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/ukW2C/1350/
Problem was with the HTML. I had multiple IDs. Query is now updated and working

Show hidden rows in table with dropdown

I have something that seems fairly simple but I'm stumped. I want a dropdown within a table that affects how many table rows are shown. By default, only 2 rows are shown. By selecting 4 in the dropdown, 4 rows should be shown. I am only seeing one of the hidden rows show up, and I've tried to wrap the 2 rows in a hidden div as well, no luck. Ideas?
<table border="1">
<tr>
<td class="noBG" colspan="3">
<select id="displayText" onchange="javascript:toggle();">
<option>2</option>
<option>4</option>
</select>Items
</td>
</tr>
<thead>
<tr>
<th>Dates</th>
<th>Time</th>
<th>Person</th>
</tr>
</thead>
<tr>
<td>12/3</td>
<td>12:45</td>
<td>John Doe</td>
</tr>
<tr>
<td>12/4</td>
<td>12:45</td>
<td>James Doe</td>
</tr>
<tr id="toggleText" style="display: none">
<td>12/4</td>
<td>12:45</td>
<td>Janey Doe</td>
</tr>
<tr id="toggleText" style="display: none">
<td>12/4</td>
<td>12:45</td>
<td>Janey Doe</td>
</tr>
</table>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
​
Using display: block; doesn't work as the table rows will then displayed not in the right way. But you can toggle the visibility by adding and removing a class, which is defined with display: none;. So you must not switch display: none/block;, but the class.
This works (incl. jQuery): http://jsfiddle.net/Yuvvc/1/
You can use following code for JS function:
function toggle() {
$.each($('tr[name=toggleText]'), function() {
$(this).toggleClass("hiddenRow", $(this).attr('class') != "hiddenRow");
});
}
With the second parameter (bool) for .toggleClass you can add and remove the class.
EDIT
Here a non-jQuery version:
function toggle() {
var rows = document.getElementsByName("toggleText");
for(var i=0; i<rows.length; i++)
{
rows[i].className = (rows[i].className == "hiddenRow") ? "" : "hiddenRow";
}
}
Change all <tr id="toggleText" to <tr name="toggleText", and then change the toggle function to the following:
function toggle() {
var ele = document.getElementsByName("toggleText");
for (var i = 0; i < ele.length; i++) {
if (ele[i].style.display == "block") {
ele[i].style.display = "none";
}
else {
ele[i].style.display = "block";
}
}
}
You can toggle the hidden rows by giving each row an id like this:
<table class="table">
#foreach (var item in Model)
{
<tr>
<td onclick="toggle1(#item.ID)" colspan="3">
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
<tr class="hidden" id="bluh_#item.ID">
<td>
#Html.DisplayFor(modelItem => item.Code)
</td>
<td>
#Html.DisplayFor(modelItem => item.Position)
</td>
</tr>
}
then use JavaScript to Hide and Show the Children Rows
<script>
function toggle1(something) {
$("#bluh_"+something).toggleClass('hidden');
}
</script>

Categories