I am using a javascript template to display the results coming from a search query.
Currently
<script id="collection-template" type="text/html"> <div
class="partners__item"> <%=CustomerName%>,<%=CustomerType%> </div>
</div> </script> <div id="collection"></div>
gives me the results with comma in between. This script loops as many times as records.
If I want to use a table to present the search results, i am adding table content in the looping section, which generates separate tables with individual headings.
<script id="collection-template" type="text/html">
<div class="partners__item">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<tr>
<div class="row">
<td><%=CustomerName%></td><td><%=CustomerType%></td>
</div>
</tr>
</tbody>
</table>
</div>
</script>
<div id="collection"></div>
I tried to move the thead section out of the loop, then the table structure goes away.
As a structure I want to be able to build something like this:
<Table><thead></thead>
<script>
<tr><td></td></tr>
</script>
</Table>
Any suggestion is much appreciated.
The template I am using is from filter.js
function _renderHTML(str, data) {
var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
'with(obj||{}){__p.push(\'' +
.replace(/'/g, "\\'")
.replace(/<%-([\s\S]+?)%>/g, function(match, code) {
return "',escapeStr(" + code.replace(/\\'/g, "'") + "),'";
})
.replace(/<%=([\s\S]+?)%>/g, function(match, code) {
return "'," + code.replace(/\\'/g, "'") + ",'";
})
.replace(/<%([\s\S]+?)%>/g || null, function(match, code) {
return "');" + code.replace(/\\'/g, "'")
.replace(/[\r\n\t]/g, ' ') + ";__p.push('";
})
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n')
.replace(/\t/g, '\\t')
+ "');}return __p.join('');";
var func = new Function('obj', tmpl);
return data ? func(data) : function(data) { return func(data) };
}
I'm making a website using flask.
It displays a list using sql in top.html in which each element is a hypertext.
<table class="table table-striped">
<thead></thead>
<tr>
<th>Company</th>
</tr></thead>
<tbody>
{% for company in companies %}
<tr>
<td>{{ company.name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
So i want to know which hypertext is clicked from the list so that i could load its respective content in /text.
please provide the python code also(flask code).
First put company unique identifier to each <a for example <a data-id="11" ...
Then add event listeners on each <a like this...
var companyLinks = document.querySelectorAll('.table-striped a');
for (var i = 0; i < companyLinks.length; i += 1) {
companyLinks[i].addEventListener('click', function (e) {
// get the company id of clicked link
var companyId = e.target.dataset.id;
// now do what you like with the company id
// for example you can send an AJAX call to your backend
});
}
In my app I used to have a page with >1000 rows that was getting ridiculous. The underlying data was highly structured, so that page now loads a table with all of the parent data. Each parent row has a button that when clicked, creates a child row in the table and then loads in HTML (a table of all of the children).
I'm using #Mottie's fork of Tablesorter, and his demo shows that this should work; that when you sort the parent columns, the child tables stay with the parent. But that's not working properly for me, and I can't figure out why.
(For background, I'm using Jinja2 for templating, which is why you see some of the syntax in the HTML below.)
Can anyone help me figure out what's going wrong?
Here's the JS of the parent table:
<script type="text/javascript">
$(function(){
$.tablesorter.themes.bootstrap = {
table : 'table table-condensed table-bordered table-striped table-hover',
caption : 'caption',
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
};
$("#seedcohorts").tablesorter({
theme: 'bootstrap',
sortList:[[3,0]],
sortInitialOrder: 'asc',
headerTemplate : '{content} {icon}',
widgets : [ "uitheme", "zebra" ],
widgetOptions : {
zebra : ["even", "odd"],
},
dateFormat: 'mm/yyyy',
selectorHeaders: '> thead > tr > th',
});
});
$(document).ready(function(){
$('#seedcohorts').on('click', ".toggleCohort", function () {
var thisRow = $(this).parents('tr.adder');
var hasNextRow = thisRow.next('tr.added').length;
if (hasNextRow) {
thisRow.next('tr.added').remove();
} else {
var parent = $(this).parents('tr.adder'), id = parent.attr('id');
$.get('/myurl?cohortid='+id, function(html) {
parent.after('<tr class="added tablesorter-childRow"><td colspan="7" >'+html+'</td></tr>');
});
}
});
$(document).on('click','a.collapsed', function () {
var id = this.id;
$(this).addClass('expanded');
$(this).removeClass('collapsed');
$('a#'+id+' button').html('<i class="fa fa-minus" aria-hidden="true"></i>');
});
$(document).on('click','a.expanded', function () {
var id = this.id;
$(this).addClass('collapsed');
$(this).removeClass('expanded');
$('a#'+id+' button').html('<i class="fa fa-plus" aria-hidden="true"></i>');
});
});
</script>
Here's the HTML of the parent table:
<div class="table-responsive">
<table id="seedcohorts" class="tablesorter table table-striped table-bordered table-condensed table-hover" >
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Name</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Number</th>
<th scope="col">Dollar data</th>
<th scope="col">Dollar data 2</th>
</tr>
</thead>
<tbody>
{% for entry in cohortlist %}
<tr class="adder" id="{{entry.key().id()}}">
<td>
<a href="javascript:void(0)" id="{{entry.key().id()}}" class="toggleCohort collapsed">
<button class="btn btn-xs disabled"><i class="fa fa-plus" aria-hidden="true"></i></button>
</a>
</td>
<td>{{ entry.name }}</td>
<td>{{ entry.loc_city}}, {{entry.loc_country}}</td>
<td>{{ entry.cohort_date.month }}/{{ entry.cohort_date.year }}</td>
<td>{{ entry.num_cos }}</td>
<td>${{ entry.total_value|newnumber }}</td>
<td>${{ entry.total_funding|newnumber }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
Here's the JS of the child table:
<script type="text/javascript">
$(function(){
$.tablesorter.themes.bootstrap = {
table : 'table table-condensed table-bordered table-striped table-hover',
caption : 'caption',
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
};
$("#mytable-{{cohort.key().id()}}").tablesorter({
theme: 'bootstrap',
sortList:[[5,1]],
sortInitialOrder: 'desc',
headerTemplate : '{content} {icon}',
widgets : [ "uitheme", "zebra" ],
widgetOptions : {
zebra : ["even", "odd"],
},
dateFormat: 'mm/yyyy',
selectorHeaders: '> thead > tr > th',
});
});
</script>
Here's the HTML of the child table:
<table id="mytable-{{cohort.key().id()}}" class="tablesorter-child table table-striped table-bordered table-condensed" >
<thead>
<tr>
<th scope="col">Status</th>
<th scope="col">Company</th>
<th scope="col">Details</th>
<th scope="col">Dollar value</th>
<th scope="col"></th>
<th scope="col">Dollar value 2</th>
</tr>
</thead>
<tbody>
{% for entry in listofcohortcompanies %}
<tr>
<td></td>
<td>{{ entry.name }}</td>
<td>{{ entry.website }}</td>
<td>${{ entry.exit_value|newnumber }}</td>
<td></td>
<td>${{ entry.total_funding|newnumber }}</td>
</tr>
{% endfor %}
</tbody>
</table>
I have been working on your code, and what I would do, is to iterate over the tables finding the id's that are open, store them in an array, and removing those "tabledsorter-childRow", after doing that what I did was to iterate over the ids array and just click again those ones that where open, here is my code:
/* Function for leaving the array with only unique id's */
function unique(array) {
return $.grep(array, function(el, index) {
return index === $.inArray(el, array);
});
}
/* Find all id's of tablesorters that are open and store them in the variable "arrayIds" */
var arrayIds = [];
$('.tablesorter-childRow').each(function(item){
arrayIds.push($(this).find('table').attr('id').split('-')[1]);
//Here we remove the tables
$(this).remove();
});
//Here we leave the array with only unique id's in case more than one is selected
arrayIds = unique(arrayIds);
//Lastly, we cycle through the id's, and also through each button so that we can click it again.
var i;
for (i = 0; i < arrayIds.length; ++i) {
$('#seedcohorts a#'+arrayIds[i]).each(function(){
$(this).click();
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
});
}
This code has to go at the end of the code when the user hits the sorting column.
Let me know how it goes, hope this helps,
Leo.
Have you tried something different from this?
$.get('/myurl?cohortid='+id, function(html) {
parent.after('<tr class="added tablesorter-childRow"><td colspan="7" >'+html+'</td></tr>');
});
I think you could be forcing the element appending to the table and the library could not recognise that row. Could you try appending the html at the same row than the parent?
$.get('/myurl?cohortid='+id, function(html) {
parent.append('<div class="added">'+html+'</div>');
});
I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.
Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
The search form I'm using is found here: http://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive
I found a nice js search form created by Cyruxx that I am implementing on my site. Is it possible to modify this code to only search specific table headers?
For example I have:
<table class="table table-list-search">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td>107</td>
<td>John Doe</td>
<td>1074 example street</td>
</tr>
<tr>
<td>100</td>
<td>Henry</td>
<td>1111 example ave</td>
</tr>
</tbody>
</table>
How can I modify the code to only search the id column for example. In other words, typing the number '1' would only show table rows with a '1' in the 'id' header. Typing '1074' in my example would return 0 results while typing '1' would show both listings.
$(document).ready(function() {
var activeSystemClass = $('.list-group-item.active');
//something is entered in search form
$('#system-search').keyup( function() {
var that = this;
// affect all table rows on in systems table
var tableBody = $('.table-list-search tbody');
var tableRowsClass = $('.table-list-search tbody tr');
$('.search-sf').remove();
tableRowsClass.each( function(i, val) {
//Lower text for case insensitive
var rowText = $(val).text().toLowerCase();
var inputText = $(that).val().toLowerCase();
if(inputText != '')
{
$('.search-query-sf').remove();
tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
+ $(that).val()
+ '"</strong></td></tr>');
}
else
{
$('.search-query-sf').remove();
}
if( rowText.indexOf( inputText ) == -1 )
{
//hide rows
tableRowsClass.eq(i).hide();
}
else
{
$('.search-sf').remove();
tableRowsClass.eq(i).show();
}
});
//all tr elements are hidden
if(tableRowsClass.children(':visible').length == 0)
{
tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
}
});
});
First of all - that's not great search code, its not terribly preformant and mixes view and model concerns in a way that might get difficult to maintain. I would recommend using a pre-build widget, rather than copy-pasting code that you don't understand from blogs (or wherever).
To answer your question though, you can simply constrain which columns are searchable with a css class, and use that class as a search filter:
so change
var rowText = $(val).text().toLowerCase();
to
var rowText = $(val).find('.searchable').text().toLowerCase();
and then tag everything that you want to be searchable:
<table class="table table-list-search">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="searchable">107</td>
<td>John Doe</td>
<td>1074 example street</td>
</tr>
<tr>
<td class="searchable">100</td>
<td>Henry</td>
<td>1111 example ave</td>
</tr>
</tbody>
</table>