jquery doesn't take hidden td

JCR1951

$('#example tr').each(function() {
$('td', this).slice(-3).on('click', function() {
// do what you want
var $columns = $(this).siblings('td').andSelf();
 $.each($columns, function(i, item) {
alert($(item).html());
 
                });
            });
        });

I'm a starter with datatables.
And no code specialist.
The code gives all the td values in a row.
But on every click it looped more and more.
And it doesn't take the hidden columns.
Please help me with an updated script.

doncullen

Not sure what you're trying to accomplish. If you're trying to get the value of a hidden TD within the same row of a TD that was clicked on, then try this:

$('#example').on('click', 'tr', function(event) {
    var hiddenTDvalue = oTable.row($(this).closest('tr')).data()[5]; // 5th TD is hidden
    alert(hiddenTDvalue );
  });

JCR1951

Thanks for the comment.
I will try this one.

I want in all rows 3 logo's (images). Facebook, Website, Youtube video.
When I click on one it opens the corresponding facebook-account, website, or youtube-video.
I tried a couple of scripts, but it doesn't work for me.

Now I was trying with hidden fields.
But all other options are open.

JCR1951

"columns": [
                    { "data": "id" },
                        { "data": "name" },
                        { "data": "address" },
                        { "data": "lat" },
                        { "data": "lng" },
                        { "data": "type" },
                        { "render": function (data, type, full, meta) {
                            return '<img src="'+full.fotoA+'">';          
                        }},
                         { "render": function (data, type, full, meta) {
                            return '<img src="'+full.fotoB+'">';
                                               }
                         },
                      { "render": function (data, type, full, meta) {
                                return '<img src="'+full.fotoC+'">';
                                 }}
             ]

In my database I change the image(s) if there is content in the fields of facebook, youtube or website.
But now i want the images clickable and linked to the right hidden td in the row so it can open _blank.

JCR1951

This is a link from this problem..
The hidden td's are in the fields after the website column (logo).
The colored logo's have to keep the corresponding values.

http://www.pctraverse.nl/DataTables-1.10.11/examples/server_side/simple.html

JCR1951

Because both the links and the img's coming from the database I put it together now.
And split it in the script. The hidden fields are not longer needed.
But I don't get the window.open in a new window.
Please help.

       "columns": [
           { "data": "id" },
               { "data": "name" },
               { "data": "address" },
               { "data": "lat" },
           { "data": "lng" },
               { "data": "type" },
               { "render": function (data, type, full, meta) {
        var a = full.fotoA;
        var spl = '*';
            if (a.indexOf(spl) >= 0) {
        var b = a.split(spl);
            var c = b[0];
            var d = b[1];
            return '<a href="#" onclick = "open.window("'+d+'")><img src="'+c+'"></a>';          
                        }
                   else
                                   {
        return '<img src="'+a+'">';
                            
                        }
                        }
                        },

allan

I would strongly suggest you use a single delegated event handler like in this example. At the moment on the first click it is then adding another click event handler, which is white confusing and will almost certainly lead to memory leaks.

Allan

JCR1951

Thanks Allen for your comment.
But I already tried every manual concept.
But for some reasen it gives always "non defined row".
And it takes not the hidden columns.
So I tried another move.

JCR1951

Oke, I can now retrieve every column value in a row, but not the hidden fields.
Is there a way ?

   oTable = $('#example').DataTable( );

    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        } else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');

       var d = oTable.row(this);
      
        var jqueryValue = $('#example tbody tr:nth-child(7) td:nth-child(3)').html();
        var selectorValue = oTable.cell('tbody tr:nth-child(7) td:nth-child(3)').data();

        var apiValueA = oTable.cell(d,1).data();
        var apiValueB = oTable.cell(d,3).data();
        var apiValueC = oTable.cell(d,5).data();
        alert(apiValueA);
        alert(apiValueB);
        alert(apiValueC);

    }

jr42.gordon

You cannot use jQuery selector to search for hidden columns as they don't exist in the HTML. You will want to use https://datatables.net/reference/api/row() along with https://datatables.net/reference/api/cells() or https://datatables.net/reference/api/columns() . These functions can also be passed a string or array that contains th class of column/s you want.

If you want the raw data, add https://datatables.net/reference/api/data() to column or cell. If you want the rendered content, add https://datatables.net/reference/api/cell().render() to cell.

allan

Use row().data() to get the data for the row (which includes the hidden data).

Allan

JCR1951

Thanks Allan and Gordon.
Sorry for the lot of questions.
But I just started with datatables.
Now I have 1 scripts that can retrieve the hidden values.
And I have a script that knows on what column I clicked.
But I can't bring it together.

The part of retrieving the hidden values.

   oTable = $('#example').DataTable( );

    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        } else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');

            // Get the data from the selected row
       var d = oTable.row(this);
     
       var jqueryValue = $('#example tbody tr:nth-child(7) td:nth-child(3)').html();

       var selectorValue = oTable.cell('tbody tr:nth-child(7) td:nth-child(3)').data();

       var apiValueA = oTable.cell(d,9).data();
       var apiValueB = oTable.cell(d,10).data();
       var apiValueC = oTable.cell(d,11).data();

The column clicked

   oTable = $('#example').DataTable( );    
  
   $('#example tbody').on( 'click', 'td', function () {
    
  var col = oTable.cell( this ).index().columnVisible;
 

allan

I'm not actually sure what you are trying to achieve. What is your end goal?

Allan

JCR1951

In every row of the table I have 3 images (logo).
Facebook, youtube, website.
The links are in hidden columns.
If I click on the facebook logo the corresponding hidden link from facebook is fired and it opens the facebookaccount.
So it also with the youtube and website logo.
Now I can fire the hidden fields, but i have to know what column I was clicking.
The scripts do that but I can't take them together.

http://www.pctraverse.nl/DataTables-1.10.11/examples/server_side/simpleA.html

http://www.pctraverse.nl/DataTables-1.10.11/examples/server_side/simpleB.html

allan

Why not have the images in the links? Putting the links in hidden columns appears to just add complexity and would also hurt accessibility?

Having said that, perhaps you should add a class to each of the img elements so you can determine which one was clicked on?

$('#example').on( 'click', 'tbody td img', function () {
  var rowData = table.row( $(this).closest('tr') ).data();

  if ( $(this).hasClass( 'facebook' ) ) {
    window.location.href = rowData.facebookLink;
  }
} );

(modified to suit your needs of course).

Allan

JCR1951

I tried it your way Allan.
But with rowData I recieved an 'object Object'.
I have it running now with the hidden columns.
But there will be a better/more simple way.
So for learning the datables better, if you have the time.
Please make it better.
Thanks for the help!
It's great to work with datatables.

http://pctraverse.nl/DataTables-1.10.11/examples/server_side/simpleB.html

     oTable = $('#example').DataTable( );

    $('#example tbody').on( 'click', 'tr td', function () {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        } else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');

            // Get the data from the selected row
       var d = oTable.row(this);
     
       var jqueryValue = $('#example tbody tr:nth-child(7) td:nth-child(3)').html();

       var selectorValue = oTable.cell('tbody tr:nth-child(7) td:nth-child(3)').data();

       var apiValueA = oTable.cell(d,9).data();
       var apiValueB = oTable.cell(d,10).data();
       var apiValueC = oTable.cell(d,11).data();
       
      var col = oTable.cell( this ).index().columnVisible;
  
      if (col == 6)                  
     {var url = apiValueA;}
     if (col == 7)
     {var url = apiValueB;} 
     if (col == 8)               
     {var url = apiValueC;}
  
    var m = url.search("http");  
    if (m > -1)
    {
      window.open (url);
    }
     }          
    }); 
  
    });       

allan

But with rowData I recieved an 'object Object'.

Yes - its an object :-). Access its properties using rowData.name or rowData.address, etc.

Allan

jr42.gordon

You really don't need an event handler for what you are doing. Don't use an img but rather an anchor tag with fixed height and use 'background-image' to insert your image. Also add following to anchor tag so it opens a new window

target="_blank"

Here is some HTML and styling i used to achieve this.

// HTML
<a href="#" class="ui-icon plan_action ui-icon-folder-open" title="Open the Plan"></a>
// CSS
.ui-icon {
    cursor: default;
    display: table-cell;
    border: none;
    margin-left: 3px;
    height: 16px;
    line-height: 16px;
    clear: right;
    background-image: url(../images/jquery-ui/ui-icons_ebe6e6_256x240.png);
    float: left;
}

JCR1951

Thanks for the reply Gordon.
Now I place a link for the image in the database.
It change the image link whenever a member gives a link to facebook.
So it loads always the correct image.
If I do this in CSS the background image has to change if a facebook account is found.

Hope I find with the comments a more simple way....
I will try again the options...

JCR1951

I now have the other option from Allan. (But still the links hidden)

      table = $('#example').DataTable( );
    $('#example').on( 'click', 'tbody td img', function () {
    var rowData = table.row( $(this).closest('tr')).data();

    if ($(this).hasClass('facebook') && rowData.faceb != ""){
        window.open (rowData.faceb) = (rowData.faceb);
    }
    if ($(this).hasClass('youtube') && rowData.youtu != ""){
        window.open (rowData.youtu);
    }
    if ($(this).hasClass('website') && rowData.webs != ""){
        window.open (rowData.webs);
    }
    });

allan

That looks its probably the most elegant option available. Nice one (although line 6 looks odd).

Allan

JCR1951

I tried your window.location.href Allan. Even with target _blank.
The table window is replaced by the new window.
And you have to go back in browser to find the table window.
If you close the window the table is gone.
With window.open the window table is still under the new window.
So if you close the new window the table is still there.
I'm using Chrome browser. I don't know it is cross-browser.

allan

Yes - sorry, I haven't quite realised that you wanted it in a new window rather than in the current one. window.open is the correct method to use to open a new window.

Allan

JCR1951

I found a little trick for pointing my mouse on clickable pictures.

      { "render": function (data, type, full, meta) {
                        if(full.fotoA == "facebook-logo_bl.jpg")
                        {
return '<a href="#" onClick="return false;"><img class="facebook" src="'+full.fotoA+'"</a>';
                        }
                        else
                            {
       return '<img class="facebook" src="'+full.fotoA+'">';                                
                        }                       
                        }
                        }, 

jr42.gordon

Why show the image at all if it isn't going to be clickable? Seems it would only cause confusion on the user end.

JCR1951

That's also possible Gordon....
But in a table with lots of images, I think it's just confsusing when there
is nothing in a cell in the row.
But it can be changed, haha.
Thanks for your comment.