jQuery DataTables: Hyperlink in a cell (data source: Mysql table)

Question

My question is a follow-up to the previous one: How to display a hyperlink in a cell with jQuery DataTables

There is also a Fiddle link provided

I now have the same question, except that my data source is Mysql database table.

In essence, I am now struggling to implement the "rendering of links" while the source "Data" comes from Mysql table (for instance, the values "5555" and "5554" that are linked in the previous example are values in cells in a mysql table).

My understanding (or assumption really) is that the key herein lies within the javascript part previously provided (the "data" source reference as well as the "rendering" part): (the following is simply the "local data sourcing" example provided in the previous answer, this is not the code I use, my code comes second below)

$(document).ready(function (){
    var data = [["5555","07/17/2010","RCC Saturday Open","E10","Harris,  Fred","1900","Nikolayev, Igor (FM)","2367","1-0"],["5554","07/17/2010","RCC Saturday Open","B01","Nikolayev, Igor (FM)","2367","Motroni, Richard","1728","1-0"]];

    var table = $('#example').DataTable({
        data: data,
        columnDefs: [
            {
                targets:0,
                render: function ( data, type, row, meta ) {
                    if(type === 'display'){
                        data = '<a href="basic.php?game=' + encodeURIComponent(data) + '">' + data + '</a>';
                    }

                    return data;
                }
            }
        ]      
    });

});

And here is the base-code I am working with currently where I need to incorporate the "data location data" and "rendering" part to get the hyperlinks working:

function fetch_data()
  {
   var dataTable = $('#user_data').DataTable({
   "processing" : true,
    "serverSide" : true,

    "ajax" : {
            url:"fetch.php",
            type:"POST"
    }
   });

My data fetching part is working well via the "fetch.php", but I just don´t know how do I achieve the working links given the data source in my case is external mysql table.

EDIT: Original question resolved. Thank you to @Charlietfl!

EDIT 2: One follow-up question regarding the "GET"-like resemblance of passing variable over the link vs. is the same possible via "POST"? so the links would not become bookmarkable for security purposes?

You need the same columnDefs regardless of data source. Is data structure being sent from php the same as the hard code sample array? — charlietfl
– charlietfl, Commented Nov 4, 2017 at 23:28
Thank you for quick response, Charlietfl! Yes, I am using that exact same data structure. I just don´t know what do I need add or modify in my code to enable rendering hyperlinks from external data. — Eleanor
– Eleanor, Commented Nov 4, 2017 at 23:32
should be identical columnDef's as in static version. The internal rendering works the same regardless of data source — charlietfl
– charlietfl, Commented Nov 4, 2017 at 23:33
ok, but what do I do about the line: "var data = [["5555","07/17/2010","RCC...". ... do I just delete it as my data comes from external source? In the first example this data is hard-coded so I need to get rid of this line? — Eleanor
– Eleanor, Commented Nov 4, 2017 at 23:34
Yes... or temporarily comment it out in case you need it to debug with and delete when all works as expected — charlietfl
– charlietfl, Commented Nov 4, 2017 at 23:35

Gyrocode.com · Accepted Answer · 2017-11-06 12:14:12Z

0

Using external data source is not different as with using JavaScript-sourced data, just remove data option and replace it with ajax option.

Please note that hiding variable in a POST request does not improve security in any way. Any request can be inspected in a console.

Also there could be other ways to display target page only if visited from original page, like checking referrer or using a session cookie.

However you could create a hidden form and POST to a page as shown below.

var table = $('#example').DataTable({
    ajax: {
        url: 'https://api.myjson.com/bins/qgcu'
    },
    columnDefs: [
        {
            targets:0,
            render: function ( data, type, row, meta ) {
                if(type === 'display'){
                    data = '<a class="link-post" href="https://www.gyrocode.com/">' + data + '</a>';
                }

                return data;
            }
        }
    ]
});

// Handle click on link in the table
$('#example').on('click', '.link-post', function(e){
   e.preventDefault();

   // Get row data
   var data = table.row($(this).closest('tr')).data();

   var form = $('#frm-main').get(0);

   // Update form action URL if needed
   form['action'] = this.href;

   // Set required form parameters
   form['name'].value = data[0];

   // Submit form
   form.submit();   
});

See this example for demonstration on how this could be implemented.

edited Nov 6, 2017 at 12:14

answered Nov 6, 2017 at 11:51

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eleanor Over a year ago

This looks great, many thanks, Gyrocode! Perhaps a "cosmetics" question - how would you get the clickable link to open target="_blank"? I added/incorporated this suffix to the end of the a href line but to my surprise it had no effect - clicking on a link keeps reloading the page itself, and does not open a new page. data = '<a class="link-post" href="gyrocode.com" target="_blank">' + data + '</a>'; <-- somehow this does not open the link in a NEW window..

Eleanor Over a year ago

Found a solution. Had to add: <base target="_blank"> inside the <head> section of the webpage.

markpsmith Over a year ago

Setting the target attribute to _blank in the <base> element will cause all on-page links to open in a new tab, You may not want that behaviour. Using target="_blank" as you have shown should work fine, it looks like you have a typo though - see the semicolon just before target.

Gyrocode.com Over a year ago

@Eleanor, you need to add target="_blank" to the form element, not the link.

Eleanor Over a year ago

Thank you, all, especially @Gyrocode! You helped me along tremendously!

Collectives™ on Stack Overflow

jQuery DataTables: Hyperlink in a cell (data source: Mysql table)

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related