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?

JoeJoeJoeJoeJoeJoe Posts: 50Questions: 13Answers: 1

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

  • allanallan Posts: 61,714Questions: 1Answers: 10,104 Site admin
    Answer ✓

    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

  • JoeJoeJoeJoeJoeJoe Posts: 50Questions: 13Answers: 1

    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":

    $('#myTable').DataTable( $.fn.dataTable.ext.deepLink( [
        'search.search', 'order', 'displayStart'
    ] ) );
    

    Then it shows how to perform a standard url search like such:

    $('#myTable').DataTable( {
        search: {
            search: location.search.replace(/^\?/, '')
        }
    } );
    

    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?

  • JoeJoeJoeJoeJoeJoe Posts: 50Questions: 13Answers: 1

    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.

  • JoeJoeJoeJoeJoeJoe Posts: 50Questions: 13Answers: 1
    edited December 2018

    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:

    var queryString = window.location.search;
    queryString = queryString.substring(4);
    if (queryString == null) {
    throw "Error: id is null"
    } else {
    WtmDetails.vars.primaryTable.columns(0).search(queryString).draw();
    }
    
This discussion has been closed.