In FooTable how do you remove the search box?
See search box picture here.
$(function(){
$('.footable-filtering-search').html('');
});
if this would be your table container:
<div class="container" >
<table class="table table-striped" id="mytable">
</table>
</div><!-- /container -->
Then just do a jquery hide for the table header row containing the search box:
$("#mytable > thead > tr.footable-filtering").addClass("hidden");//hides the standard search footable search box
I am using FooTable v3.1.5. When I want the search box to appear I add the following markup...
<table id="mytable" class="table table-striped table-bordered footable" data-filtering="true">
if I wish to hide the search box i remove the attribute 'data-filtering'.
Example:
<table id="mytable" class="table table-striped table-bordered footable">
I then use JavaScript to initialize the table...
$(document).ready(function () {
$("#mytable").footable();
});
I came up with this solution: https://docs.google.com/drawings/d/1lnzPpEZBmtYyhZyqELr7ZE1H2iR2vciuxg1d5yg7l-Y/edit?usp=sharing
If anyone has a better solution - I will gladly accept it as the answer.
Related
I have seen questions pertaining to accordion but not entirely to my specific need. My table is populated using spacebars, more specific a nested each loop like this:
<tbody>
{{#each piece in pieces}}
<tr id="{{piece._id}}" class="itemList table-warning">
<th class="name tText">{{piece.name}} {{piece._id}}</th>
<td class="pdf tText" style="text-align: center"><a class ="pdf" href="{{piece.pdf}}" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td>
<td class="audio tText" style="text-align: center"><a class="audio" href="{{piece.audio}}" target="_blank"><i class="fa fa-volume-up" aria-hidden="true"></i></a></td>
<td class="format tText">{{piece.instrumentation}}</td>
<th class="price tText" >${{piece.price}}</th>
<td><input class ="qty" type ="number" name ="quantity" value="0" min="0"></td>
</tr>
<!-- Row that is being clicked-->
<tr class="partsList">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<tr class="partList">
<td colspan="3"></td>
<td class="pname tText">{{piece.name}}: {{part.pname}}</td>
<td class="price tText">${{part.pprice}}</td>
<td><input class="qty" type="number" name="quantity" value="0" min="0"></td>
</tr>
{{/each}}
{{/each}}
</tbody>
I have a click function like so:
'click .partsList': function(e){
e.preventDefault();
$('.partList').nextUntil('tr.itemList').toggle();
}
The accordion function works, however it works with every instance of the each loop. i.e. every tr class ="partsList" will accordion at the same time on click.
To my understanding of the each loop, I can access the _id of a document using {{piece._id}}. If I set the table row id to equal that however, it only reads the _id of the FIRST document in the collection.
What I need is on click for the <tr class="partList"> to accordion based on _id. Or perhaps you would go about this a different way than bootstrap tables?
Please let me know if my question needs clarification.
You could filter the clicked .partslist using a data-* attribute. This causes jQuery to select only this specific items. Note that you need to attach the data-* attribute to the row that is clicked and to the rows that should collapse:
<tbody>
{{#each piece in pieces}}
...
<!-- Row that is being clicked-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partsList" data-id="{{piece._id}}">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partList" data-target="{{piece._id}}">
...
</tr>
{{/each}}
{{/each}}
</tbody>
'click .partsList': function(e, templateInstance){
e.preventDefault();
// get the data-id attribute of the clicked row
const targetId = templateInstance.$(e.currentTarget).data('id')
// skip if this row is not intended to toggle
if (!targetId) return
// toggle based on data-target attribute
templateInstance.$(`.partList[data-target="${targetId}"]`).nextUntil('tr.itemList').toggle();
}
I use the excellent "footable" plugin. I can sort the table by clicking on the header, but how to tell to "footable" : sort this table with this column just after the page is loaded ?
I tried with this keyword : data-sort-initial, without success :
<thead>
<tr>
<th data-type="html" data-sort-use="text" data-sort-initial="ascending">Code</th>
<th>Libellé</th>
</tr>
</thead>
My goal is to have this table just after the loading :
With the "sorted icon" displayed in the header. How to do that ?
my js is simple :
$(function () {
$('.footable').footable();
});
Thanks for your ideas. Merci
dominique
Found the answer.
<th data-type="html" data-sort-use="text" data-sorted="true" data-direction="ASC">Code</th>
you must add to the column the tag: data-sorted="true"
like this:
<th data-type="html" data-sort-use="text" data-sort-initial="ascending" data-sorted="true">Code</th>
I am trying to trigger an event when I click on a td with class toggle. When I click on a td with class toggle, I want to show all the next tr with class hidethis.
But I cant seem to trigger an event on the td. Here's what I have got so far.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$(' td .toggle ').on('click',function(ev){
$(this).closest('tr').nextAll('tr .hidethis').show();
});
});
</script>
</head>
<body>
<table border="1">
<tr >
<td class="toggle">First Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 1</td>
<td>Value 2 </td>
<td>Value 3</td>
</tr>
<tr >
<td class="toggle">Second Toggle</td>
</tr>
<tr class = "hidethis" style="display:none">
<td>Value 4</td>
<td>Value 5 </td>
<td>Value 6</td>
</tr>
</table>
</body>
</html>
The problem is when I click on the td with class toggle the event is not firing.
Please help me. May be I am not seeing something obvious.
Thanks in advance.
Remove the space between the selectors, it has a specific meaning:
Selects all elements that are descendants of a given ancestor.
It should be:
$('td.toggle')
Remove space between td and toggle
$(' td .toggle ').on('click',function(ev){
to
$('td.toggle').on('click',function(ev){
^
and also same problem with your below code:-
$(this).closest('tr').nextAll('tr .hidethis').show();
to
$(this).closest('tr').nextAll('tr.hidethis').show();
^
Working Demo
Simply try like
$(document).ready(function () {
$('.toggle').on('click',function(ev){
$(this).closest('tr').nextAll('tr .hidethis').show();
});
});
Or remove the space between the td and its classname
$('td.toggle').on('click',function(ev){
I would like to display an HTML table clicking on a button.
This is what I've tried so far:
My SCALA code:
object Snippet {
def render = {
def showTable() = {
val table = <table border="1">
<caption>My Table</caption>
<thead>
<tr>
<td>Entry</td>
<td>Value1</td>
<td>Value2</td>
</tr>
</thead>
<tbody>
<tr>
<td>PREV</td>
<td>1</td>
<td>10</td>
</tr>
<tr>
<td>CURR</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>NEXT</td>
<td>3</td>
<td>30</td>
</tr>
</tbody>
</table>
SetHtml("table_div",table)
}
"#getTable" #> SHtml.button("Get Table", () => null, "onclick" -> "$('#msg_div').html('<span>Getting table...</span>')") &
"name=proc" #> SHtml.hidden(showTable)
}
}
And my HTML:
<div class="lift:Snippet.render">
<form>
<input type="hidden" name="proc"/>
<button id="getTable" value="Get Table" class="btn btn-inverse">Get Table</button>
</form>
<div id="msg_div"></div>
<div id="table_div"></div>
</div>
Nothing is displayed clicking the button.. Do you see what is the problem?
Or someone could tell me another way to do that?
I am not sure what you are looking to accomplish with the hidden input. Why not just do something like:
"#getTable" #> SHtml.ajaxButton("Get Table", showTable)
If you are looking to display a waiting indicator, Lift has a mechanism for setting the ajax loading animation. In Boot.scala:
//Show the spinny image when an Ajax call starts
LiftRules.ajaxStart =
Full(() => LiftRules.jsArtifacts.show("ajax-loader").cmd)
// Make the spinny image go away when it ends
LiftRules.ajaxEnd =
Full(() => LiftRules.jsArtifacts.hide("ajax-loader").cmd)
You can use any JsCmd instead to call your own function. I'd probably opt for that.
Totally agree with jcern. A slightly different way could also be:
"#getTable [onclick]" #> SHtml.ajaxInvoke(showTable)
(this way you won't override the original button name)
Also note that you don't even need to use the <form> tag -- you can delete it.
Okay so I am converting some code to jQuery and currently the js is just changing the focus to a button with the target id using whenever you press enter or double click in a <select> tag. document.getElementById.focus() and then document.getElementById.click() and returning true to submit this form. Just looking for some example on how to do same thing using jQuery instead. I understand that there is a .keypress() and a .dblclick() function in jQuery and thats what I think I should be using but passing the values of the input box or the select values are a little difficult since there are multiples of each in the form. FYI this is a search page that sends SQL to an oracle database.
Update-
$(document).ready(function(){
$('form').submit(function(){
$(this).keypress()
if(event.which ==13){
}
});
});
This is what i have so far not sure if i am on the right track or not.
so here is an example of how the form is.
<form>
<tr>
<td nowrap="nowrap"><b> Search by Number </b></td>
<td style="vertical-align:top"><input type="text" name="revisor_number" value=revisor_number>" size="55" maxlength="100" /><br/><span style="font-size:75%">commas between numbers (10,15,20), dash for range(10-20)</span><br/></td>
<td> <input type="submit" name="submit_number" id="submit_number" value="GO"/></td>
</tr>
<tr>
<td style="vertical-align:top" nowrap="nowrap"><b> Search by Type </b></td>
<td>
<select name="subtype[]" size="3" multiple="multiple" onkeypress="keyPress(event, 'submit_subtype');" ondblclick="keyPress(event, 'submit_subtype');">
<option value="">>--- All ---</option>
<td style="vertical-align:top"> <input type="submit" name="submit_subtype" id="submit_subtype" value="GO"/></td>
You need to move it outside of your submit function, replace it with:
$('input, textarea').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#submit').focus().click();
}
});
Assuming '#submit' is the ID of your button.
I don't know if i understand what you want,
but submitting a form with a button in jQuery is something like :
$('button').on('click', function(){
$('yourForm').submit();
});