AngularJs - Populate the tables by checking header names - javascript

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.

Related

Angular table with 4 columns different items

I was busy making a table with Angular, one row has to look like this:
The problem is i get the same products in one row or only one column in a row. Look:
export class ProductsComponent implements OnInit {
input_product: string;
products = ['kaas', ' prei', 'loempia', 'wcpapier', 'bananen', 'nootjes'];
// products = [];
onClick_addProduct() {
this.input_product = (<HTMLInputElement>document.getElementById('input_product')).value;
this.products.push(this.input_product);
}
constructor() { }
ngOnInit() {
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table class="table table-sm table-dark">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products" >
<td >{{product}}</td>
<td >{{product}}</td>
<td >{{product}}</td>
<td >{{product}}</td>
</tr>
</tbody>
</table>
I tried this: Display a Table using Components with Angular 4
but i got problems with the last part: (app-table-row
[character]="ch"
[columns]="columns")
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table>
<tr>
<th *ngFor="let c of columns">{{c}}</th>
</tr>
<tr *ngFor="let ch of characters | async"
app-table-row
[character]="ch"
[columns]="columns">
</tr>
</table>
I think it's a convention error, but I'm not sure...
Is there a easy way to show the products in 4 columns? Because i can't seem to find how to list the products with an index. :(
Id recommend using divs instead of a table, this is not tabular data.
Try this:
<div class="product" *ngFor="let prod of products">
{{prod}}
</div>
And in the CSS:
.product {
width: 25%;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
}
Here is a StackBlitz example
I made a change to the data (Actual objects)
https://stackblitz.com/edit/angular-gwbc2q
Products now looks like this:
products = [{name:"tire1", line:"impressive"},{name:"brand X", line: "economy plus"},
{name:"hard plasticos",line:"urban destroyer"},{name:"happy ride", line:"smooth and sticky"}]
And in Angular:
*ngFor is just a foreach loop: So foreach product in products make a row looks like:
<tr *ngFor="let product of products" >
<td >{{product.line}}</td>
<td >{{product.name}}</td>
</tr>

Table disappears after adding an item

i'm using datatables to display a list of project names and I'm using a button to add an item to the displayed array, but when i do so, my table disappears.
Here's the code:
view.html
<button ng-click="vm.add()">Add item</button>
<table datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs"
class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr style="background-color: #00b3ee; color: white; border:none">
<th style="text-align: center">Nom</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in vm.project.projects">
<td style="width: 90%; vertical-align: middle">{{project}}</td>
<td align="center" style="vertical-align: middle">
<button data-toggle="modal" ng-click="vm.setProject(project)"
data-target="#deleteEureciaProjectModal" type="button" class="btn btn-danger">
<i class="fa fa-trash"> </i>Supprimer
</button>
</td>
</tr>
</tbody>
</table>
controller.js
vm.add = () => vm.project.projects.push('new project');
fetchProject().then(result => {
vm.project = result;
// vm.project = {
// projects: [
// "project1",
// "project2",
// "project3",
// "project4"
// ],
// etc...
// }
vm.project.projects.push("newProject"); //it's working here, which is normal
//init datatable
vm.dtInstance = {};
vm.dtOptions = DTOptionsBuilder.newOptions()
.withBootstrap();
vm.dtColumnDefs = [];
for (var i = 0; i < 2; i++) {
if (i == 1) {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
} else {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i));
}
}
})
I've tried using objects instead of strings.. doesn't work either. I don't know what's going on.
I cannot use server side processing. This has to be done using the angular way.
Ok, so i found it :
For some reason, it worked when i initialized vm.project.project before the promise call. So i created the vm.project object, and i added the project property to it by adding an empty array. I was then able to add items without having my table disappearing.

JavaScript Search Table by Index

I have a table with multiple columns (for this question I only made two columns) and I want the user to be able to search through a column by the index depending on an option that the user can select. I have working code, but in order to change the search option, I had to copy the function for each input.
How can I search by the index? If a user selects an option like (name), then the javascript function will change the index that it is searching to [0]. if the user selects (location), the function will change the index to [1] and search through that column.
Is this possible? Any help would be appreciated.
const searchName = document.getElementById('searchName');
const searchLoc = document.getElementById('searchLoc');
custSelect.addEventListener('click', () => {
if (custSelect.value == 'custname') {
searchName.style.display = 'block';
searchLoc.style.display = 'none';
} else {
searchName.style.display = 'none';
searchLoc.style.display = 'block';
}
});
// Search for customer, or search for location, index will change based on option selected.
function tableSearch(id, index) {
// Declare variables
var filter, input, table, tr, td, i;
input = document.getElementById(id);
filter = input.value.toUpperCase();
table = document.getElementById(id);
tr = table.getElementsByTagName('tr');
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0]; // index will change based on option selected.
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="custDiv">
<div class="addBtns">
<input id="searchName" onkeyup="tableSearch('searchName','custList'[0])" type="text" placeholder="search name" />
<!-- this searches through the first index or [0] -->
<input id="searchLoc" onkeyup="tableSearch('searchLoc','custList'[1])" style="display: none;" type="text" placeholder="search location" />
<!-- this searches through the second index or [1] -->
<div id="custSelectDiv" style="width: 175px; height: 35px; max-height: 35px; margin: 0 auto;">
<select id="custSelect" style="position: absolute;">
<option value="custname">name</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through -->
<option value="location">location</option> <!-- if user selects this, the corresponding input is displayed, which changes the index to search through -->
</select>
</div>
</div>
<table id="custListTop" contenteditable="false">
<tr>
<td style="border-top-left-radius: 5px;">Customers</td>
<td style="border-top-right-radius: 5px;">Main Location</td>
</tr>
</table>
<table id="custList" contenteditable="true">
<tr>
<td>josh</td>
<td>hawkins</td>
</tr>
<tr>
<td>hanna</td>
<td>big sandy</td>
</tr>
<tr>
<td>bonne</td>
<td>big sandy</td>
</tr>
<tr>
<td>thomas</td>
<td>big sandy</td>
</tr>
</table>
</div>
<script src="test.js"></script>
</body>
</html>
This should get you on track
var table = document.getElementById('tab'),
col = document.getElementById('col'),
val = document.getElementById('val');
col.max = table.rows[0].cells.length - 1;
function search() {
var regex = new RegExp(val.value || '', 'i');
for (var i = table.rows.length; i-- > 1;) {
if (regex.test(table.rows[i].cells[+col.value].innerHTML)) {
table.rows[i].style.display = 'table-row';
} else
table.rows[i].style.display = 'none';
}
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid;
}
<label for="col">Column :</label>
<input type="number" id="col" placeholder="column" onkeyup="search()" min="0" step="1" />
<br>
<label for="val">Find :</label>
<input type="text" id="val" placeholder="cell" onkeyup="search()" />
<table id="tab">
<tr>
<th>Customers</th>
<th>Main Location</th>
</tr>
<tr>
<td>josh</td>
<td>hawkins</td>
</tr>
<tr>
<td>hanna</td>
<td>big sandy</td>
</tr>
<tr>
<td>bonne</td>
<td>big sandy</td>
</tr>
<tr>
<td>thomas</td>
<td>big sandy</td>
</tr>
</table>
I think they are two simplier ways to do that research :
Use an object array to search what you need, reorganize it at each research and re-make your html table each time the table changes.
Or use dataTable, which is a very simple tool to sort table.

ng-table: How to use multiselect on different pages

I am using ng-table example from this page:
http://4dev.tech/2015/08/tutorial-basic-datatable-sorting-filtering-and-pagination-with-angularjs-and-ng-table/
Also I added selection method with ng-click method
<table ng-table="usersTable" id="productTable" class="table table-striped">
<tr>
<th ng-repeat="column in cols">{{column}}</th>
<th> Adet</th>
</tr>
<tr ng-repeat="row in data | filter: src_product">
#*<td ng-class="{ 'highlighted':row[column].isSelected }" ng-click ="selectCell(row[column])" ng-repeat="column in cols "> {{row[column]}} </td>*#
<td ng-class="{'highlighted':isSelected =='true'}" ng-model="product_field" ng-click="selectCell(this)" ng-repeat="column in cols ">{{row[column]}}</td>
<td><input class="input-group" type="text" style="width: 100%; height: 30px !important" name=" adet" value="0"></td>
</tr>
</table>
$scope.selectCell = function(cell) {
var selectedCellindex = (cell.$index) + (cell.$parent.$index) * ($scope.cols.length + 1);
var selectedCell = document.getElementsByTagName("td")[selectedCellindex];
if (selectedCell.getAttribute("class") === null) {
selectedCell.setAttribute("class", "highlighted");
} else {
selectedCell.removeAttribute("class");
}
}
The problem is that it only selects cells on current visible page. How can i solve this problem or store selected cells ?

Filter by column using checkboxes

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>

Categories