I use datatable
A typical row is
<tr>
<td data-id="1">Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
I created an example
http://jsfiddle.net/hb7v1mgy/
Init of the table
var table = $('#example').DataTable({
responsive: true
});
When I click on a row, I would like to get data attritube id, actually I get column value (Tiger, System...)
$('#example tbody').on('click', 'tr', function() {
//get only value of td... not data attribute
var data = table.row(this).data();
});
In your click method
var tr = $(this).closest('tr');
var id = tr.children("td:eq(0)").attr('data-id')
you don't need select plugin...
Related
Hi the Im trying to get data from an api, I already deserialized the json,
But when I try to get the data in visualforce just shows me 1 value, and I dont get it, I ve been reading the documentation but still I have errors
Can anyone help me to understand what is wrong?
this is the response of my class
HTTPResponse response = h.send(request);
Map<String,object> results = new Map<String,object>();
List<Object> listResponse = new List<Object>();
Map<String,object> MapeoNombre = new Map<String,object>();
List<String> Nombre = new List<String>();
Integer counter = 0;
Integer num = 0;
Integer i = 1;
// Parse the JSON response
if(response.getStatusCode() == 200) {
results = (Map<String,object>)JSON.deserializeUntyped(response.getBody());
Map<String, Object> body = (Map<String, Object>)results.get('body');
listResponse = (List<Object>) body.get('asegurados');
num = listResponse.size();
System.debug('list:'+listResponse);
} else {
System.debug('The status code returned was not expected: ' + response.getStatusCode() + ' ' + response.getStatus());
}
for (Object asegurado:listResponse ){
if(counter<num){
MapeoNombre =(Map<String, Object>)asegurado;
Nombre.add((String)MapeoNombre.get('nombreAsegurado'));
i++;
}
itemName =(string)MapeoNombre.get('nombreAsegurado');
itemLastName =(string)MapeoNombre.get('apellidoPaterno');
itemSecondLastName =(string)MapeoNombre.get('apellidoMaterno');
itemRamo =(string)MapeoNombre.get('ramo');
itemPoliza =(string)MapeoNombre.get('poliza');
System.debug('nombre'+itemName);
System.debug('apellida paterno'+itemLastName);
System.debug('apellido materno'+itemSecondLastName);
System.debug('poliza'+itemPoliza);
}
and this is my visualforce
<apex:form >
<apex:inputText value="{!ramopoliza}"/>
<apex:pageBlock >
<apex:commandButton reRender="table1" value="Buscar" action="{!busqueda}"/>
</apex:pageBlock>
<apex:pageBlock id="table1">
<div class="painel">
<h1>MANCHA</h1>
<table>
<tr>
<th colspan="1" class="celula_em_branco"></th>
<th colspan="4" class="celula_azul_escuro">MANAGED SERVICES</th>
</tr>
<tr>
<td class="cor_cinza td_column">Nombre</td>
<td class="cor_cinza td_column">Apellido Paterno</td>
<td class="cor_cinza td_column">Apellido materno</td>
<td class="cor_cinza td_column">Ramo</td>
<td class="cor_cinza td_column">Poliza</td>
</tr>
<tr>
<td class="celula_azul_escuro">{!itemName}</td>
<td class="cor_azul">{!itemLastName}</td>
<td class="cor_azul">{!itemSecondLastName}</td>
<td class="cor_azul">{!itemRamo}</td>
<td class="cor_azul">{!itemPoliza}</td>
</tr>
<tr>
<td class="celula_azul_escuro">{!itemName}</td>
<td class="cor_azul">{!itemLastName}</td>
<td class="cor_azul">{!itemSecondLastName}</td>
<td class="cor_azul">{!itemRamo}</td>
<td class="cor_azul">{!miprueba}</td>
</tr>
</table>
</div>
<apex:pageblockTable value="{!Nombre}" var="f">
<apex:column value="{!f}"><apex:facet name="header">Object Names</apex:facet></apex:column>
</apex:pageblockTable>
</apex:form>
and this is the Json sample
"code": 1,
"message": "SUCCESS",
"date": "15/07/2022 23:57:00",
"body": {
"asegurados": [
{
"ramo": "37",
"poliza": "0000003101",
"endosoQueModifica": "000000",
"consecutivo": "00000001",
"iniciovigencia": "01/04/2022",
"finVigencia": "01/04/2023",
"nombreAsegurado": "MARCO ANTONIO",
"apellidoPaterno": "MARQUEZ",
"apellidoMaterno": "SOTELO",
"descripcionRamo": "SALUD INDIVIDUAL",
"dependiente": "01 TITULAR",
"fechaNacimiento": "14/08/1992",
"numCertificado": "00000001",
"numDeIncisoEnElCertificado": "00000001"
},
{
"ramo": "37",
"poliza": "0000003101",
"endosoQueModifica": "100002",
"consecutivo": "00000002",
"iniciovigencia": "20/04/2022",
"finVigencia": "01/04/2023",
"nombreAsegurado": "SAYRA FABIOLA",
"apellidoPaterno": "ORDUNO",
"apellidoMaterno": "ELIZONDO",
"descripcionRamo": "SALUD INDIVIDUAL",
"dependiente": "D DEPENDIENTE",
"fechaNacimiento": "22/10/1966",
"numCertificado": "00000001",
"numDeIncisoEnElCertificado": "00000002"
}
]
}
}
asegurados is a list
I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.
I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)
There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|
Here is a basic filter example http://jsfiddle.net/urf6P/3/
It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.
EDITED to include the HTML and javascript from the jsfiddle:
$(function() {
$('#filter1').change(function() {
$("#table td.col1:contains('" + $(this).val() + "')").parent().show();
$("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
});
});
Slightly enhancing the accepted solution posted by Jeff Treuting, filtering capability can be extended to make it case insensitive. I take no credit for the original solution or even the enhancement. The idea of enhancement was lifted from a solution posted on a different SO post offered by Highway of Life.
Here it goes:
// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
return $(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
// Now perform the filtering as suggested by #jeff
$(function() {
$('#filter1').on('keyup', function() { // changed 'change' event to 'keyup'. Add a delay if you prefer
$("#table td.col1:icontains('" + $(this).val() + "')").parent().show(); // Use our new selector icontains
$("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide(); // Use our new selector icontains
});
});
This may not be the best way to do it, and I'm not sure about the performance, but an option would be to tag each column (in each row) with an id starting with a column identifier and then a unique number like a record identifier.
For example, if you had a column Produce Name, and the record ID was 763, I would do something like the following:
<table id="table1">
<thead>
<tr>
<th>Artist</th>
<th>Album</th>
<th>Genre</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td id="artist-127">Red Hot Chili Peppers</td>
<td id="album-195">Californication</td>
<td id="genre-1">Rock</td>
<td id="price-195">$8.99</td>
</tr>
<tr>
<td id="artist-59">Santana</td>
<td id="album-198">Santana Live</td>
<td id="genre-1">Rock</td>
<td id="price-198">$8.99</td>
</tr>
<tr>
<td id="artist-120">Pink Floyd</td>
<td id="album-183">Dark Side Of The Moon</td>
<td id="genre-1">Rock</td>
<td id="price-183">$8.99</td>
</tr>
</tbody>
</table>
You could then use jQuery to filter based on the start of the id.
For example, if you wanted to filter by the Artist column:
var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
if (!regex.test(this.innerHTML)) {
this.parentNode.style.backgroundColor = '#ff0000';
}
});
You can filter specific column by just adding children[column number] to JQuery filter. Normally, JQuery looks for the keyword from all the columns in every row. If we wanted to filter only ColumnB on below table, we need to add childern[1] to filter as in the script below. IndexOf value -1 means search couldn't match. Anything above -1 will make the whole row visible.
ColumnA | ColumnB | ColumnC
John Doe 1968
Jane Doe 1975
Mike Nike 1990
$("#myInput").on("change", function () {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function () {
$(this).toggle($(this.children[1]).text().toLowerCase().indexOf(value) > -1)
});
});
step:1 write the following in .html file
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
step:2 write the following in .js file
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
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];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
I have the following dynamic Angular material 6 tables.
<table mat-table [dataSource]="animalDataSource" matSort *ngIf="animal && animal.length > 0">
<ng-container *ngFor="let disCol of animalColumns;" matColumnDef="{{disCol}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header >{{disCol}}</th>
<td mat-cell *matCellDef="let rowValue;">{{rowValue[disCol]}}
<button *ngIf="disCol == 'Action'" mat-mini-fab class="delete-icon" (click)="deleteAnimalData(rowValue)">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="animalColumns"></tr>
<tr mat-row *matRowDef="let rowdata; columns: animalColumns;"></tr>
</table>
And here's my script:
this.animals = [];
this.animalColumns = [];
for (var i in animalList) {
this.animal = {
"Id": animalList[i]["_id"],
"Animal": animalList[i].name,
"Created By": animalList[i].createdBy,
"Created On": new Date(animalList[i].dateOfEntry)
}
this.animals.push(this.animal);
}
this.animalDataSource = new MatTableDataSource(this.animals);
for (let displayColName in this.animals[0]) {
this.animalColumns.push(displayColName);
}
this.animalColumns.push("Action");
There are 4 columns in the table. And I don't need the 'Id' column to be displayed in the table. I have tried giving *ngIf and [style.display]='none'. Both are hiding the column with the full-length gap between the columns.
I could have removed the 'Id' field from the object, but I need the value of the 'Id' column when the user clicks on the delete button[method: deleteAnimalData(rowValue)].
Please suggest me, without removing the 'ID' key from the object, how I can hide the column.
The way I was able to make it work is by having an array of objects(say animalObjects) that define all the table columns building the template.
Once they are all defined I have another array that has the name of the columns (animalColumns) to be displayed.
When you need to hide a column then you can remove the item from the 2nd array (animalColumns) while leaving the first (animalObjects) untouched.
You basically have to create the table with all the columns, then update the displaycolumn property with the modified animalColumn array.
stackblitz example here
Just do NOT add the ID to animalColumns, as this array is what defines your columns. See columns: animalColumns in your HTML
<table>
<thead>
<th>name</th>
<th>place</th>
<th>area</th>
</thead>
<tbody>
<tr><td>name</td><td>jjhds</td><td>dfdsf</td></tr>
<tr><td>name</td><td>jjhds</td><td>dfdsf</td></tr>
<tr><td>name</td><td>jjhds</td><td>dfdsf</td></tr>
<tr><td>name</td><td>jjhds</td><td>dfdsf</td></tr>
<tr><td>name</td><td>jjhds</td><td>dfdsf</td></tr>
</tbody>
</table>
I have above table. I need to navigate from td in tbody and get its heading in thead****th through protractor. Please can anyone help?
One option would be to get the desired header by an index of a column in a row, sample:
var table = $('table'); // TODO: too general of a locator, improve
var headers = table.$$('th');
table.$$('tr').each(function (row) {
row.$$('td').each(function (cell, index) {
cell.getText().then(function (cellText) {
headers.get(index).getText().then(function (headerText) {
console.log("Header: " + headerText + ", Cell Value: " + cellText);
});
});
});
});
Using .each() here just for demonstration purposes.
I need to find relation between original columns indexes and columns indexes after sorting in datatables .
say we have an ordinary html table :
<table id="namesTable">
<thead>
<th>First Name</th>
<th>Last Name</th>
</thead>
<tbody>
<tr>
<td>Jim</td>
<td>Andrew</td>
</tr>
<tr>
<td>Pedro</td>
<td>Rodriguez</td>
</tr>
<tr>
<td>Manau</td>
<td>Lara</td>
</tr>
</tbody>
</table>
after calling :
$('#namesTable').DataTable(
'order' : [[0 , 'Desc']]
);
is there any way to have like a dictionnary that says that index 0 is now2 and 1 is now 0 and 2 is now 1 after ordering ?
any help is welcome !
dataTables row().index() or rows().indexes() returns the original index, eg how the rows are ordered in the underlying HTML. To get the row index from the example above :
$('#namesTable tbody').on('click', 'tr', function () {
alert(table.row(this).index());
});
demo -> http://jsfiddle.net/d6tcLtha/