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.
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.
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.
I want to hide the black list item depending on the the checkbox (Hide completed) being selected or not and show only the red ones. If there are no red ones in a row, entire row should be hidden. If there are no list items in a row, the row should be hidden too.
Also depending on the count of items in the list, the table metric should be updated. For example, if I hide all the black items, the completed one should show 0 and missing will be 1.
How can I do this using jquery?
Here is a fiddle:
(https://jsfiddle.net/skb25/ezvps3hL)
$(document).ready(function () {
var otable = $('#table_id').DataTable({
"paging": true
});
$('a.toggle-vis').on('click', function (e) {
e.preventDefault();
// Get the column API object
var column = otable.column($(this).attr('data-column'));
// Toggle the visibility
column.visible(!column.visible());
});
var hideParamNode = document.getElementById('hideParam');
hideParamNode.addEventListener('change', function (event) {
hideParameterization(hideParamNode);
})
function hideParameterization(hideParamNode) {
var pElems = document.getElementsByClassName('paramName');
if (hideParamNode.checked) {
Object.keys(pElems).forEach(function (key) {
pElems[key].style.display = "none";
})
} else {
Object.keys(pElems).forEach(function (key) {
pElems[key].style.display = "";
})
}
};
});
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);
}
})
});