I have created a single HTML page with a static table. I am using the DataTables jQuery library to help make searching the table easier. I created a drop down menu to filter the table by the "Categories" column (column 2). The filter works for everything EXCEPT if I were to select the "All" option after I have filtered the table by selecting another option. I want the table to redraw itself but can't seem to get it to work. Here is my code (the actual table is 3x as long but I cut it short for this question):
HTML:
<section id="autocad-table">
<div class="table-container">
<div class="category-filter">
<label for="Category">What Type Of Code Do You Need?</label>
<select class="dropdown" name="Category" id="categoryFilter">
<option value="0">All</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
</div>
<table id="commandsTable" class="stripe hover">
<thead>
<th>Command</th>
<th>Description</th>
<th>Category</th>
</thead>
<tbody id="commandsTableBody">
<tr>
<td>0_FILLET</td>
<td>Create a 0" radius fillet</td>
<td>Category 1</td>
</tr>
<tr>
<td>ALLFLAT</td>
<td>Flatten all objects in all blocks & layouts</td>
<td>Category 2</td>
</tr>
<tr>
<td>ANNO_TO_SQUEEZE</td>
<td>Convert an annotation to the SQUEEZE text style</td>
<td>Category 2</td>
</tr>
<tr>
<td>ARR</td>
<td>Creates an array of a selected object at a specified angle</td>
<td>Category 2, Category 1</td>
</tr>
<tr>
<td>ATC</td>
<td>Changes an arc into a circle</td>
<td>Category 3</td>
</tr>
<tr>
<td>BA</td>
<td>Bend Allowance</td>
<td>Category 3</td>
</tr>
<tr>
<td>BB</td>
<td>BOM Ball</td>
<td>Category 3</td>
</tr>
</tbody>
</table>
</div>
</section>
The Javascript:
$(document).ready( function () {
var oTable = $('#commandsTable').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"searchHighlight": true,
});
$('#categoryFilter').change(function () {
var selectedValue = $(this).val();
if (selectedValue == '0') { //check if "All" is selected
oTable.search(selectedValue).draw();
} else {
oTable.column(2).search(selectedValue).draw();
}
})
} );
Again, the table will filter with both the text search field and the drop down. However, once I select "All" from the drop down, the table does not reset. What did I do wrong? Thank you for your help in advance.
One approach is to change the relevant <select> option:
<option value="">All</option>
And then remove the if logic which you no longer need:
$('#categoryFilter').change(function () {
var selectedValue = $(this).val();
oTable.column(2).search(selectedValue).draw();
})
Because the option's value is now an empty string this will unfilter your table.
You could use
oTable.columns().search("").draw()
to reset the search
Related
I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).
I have tried two things.. jQuery and javascript.
Here is my jQuery:
$("#phoneType").change(function() {
if (document.getElementById("optionSelect").value == 2) {
var selectedStatus = parseInt(document.getElementById("optionSelect").value);
$('.clickable-row').removeClass("cra-children-item-selected");
$(this).addClass('cra-children-item-selected');
}
});
Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.
I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...
document.getElementsByClassName("clickable-row").className = "clickable-row";
document.getElementById(selectedStatus).className = "clickable-row item-selected");
What I don't understand is why the jQuery isn't working... I have another function that works perfectly:
$(".clickable-row").click(function(event) {
console.log($(this).attr('id'));
$('.clickable-row').removeClass("item-selected");
$(this).addClass('item-selected');
});
Why is the code above (on click) working, but not my on change function?
Here is HTML:
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Check this, it's actually working.
$("#phoneType").change(function() {
var val = $(this).val();
$("tr").removeClass("selected");
$("#tr" + val).addClass("selected");
})
.selected {border: solid 1px #000; background-color:blue;};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="tr1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="tr6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Based on the HTML you presented, it seems the conditional is never true:
if (document.getElementById("optionSelect").value == 2) {
and should be rewritten referring to the select element for an option value that actually exists
$("#phoneType").change(function() {
var t = $(this),
tVal = t.val();
if (tVal === '3') {
console.log(tVal);
}
});
I would highly recommend you don't try to use id="1" as your row IDs. Use HTML5 data attributes instead:
<tr class="clickable-row" data-id="6">
Then simple jQuery which will select the row:
$("#phoneType").change(function() {
var id = parseInt($(this).val());
var $row = $('.clickable-row[data-id="' + id + '"]');
$('.clickable-row').removeClass("cra-children-item-selected");
if (id > 0) {
$row.addClass('cra-children-item-selected');
}
});
I have one struts html form fields( containing publish date, cutoff date) and on below those fields I have one dynamic table and the data are coming from db. And in one column of the table there is a link when I want to click the link it will open one dialog with data in same form.
I changed any value on that dialog and then close it. and then when I change the publish date it will call struts action and get the cutoff date and will show in the cutoff date field(its not ajax call). But my problem is the selected items in the modal is setting to default one after changing the publish date.
Here is my code.
<script>
function showAddr(rownum)
{
$("#addr"+rownum).dialog({
title:"Edit Catalogue",
modal: false,
width: 980,
zIndex: 1,
height: 395,
resizable:false,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Submit":{
click: function(){
alert("Updated successfully");
$(this).dialog("close");
},
text:"Submit"
}
}
}).prev(".ui-dialog-titlebar").css("background","black");
}
</script>
<form action="abc.do">
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<logic:notEmpty property="addressList" name="AddressBean">
<logic:iterate property="addressList" name="AddressBean"
scope="session" id="addressList" indexId="rownum">
<tr>
<td>ABC</td>
<td><img id="shoAddr${rownum}" onclick="showAddr(${rownum})"></td>
</tr>
<tr>
<td colspan="3" id="addr${rownum}" style="display:none">
<div>
<label for="jobCodeId">City:</label>
<html:select property="city" indexed="true" styleId="cityCodeId_${rownum}>
<html:option value="">- Select - </html:option>
<logic:iterate property="cityList" name="AddressBean" scope="session" id="cityCodeList">
<c:if test='${cityCodeList.city != ""}'>
<html:option value="${cityCodeList.cityCodeId}">${cityCodeList.city}</html:option>
</c:if>
</logic:iterate>
</html:select>
</div>
</td>
</tr>
</logic:iterate>
</logic:notEmpty>
</tbody>
</table>
</form>
but if I remove display:none from the <td> it is showing the value what I selected after changing the publish date. Could you please help me out?
I use the plugin jQuery Tablesorter by Mottie for a long time and it's very useful but today I have a issue. I want to filter my table by the selected options of the selects in one of the columns. The sort works but not the filter.
This is the code HTML :
<table id="tableau-programmes" cellspacing="0" cellpadding="0" class="donnees tablesorter">
<thead>
<tr class="bg-vert-2">
<th>Programme</th><th>No</th><th>Département</th><th>CP</th><th>Ville</th><th>Agence</th><th>Association</th>
</tr>
</thead>
<tbody>
<tr id="18">
<td>Bornéo</td>
<td>44</td><td>Loire-Atlantique</td>
<td>44100</td><td>Nantes</td>
<td>
<select class="centre-profit">
<option value="0">...</option>
<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
<option value="1">Agence de Nantes</option>
</select>
</td>
<td><span class="c-vert">Oui</span></td>
</tr>
<tr id="17" class="bg-vert-4">
<td>Erdréa</td>
<td>44</td>
<td>Loire-Atlantique</td>
<td>44300</td>
<td>Nantes</td>
<td>
<select class="centre-profit">
<option value="0">...</option>
<option value="2" selected="selected" class="bg-vert-4">Agence de Saint-Nazaire</option>
<option value="1">Agence de Nantes</option></select></td>
<td><span class="c-vert">Oui</span></td>
</tr>
...
</tbody>
</table>
This is the code js :
$(function(){
var nom_prog_preselect = (id_prog_preselect > 0) ? $("tr#"+id_prog_preselect).children('td:first').text() : '';
$.tablesorter.addParser({
id: 'txt_select',
is: function(s) {
return false;
},
format: function(s, table, cell) {
return $(cell).find('select').children('option:selected').text() || s;
},
parsed: true,
type: 'text'
});
$(".tablesorter").tablesorter({
widgets:['zebra','stickyHeaders','filter']
,headers: {
5: { sorter:"txt_select", filter:false }
}
,initialized: function (table, filter, apply) {
$.tablesorter.setFilters( table, [nom_prog_preselect,'','','','','',''], true);
}
});
});
Is there anyone who can help me please ? Thanks.
Instead of creating a custom "txt_select" parser, load the parser-input-select.js file provided with the fork of tablesorter.
That file has two select parsers:
'select' - Stores the selected value
'select-text' - Stores the selected text
and some extra code that is needed when the select value changes to update the internal cache.
As mentioned in the title, I want to know how to make an HTML select box to make an ajax request and use that to filter table. I have searched a lot and was not able to find a good solution.
How can i get it to filter??
My source code on jsfiddle.net:
<select>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>
Your example is a little odd because you are filtering down to only one row, but here is how you can make it work.
First, give your <select> and <table> each an id. I chose something generic:
<select id='column-select'>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table id='data' border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>
Now, just use some Jquery to filter out the rows you don't want when the column changes
$(document).ready(function() { // Do nothing until document is ready
$("#column-select").change(function() { // On <select> change...
var selection = $("#column-select").val();
if (selection == "all")
{
$("#data tr").show(); // Show all rows
} else
{
$("#data tr").each(function() { // For each row
if ($(this).find("th").length == 0) // If this is not a heading row
{
if ($(this).find("td").eq(0).text().toLowerCase() == selection)
{
// Show rows where the first column matches
$(this).show();
} else
}
// Hide rows where the first column does not match
$(this).hide();
}
}
});
}
});
});
Here is a jsfiddle to demonstrate.
I am trying to retrieve the index of the row when the user has clicked on the check box. It works for the codes that I have written for the first two rows when the check box are ticked. However when I tried to insert more rows, the index that I retrieve after the check box is tick gave me a false result, i.e -1.
Can anyone help me with this? I have research for a long time and I still can't get it to work. I tried setting the clone argument to true but it still failed.
//Insert a new row after the last row in the table
$("#add").click(function() {
clickCount++;
var numRows = $('#getnumRows').val();
var index = $('#mytable tbody>tr:last td:nth-child(2)').text();
var i=Number(index);
var intNumRow=Number(numRows)+i;
for (; i < intNumRow; i++)
{
$('#mytable tbody>tr:last').clone(true,true).insertAfter('#mytable tbody>tr:last');
//$("#mytable tbody>tr>td:last td:nth-child(1)").children('input').addClass('chkbox');
$('#mytable tbody>tr:last td:nth-child(2)').text(i+1);
var input= $('#mytable tbody>tr:last').find('td').children('input');
input.val('');
input.attr("checked", false);
}
});//end click tag
var chkBox=$("#mytable tbody>tr>td ").children('.chkbox');
chkBox.on('click',null,function ()
{
var isChecked=$('.chkbox');
if (isChecked.is(':checked')) {
var index=chkBox.index(this);
alert(index); //added alert to intentional check the index retrieve from the checked checkbox of the row![enter image description here][1]
var insertNewRow=ajaxNewRowInfo(partNo,serviceName);
insertNewRow.success(function(data)
{
var row=$('#mytable tbody>tr').eq(index);
for(i=2;i<data.length;i++)
{
$(row.children(' td:nth-child('+(i+3)+')')).children('input').val(data[i]);
}
});//insertNewRow end tag
}//if end tag
else{
alert('You Un-Checked it');
}
});//chckbox end tag
<!--Add rows -->
<div class="form-group">
<label class="col-sm-1 control-label" style='margin-top:0.6%;'>Rows</label>
<input class="form-control" style='width:100px;' type='text' id='getnumRows' placeholder='No.of Rows'>
<button type="submit" id="add" class="btn btn-success" style="margin-left:200px; margin-top:-35px; ">Add rows</button>
</div>
<!------------->
<tbody>
<tr id='tableRow1'>
<td><input type="checkbox" class='chkbox'/></td>
<td> 1</td>
<td>
<select class="form-control" class="serviceDropdown">
<option></option>
<option value='1'>Oil Change Service</option>
<option value='2'> Tyre Service</option>
<option value='3'>Vehicle Service</option>
<option value='4'>Battery Service</option>
<option value='5'>Clutch Brake Service</option>
<option value='6'>Suspension Service</option>
<option value='7'>Brake Service</option>
<option value='8'>Tuning and Diagnostic Service</option>
</select>
</td>
</tbody>
[The first image shows the alert box which the index of the check box row is able to retrieved. The second image shows when new rows are added through cloning, the index of the alert box shows -1.]
http://postimg.org/image/913o3lyuv/
http://postimg.org/image/fg2p0a5kn/
Consider Element Indexing w/ jQuery Index()
Ex. http://codepen.io/anon/pen/XJRJEg
If .index() is called on a collection of elements and a DOM element or
jQuery object is passed in, .index() returns an integer indicating the
position of the passed element relative to the original collection.
HTML
<table id="hi">
<thead>
<tr>
<th>Heading</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
jQuery
$( "table#hi tbody tr" ).click(function() {
var index = $( "table#hi tbody tr" ).index( this );
alert(index);
});
DOCUMENTATION