Develop Reference

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.

Add dynamic column to table in smart-table [angularjs]

I needed a little help over here on adding dynamic columns to table and I'm using smart-table project https://lorenzofox3.github.io/smart-table-website/
Please look at plunker
https://plnkr.co/edit/uTDa6hfwdgGtGWkYqL7S?p=preview
Click on add new column, it will update the table header, but I can't update the td element because I haven't created or binded any td element for new column.
Need help on two things.
1) Any number of new columns might come in future from server dynamically, so I can't bind any element statically in html like I did right now.
2) This is a little long one(I want to create a only one header as MV and in colspan I want current and next) and How do I accomplish that one ? If I divide like that, how do I go frame the data ?
Additional Note on Question 1: I have tried dynamically showing the data in table. please look at line 27 in index.html. But again, If I go with this approach, the values get binded to different different columns since, data's are framed dynamically on controller. To be simple, there is no guarantee that data will be in in this order.
(SNo, companyName, companyFullName, MarketValueCurrent, MarketValueNext, QuarterCurrent, QuarterNext)
companyName might come first or at last. If I go by dynamic looping using ng-repeat, it binds MarketValueNext in first column, then companyName, etc in whichever the order the data is coming.
Thanks in advance.

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 to display the which was inserted recently in to table

I have a table in MySQL test_info . This table gets an insert command at random times such that a new record is added. This insert can be fired from anywhere.
Actually what have to do is?
front end should display the data which was inserted into the table recently in a real-time fashion.
please suggest me how solve this problem

You would use $mysqli->insert_id to retrieve the id that was auto generated and used by the last query. Check it out here.
Edit: Based on Thorsten Kettner's comment, you could also use SELECT LAST_INSERT_ID(); which to my understanding isn't based on the current connection and instead is referenced globally.
You could even use SELECT MAX(ID) to get the last ID within a table, which most likely would be the most recent if set to AUTO_INCREMENT.

First, for your client side, check out the Server-Sent-Events.
Secondly, you need a mechanism to check for latest updated data at your server side

You can use a mysql query to get last records. In my example shows how to get last 10 records.
here is the example
select * from table order by date DESC LIMIT 10

insert_id has some restrictions and I'm not sure how you will differ inserts from deletes.
What I would do will be *on insert trigger in each table where you need to track the insert
(may be you will want to track on update and on delete as well)
triggers
.
what you probably need is a separated table - historical_data_tab which holds all the historical data triggered by any event which you want to track.
for mysql :
USE `db_name`;
DELIMITER $$
CREATE DEFINER=`root`#`%` TRIGGER track_insert AFTER INSERT ON your_table
FOR EACH ROW BEGIN
insert into historical_data_tab
values (new.ID, 'INSERT',NOW());
END
pay attention to new.ID and NOW(). In case you don't need the original PK, just insert NULL in place of new.ID and any Auto Increment PK will take care of the rest. NOW will populate historical_data_tab table with a timestamps of the time the event was triggered. INSERT should tell you what type of event it was.
Replace it according to the trigger you'r using.
you might want to keep data about any of the following events*
after delete, insert, update
or
before delete, insert, update
p.s. There are a lot of ways to do what you need. Don't go crazy with triggers and try catching front end events in the front end itself

select * from your_table where ID = Max(ID)

How to make multiple HTML tables sortable?

I am currently using an open-source javascript table sorter: http://mottie.github.io/tablesorter/docs/
The problem I have is that I dynamically add tables to my page in reaction to the user pressing a button. Only the most recently added table becomes sortable and the previous tables are not sortable anymore after I add the new table. Currently, I have this code at the end of my table creation:
//Make table sortable
$(document).ready(function () {
$("#" + thisTable.ID).tablesorter();
});
I don't understand why the old tables lose their sortability if they're not being reloaded. I am only appending a new table with a different ID under the previously added table.

You can change your selector to $('table'), and this will add the sorter to all tables. Your current code will only run on page load though, so you'll have to execute the $('table').tablesorter(); line every time you dynamically add a new table (in your button's click handler).
It would be better though if you added a class, such as sortedTable to every table, and made your selector $('.sortedTable'), rather than simply $('table'), because you may at some time want a table that isn't sorted and the first version will always sort all tables. The second version will only sort those tables that you explicitly mark as sortable.