I have a simple DataTable for which I'm adding a class called selected when the user clicks the row:
$("#datatable-buttons tbody").delegate("tr", "click", function (event) {
var $row = $(event.target);
if ($row[0].tagName !== "TR") $row = $row.parent();
$row.toggleClass("selected");
if (event.ctrlKey === false) {
$row.toggleClass("selected");
$row.siblings().removeClass("selected");
}
});
Inside the same function I'm trying to count the rows that have the second column different from ---
var clickedD = 0;
table.rows('.selected').every(function () {
if (this.cell('.selected', 1).data() != "---")
clickedD++;
});
But when there are more than one row selected it counts just the first row with this class. Is there a way to get the number of rows that are selected (have the class selected) with the second cell of each row different from ---?
You can just use the row().data() array. And use the API more heavily. Here is a more simplified version :
table.on('click', 'tbody tr', function() {
table.row(this).nodes().to$().toggleClass('selected');
var count = 0;
table.rows('.selected').every(function() {
if (table.row(this).data()[1] !== '---') count ++;
})
$('#count').text(count+' selected rows with #2 col different from ---')
})
demo -> http://jsfiddle.net/q6d8wqLk/
If you have a JSON based dataSource,, you can use
if (table.row(this).data().secondColData !== '---') count ++;
FYI: delegate() is now deprecated.
Related
I have this code to search data in my tables. I'm trying to add a class on the found rows. It works, however once the search input field is empty, it still keeps the class on the cells. Is there any quick way to remove the class once the search field is empty/found is false?
$(document).ready(function() {
$('#search').keyup(function() {
searchTable($(this).val());
});
});
function searchTable(inputVal) {
var table = $('.phonetable');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if(allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text())) {
found = true;
return false;
}
});
if(found == true) $(row).show() .addClass("searchhighlight");
else $(row).hide();
}
});
}
Check if the value is empty and if it is remove the value:
$('#search').keyup(function() {
var value = $(this).val();
if(value)
searchTable();
else
$('.phonetable tr td').removeClass("searchhighlight");
});
Also look how I traverse the table with $('.phonetable tr td'), you can do something similiar in your current code.
Hi I am developing one jquery application where I have one choosen dropdownlistbox and gridview. The first column of gridview contains checkboxes and at the top it also contains check all button. For example if I check 3 rows inside the gridview then corresponding values in dropdownlistbox i need to disable. I am trying as below.
This is the code to get all the cheked values from gridview.
var checkedValues = [];
$("#<%=gdvRegretletter.ClientID %> tr").each(function () {
if($(this).closest('tr').find('input[type="checkbox"]').prop('checked', true))
{
checkedValues += $(this).val();
}
});
Once i get values in array and when i go to dropdown i have below code.
$('.limitedNumbSelect').change(function (e) {
$("#limitedNumbSelect > option").each(function () {
//if (this.value == checkedValues) If this.value is equal to any value from checkedValues then i want to hide that value inside dropdownlistbox.
// Here i want to hide all values of checkedValues array(values will be same in dropdownlistbox)
});
});
I tried as below.
$('.limitedNumbSelect').change(function (e) {
var checkedValues = [];
$("#<%=gdvRegretletter.ClientID %> tr").each(function () {
if ($(this).closest('tr').find('input[type="checkbox"]').prop('checked', true)) {
checkedValues.push($(this).closest('tr').find('td:eq(2)').text().trim());
}
});
$(".limitedNumbSelect > option").each(function () {
var val = $(this).val();
alert(val);
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
In above code there is one bug. For example if i select one value from gridview then if i click on dropdown i am able to select that value(on first click). On second click required value will hide.
Above code does not work. Array checkedValues doesnt catch values.
I am unable to figure out what to write inside. Any help would be appreciated. Thank you.
Try something like this:
$('.limitedNumbSelect').change(function (e) {
$("#limitedNumbSelect > option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
});
});
Replace the line:
checkedValues += $(this).val();
In this line:
checkedValues.push($(this).val());
I want to remove multi rows from table, and I have used the following code but does not work.
I'm use DataTables v1.10.9.
$('#del_Btn').on('click', function () {
// 'table' is the instance of table object
table.row('.selected').remove().draw(false);
}
Full code:
$('#del_MembersBtn').on('click', function () {
if (confirm('Do you want to remove the selected items ?') === true) {
var selRows = RemoveFromGroupTable.rows({selected: true}).data().pluck(0); // return an object contains selected rows
var selRowsLength = selRows.length;
var rows = new Array();
for (i = 0; i < selRowsLength; i++) {
rows.push(selRows[i]);
}
// remove the selected rows from table
RemoveFromGroupTable.rows('.selected').remove().draw(false);
var inputData = {};
inputData.selectdRows = rows;
inputData.submit = Math.floor(Math.random() * 10) + 1;
$.post(myProp.base_url + 'directory/class/method', inputData, function (outputData) {
if (outputData.submit == outputData.submit) {
tips();
}
}, 'json');
}
}
});
What can I do to remove multi selected rows ?
SOLUTION
Use rows to select multiple rows from the table as shown below
$('#del_Btn').on('click', function () {
table.rows('.selected').remove().draw(false);
}
If the button is located inside the table, it would be necessary to use delegated event handler as follows:
$('#example').on('click', '#del_btn', function () {
table.rows('.selected').remove().draw(false);
}
where example is your table ID.
DEMO
See this jsFiddle for code and demonstration.
I am using a type to filter textbox,where in yser type the data they want to highlight. The data entered in the textbox is then checked against the row in html table.
Row containing the typed data is shown and other rows are hidden.
My problem is that this works as expected but the trouble is that it hides the header.Is there any way that it shows the header along with the highlighted row?
Below is the Script I am using :
function Search() {
var value = $('input[id$="txtSearch"]').val();
if (value) {
$('#table-2 tr:not(:first:hidden)').each(function () {
var index = -1;
//$(this).children('td.hiddencls').each(function () {
$(this).children('td').each(function () {
var text = $(this).text();
if (text.toLowerCase().indexOf(value.toLowerCase()) != -1) {
index = 0;
return false;
}
});
if (index == 0) {
$(this).show();
}
else {
$(this).hide();
}
});
}
else
$('#table-2 tr').show();
}
Kindly provide your valuable suggestions..
Putting this at the end of the Search() definition should work
$('#table-2 tr>th').parent().show();
(I'm assuming the header row has th tags, instead of td)
Otherwise try this
$('#table-2 tr:first').show();
On my webpage, I have a table in which there's a radio button for each row. The name of radio buttons is the same for all rows to access them as a group. I have a button which alerts the row number whose radio button is checked. I'd like to access individual elements of the table of that row as well. Any thoughts as top how I might be able to achieve this would be very welcome.
Here's a Fiddle for the issue:
http://jsfiddle.net/Gz668/13/
On the click of the button "edireq", it currently alerts the row number whose radio button is checked. I'd like to access the values of other fields of the table (requestor, approver, status etc. too.)
Here's the jquery code
$("#edireq")
.button()
.click(function () {
var ele = document.getElementsByName('reqradio');
var len = ele.length;
var flag = -1;
for (var j = 0; j < len; j++) {
if (ele[j].checked) {
flag = j;
}
}
if (flag > -1) {
alert("Row : " + (flag + 1));
} else {
alert("Select a row first");
}
});
Thanks.
You have an odd mix of native javascript and jQuery. You can use the :checked selector to get the chosen radio button, then get the closest tr and read the text of each td within that row. Try this:
$(document).ready(function () {
$('#reqtablenew tr').click(function () {
$('#reqtablenew tr').removeClass("active");
$(this).addClass("active").find('input[name="reqradio"]').prop('checked', true);
});
$("#edireq").button().click(function () {
var $ele = $('input[name="reqradio"]:checked');
if ($ele.length) {
var $tds = $ele.closest('tr').find('td');
var id = $tds.eq(1).text();
var requestor = $tds.eq(2).text();
// and so on..
alert(id);
alert(requestor);
}
else {
alert("Select a row first");
}
});
});
Example fiddle
Try this:
var list = ["Req id","Requestor","Approver","Status","Product","Version","Source","Destination"]; //list of title
if (flag > -1) {
$(".active").find("td:gt(0)").each(function(i){
console.log(list[i]+": "+$(this).text());
});
}
Fiddle here.
I came up with the following:
http://jsfiddle.net/Gz668/16/
$(document).ready(function () {
$("table").on("click", "tr", function(){
$(".active").removeClass("active");
$(this).toggleClass("active");
$(this).find("input[type='radio']").prop("checked", true);
});
$("#edireq").on("click", function(){
activeRow=$(".active");
cells=activeRow.children();
if(cells.length >0){
row={
select:cells[0],
requestId:cells[1],
requestor:cells[2],
approver:cells[3],
status:cells[4],
product:cells[5],
version:cells[5],
source:cells[6],
destination:cells[7]
};
alert(row.requestor.textContent);
}
})
});