How to get a pop up showing entire record when clicked on hyperlink on dynamically loaded datatable

abhiramana

Hi Friends,

I have implemented a way to dynamically load records from a csv file into a jquery data table. There are 19 columns in the csv file but need to show only 5 columns in datatable and so my requirement is to keep hyperlink on the first column and then when user clicks on the hyperlink I have to display the entire rows as a pop up (all the 19 columns and other 14 columns from csv file as a pop up not an alert box).

I have made till hyperlink, but I was not able to implement dynamic pop up when a user clicks on the first column which is having hyperlink. Kindly help me... Here with I am sharing my snippet used for dynamic loading... Below I even implemented search on top and bottom of every column and also pagination..

<

script>

// ready function call

    $(document).ready(function() {
        $('table.table').dataTable({  <!--table.class-->
        "pagingType": "full_numbers"
    });



//infoTableHide TABLE 
        $.get('HCA_DATA_EXTRACT.csv', function(data) {
    // start the table              
        var html = '<table class="table" id="tableid" >';
        html +='<thead><tr><th title="Field #1">PO NUMBER</th> <th title="Field #2">INVOICENUMBER</th> <th title="Field #3">CUSTOMER NAME</th> <th title="Field #4">SHIP TO</th> <th title="Field #5">INVOICE AMOUNT</th> <th title="Field #6">STATUS</th></tr></thead>';
        html += '<tbody>';
    // split into lines
        var rows = data.split("\n");
    // parse lines
        rows.forEach( function getvalues(ourrow) {
    // split line into columns
        if(ourrow != '')
        {
            var columns = ourrow.split(",");
    // start a table row
            html += "<tr>";
            html += "<td class='infoRef'><a href='#'>" + columns[0] + "</a></td>";
            html += "<td>" + columns[1] + "</td>";
            html += "<td>" + columns[2] + "</td>";
            html += "<td>" + columns[3] + "</td>";
            html += "<td>" + columns[4] + "</td>";
            html += "<td>" + columns[5] + "</td>";
            html += "</tr>";
        }
    })//forEach()
    html +='<tfoot><tr><th title="Field #1">PO NUMBER</th> <th title="Field #2">INVOICENUMBER</th> <th title="Field #3">CUSTOMER NAME</th> <th title="Field #4">SHIP TO</th> <th title="Field #5">INVOICE AMOUNT</th> <th title="Field #6">STATUS</th></tr></tfoot>';
    html += "</tbody></table>";
    $('#infoTableHide').append(html);
    //$('#tableid').DataTable();
    //"sDom": '<"top"i><"title">lt<"bottom"pf>',
    //"pagingType": "full_numbers"

// appending to DataTable
    var table = $('#tableid').DataTable();

//Setup - add a text input to each footer cell
    $('#infoTableHide tfoot th').each( function () {
        var title = $('#infoTableHide thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

// Apply the search
    table.columns().every( function () {
        var that = this;
         $( 'input', this.footer() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );

//Calculating the count of all records
        var oAll =  $('#tableid').dataTable();
        var countAll = oAll.fnGetData().length;  //predefined
        $("#countAll b").html(countAll);
//COUNT end 

//Displaying The Count of all Records                                   
        $("#showGridAll").click(function (e){
            $("#infoTableHide").show();
            $("#infoOpenHide").hide();
            $("#infoClosedHide").hide();
            $("#infoPop").hide();
        });

ThomD

Look at the Child Rows example. This shows how to have the first column act as a link that opens a table with more details. You should be able to adapt this to a "pop up", rather than expanding down by changing the CSS.

https://www.datatables.net/examples/api/row_details.html