How to respond to the user selecting a row in jQuery.dataTables? - javascript

I'm writing a web application using jQuery.dataTables. I'm sure I did this some time before, but I'm having trouble figuring out the proper way to make my page respond to the user clicking on a row.
The basic idea is that I want to be able to respond to a click on a row by showing the user more information about that row. I would like to invoke some function when the row is clicked. I may also need to place one or more buttons in each row that can be clicked on to do row-specific functionality, such as navigate to a form to edit or delete a row.
$('#tblData').dataTable({
data: data,
columns: columns, // only column names specified
bFilter: false,
bPaginate: false,
bInfo: false
});
I would have thought that the "Events" reference might answer this (http://www.datatables.net/reference/event/), but I haven't had any such luck.

To place an event on the table's row I would use the .on method:
$("#tblData").on('click','tbody > tr',function(e){ });
Then, if you place buttons inside the rows, you can do the same thing using the button selectors. Just make sure you use e.stopPropagation() in the button click to keep the row click from firing.

Related

Preventing Apex Button Double click

Hi I have a button that inserts empty records into an interactive grid. I want to prevent the user from being able to double click that button because it populates duplicate rows. I have a server side argument that says if there are rows the button does not appear however they are still able to double click the Populate_tables button before it vanishes. If there are any other solutions to this please sound off. I've tried everything from javascript to server-side but they are still able to double click no matter what. Here are the before and after pictures of the table.
$('#btnPopulateTbl').dblclick(function(e){
e.preventDefault();
});
The above code prevents the double click for a button. This is in jQuery.
Oracle Apex does not offer this functionality as a setting or etc.
However you can use
$('#button').click(function(event) {
if(!event.detail || event.detail == 1){
// This will be executed once even user clicks multiple times
}
});
Note that your selector must be the id or the class you provide to this button.
By default 'add row' button's classes are:
class="a-Button a-Toolbar-item js-actionButton"
Another solution would be to have apex handle this. Suppose this is on page 1.
Create a page item P1_POPULATE_ROWS_CLICKED with a default value of 'N'
In the page process that populates the table, add the following line before the actual load:
:P1_POPULATE_ROWS_CLICKED := 'Y';
Add a condition to the page process that populates the table of "Item not equal to value", P1_POPULATE_ROWS_CLICKED , Y
Yet another solution is to only execute the insert statement if no rows exist with that condition yet. I can't show you how to do it because you didn't show how the table is populated but happy to do so if you edit your question. This last option is propably the most suitable.

How to get button to act as column search filter within ag-grid and search for a set list of items?

SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.

Jquery datatables pagination issue

So I have a map defined where there are two tables as an example. When you click on one item in the first table, it will highlight the corresponding related item/row on the second table. The issue I am facing is that I have added Pagination on these tables. So lets say when I select an item in table 1 and if it corresponds to an item in table 2 which is on page 2, when I click on page 2 on the second table, it loses the highlight.
Now I have the function which essentially has the objects which I care about but I feel I am missing the right jquery function (onclick/something else??) that I need to call.
ForEg: Lets say I pass the information during the below function. What happens is that the below function works when I click on the current page twice. i.e. Once to go to page and second when I am on that page.
Scenario:
Click on item in table1 (that corresponds to item in table 2 on page 3)
Click on button 3 to view the corresponding page (Ideally the below function should have been called but it doesn’t)
Click on button 3 again and the below function gets called.
jquery(function1 + ‘ .page_button.current’).on(‘click’, function(e){
console.log(“Entering here”)
});
I want it to be called when I go to that page for the first time.
Can anyone please help me with what I am doing wrong. What function do I need to use apart from this ‘click’ which would help?

How can I make javascript in a column header launch javascript of all rows below it?

Let me describe what I have, and then what I want.
I have a table with users and various actions that can be taken for this user. Each row has the user's name, then several columns of actions.
Each column has javascript that will perform that action for that specific users when clicked. Now, I want a column header that allows users to perform that action on all users in the results.
Here's an example:
MY RESULTS TABLE:
---User's Name---Run All---Delete All---Move All---
---John Doe----------Run--------Delete-------Move----
---Jane Doe----------Run--------Delete-------Move----
---Mike SMith--------Run--------Delete-------Move----
There is javascript for each of the links above in the rows. Clicking "Run" will perform an appropriate action, as will clicking "Delete" and "Move.
However, I want the "Run All" link to perform the task linked in each of the "Run" links below it.
Is it possible to do this? I know It can be done in the C# code behind, building up the javascript for each result into a large script, before binding it to the "Run All" link, but I'd like to see if it is possible for javascript to launch the javascript below it in a column of a table.
Thanks for any advice!
I am making a couple of assumptions in this example:
The "... All" are links and not buttons
The "... All" links are in the first row of the table.
The links are in individual cells by themselves.
Make adjustments as necessary, but I hope the following helps:
// bind click events to all links in the first row of the table
$(".dataGridCondensed tr").first().find("a").click(function() {
// get the index of the column that holds the clicked link
var col = $(this).parents("td").first().index();
// find all the column's in rows after the first row (index 0) with the same index (col), and click the link in that column
$(".dataGridCondensed tr:gt(0) td:eq(" + col + ")").find("a").click();
})
Good luck.
Not sure if you're using jQuery, but it would help a lot for this use case.
//find rows of your table, then for each one
`$('#myTable tr').each(function(){
var row = $(this);
var action = row.find('.classToDenoteTheRunAnchorTag');
action.trigger('click');
});
You mentioned C#, so I assume this is ASP.NET. If each of them is going to be calling the server via ajax or something, you'd probably be better off having a single server method that it calls that iterates through them all, instead of sending many requests simultaneously from the client.

How do I get column name from rowselection in an ExtJS grid?

I have a extjs gridpanel setup, and I want to be able to do things based on a user clicking on text or icons in the grid. For example, filter the grid if the user clicks (or double clicks) a word in a column, or show a popup if the user clicks on an icon. I can easily get the row they clicked on, and values by column name from that row, but I don't know which column was clicked.
Alternatively, I could add an onClick to the entire grid, which I could then get the individual text from the row/column, but I don't know what row index or column that value belongs to. I could add a CSS class that would tell me a column name, but that seems like a hack.
Is there anything built-in that can do this?
The "cellclick" event on the grid is the way to go. A function listening on this event gets passed:
( Grid this, Number rowIndex, Number columnIndex, Ext.EventObject e )
If you want to get the text of the gridCell, calling yourGrid.getView().getCell(rowIndex, colIndex) will return the DOM element.
If you want to get the column header, call: yourGrid.getColumnModel().getColumnHeader(colIndex)
If you want to find anything else out about a particular column, call yourGrid.getColumnModel().getColumnAt(colIndex)
I think if you are interested in column wise events rowselection is the wrong event to look into. As Joshua suggested the cellclick event will the event you have to look into.
This event can give the dataIndex of the column as given
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
Please look at edit-grid.html example for checkbox rendering and event handling.

Categories

Resources