How do you filter a table on a new page by clicking on table cell of previous page?
How do you filter a table on a new page by clicking on table cell of previous page?
I want to be able to click on a table row, which opens a new page with a new table that is filtered based on the ID of the row I just clicked on in the previous page. How can I do this?
Previously I have done this exact same thing with two different tables on the same page, using this function:
oTable.on("click", "tr", function () {
var rowData = oTable.row(this).data();
var qTable = $('#WTM_LOG').DataTable();
qTable.columns(1).search(rowData.TaskName).draw();
});
Problem is, that won't work with a new page. I'm guessing some callback function is needed but I do not know how to do this.
Thanks,
This question has an accepted answers - jump to answer
Answers
Use window.open to create a new window and the deep linking software discussed in this blog post (or a similar technique) to filter the target table.
Allan
Thanks, that looks like what I'm looking for. Not sure if some of these blog posts are just not newb friendly or if I'm reading them wrong/just not getting it. I've read over the deep link page several times over the last couple of hours trying to understand how to use it for what I want without much success.
I already have a html href link set to open the new table on a new page, so I don't think window.open is necessary.
The blog post states, " the code for this example is simply":
Then it shows how to perform a standard url search like such:
But how do we go from a standard search, to remembering the data from the row that was clicked on in the parent page and then performing a column search on the new page using that data as a search filter?
Ok, I've figured out how to insert the search query value into the url of the new page. So I should be able to extract that value using the deep linking software.
Never mind, I fixed it by extracting the value I wanted from the url, without deep linking. For anyone interested, here's my code.
First, the user clicks on a link:
<a href="http://localhost/WTM/LogError/Index?id=' + row.[Name of column with query id]></a>
then in the javascript file of the next web page I have this to extract the id query from the url and then draw the table: