I'm trying to add an attribute to the first column in my debatable so I just add a class in the columns[] setting called popperup.
However for the bootstrap popover to work I need to add the attribute "tabindex":"0"
This can be done with $(".popperup").attr({"tabindex":"0"})
however this only adds it to the first entries that load 10 in my datatable which then allows the popover to work the problem is when you click the next paginate button or numbered buttons it will not work as the tabindex:0 is missing
I have tried using
$("#Ttable3").on('page.dt', function() {
console.log("here")
$(".popperup").attr({"tabindex":"0"})
});
This only works once you have gone to the next page and then go back again. so you click next page or go to page 2/3/4 etc nothing happens. you go back to page 1 then back to page 2/3/4 and it will work
how can I get it so "tabindex":"0" is on every cell in a column
spend hours working on an issue and fix it the moment you post it on Stackoverflow
I needed to use draw.dt in the on call.
so this
$("#Ttable3").on('page.dt', function() {
console.log("here")
$(".popperup").attr({"tabindex":"0"})
});
becomes this
$("#Ttable3").on('draw.dt', function() {
console.log("here")
$(".popperup").attr({"tabindex":"0"})
});
Assuming you have defined your DataTable and assigned it to a variable...
var table = $('#example').DataTable( {
// your options here
} );
Then you can use the following to iterate over every node in the first column, using the table reference you defined:
var selectedCol = table.column(0).nodes();
for (var i = 0; i < selectedCol.length; i++) {
$(selectedCol).attr({ "tabindex": "0" })
}
Related
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I am trying to show and hide certain rows of a table, which will display or hide when the using click a link, however, my attempts aren't quite getting there. Can anyone let me know where I'm going wrong?
Firstly, here is some sample html for the table, which is actually generated by php and a sqlsrv connection:
As you can see, javascript is called to hide/show the rows on the second row. This would show all the recipients rows for that file (as well as the child headers). I've only written the showRows JS right now, as I haven't been able to getting working correct, however, the hideRows JS would effectively be the opposite:
function showRows(FileSpan) {
var rows = document.getElementsByClassName(FileSpan);
var arr = new Array();
for (i = 0; i < rows.length; i++) {
rows[i].style.display = 'block';
}
}
This, however, doesn't result in how I want the table to look. Instead of it display the row, it puts all displayed rows in a single cell below the current one. Where am I going wrong?
I've added a few pictures so that you I can see what I want to look like, and how it does.
You just have to change the display property from block to table-row.
rows[i].style.display = 'table-row';
Having an issue showing a modal window after I have parsed the JSON and placed the values into a TABLE TR.
$('#serviceload').change(function() // on dropdown select change
{
var page = $('#serviceload').val(); // dropdown selection set to page
if(page == "")
{
$('#completeProfile').hide(); // if page is blank, hide content
}
else
{
$.post('api/vesselSearch.php', {page: page}, function(data)
{
var obj = JSON.parse(data); // parse the data
$('#vesselinfo').empty(); // clear previous vessel content
var htmlToInsert = obj.map(function (item)
{
return '<tr><td>Edit</td><td>'+item.VESSEL_NAME+'</td></tr>';
});
$('#vesselinfo').html(htmlToInsert); // insert new vessel content
});
$('#completeProfile').show(); // show all content on page
}
});
As you will see above, after the JSON is parsed, I display the values in a TABLE row, which may have more than 1 row. The first TD cell contains a hyperlink which should open my edit modal.
The code to transfer the data from the row and display it in the modal looks like this:
$('#editVesselLink').click(function(e)
{
e.preventDefault();
$('#editVesselForm input').val(''); // clear previous values
$vessel= $(this).attr('data-vessel');
$('#editvesselname').val($vessel);
$('#editVesselInfoModal').modal('show'); // show the modal
});
Here is where my problem begins.
I am not sure where to place the code directly above. I have placed it inside the $.post beneath $('#vesselinfo').html(htmlToInsert);, and that was the only place I could get the modal to even open, but only for the first record.
Basically, I can only get the modal to open for the first record when I place the second piece of code inside the $.post . The modal will not open at all in any other place that I put the code.
I tried to use a $(document).ready(function{}); to no avail.
What am I missing?
Ok, I think that the problem is on:
...
return '<tr><td>Edit</td><td>'+item.VESSEL_NAME+'</td></tr>';
...
You can not repeat id property on the code, so, where is id="editVesselLink" put class="editVesselLink" and on $('#editVesselLink') put $('.editVesselLink')
why did it happens?
By HTML convection's the id have to be unique on HTML, so jQuery expects to recover only one element with that id, by default jQuery recover the first with that id if it is duplicated
So I have a table.. It's in jade templating format so i've not created a jsfiddle for it.
Anyhow, the user clicks a button within the table and this toggles a class which displays all the information to do with that table.
The user clicks and this code gets executed:
$(function() {
$('.information-button').click(function() {
detailsPopup(this);
});
});
The onclick calls the function below:
function detailsPopup(el) {
// $(el).find("td").each(function(index){
// var bookingData = $(this).html();
// })
array1.indexOf(td [ fromIndex])
console.log($(el));
$(".details--info, .overlay--contain").toggle('600');
}
The problem i'm having, is I need to loop through all the td elements of the booking, grab the index and pass it through the onclick event. So when I toggle the class that displays the information, it only shows the information for that table cell.
Anyone know how I can achieve this? Thanks!
use Index in jquery.
select parent and get index number.
i.e:
$(el).closest('tr').index();
So I have a set of dynamically created content "boxes," generated by a wordpress plugin. Each box is contained within a div with class "front-page-post". I'm trying to create a "live search" that will remove non-matching boxes, but will also add them back when a user changes or erases their search term.
Using $(this).fadeOut(); and $(this).fadeIn(); works, but because the boxes aren't actually being removed - just hidden - the page layout doesn't dynamically update and the boxes stay where they were originally. I can get the page layout to update if I completely remove the boxes using $(this).remove(); but can't figure out how to re-add them back if the search term is updated. Trying to store them within a hidden div on the page with class "store" but this isn't working either.
The page I'm working on is here. Here is my code; any help would be appreciated! Thanks!
<script type="text/javascript">
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".front-page-post").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).clone().appendTo("div.store");
$(this).remove().delay(500); $(window).resize();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).prepend( function() { $("div.store").contents(); } );
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Resources = "+count);
});
});
</script>
It took me a while to figure it out, but this seems to work nicely on my browser.
the first line simply disables your function so i could try it in console, you dont need it.
working pastebin sample
Looks like the site has positioned the blocks using positin:absolute, and top, left , which means you have to recalculate those, even if you remove the boxes.