How to click on some columns for link

How to click on some columns for link

JCR1951JCR1951 Posts: 34Questions: 6Answers: 0

I'm using the simple serverside script.
I like to click on a facebooklogo in a column.
And then go to a facebook account.
In another column I have to click on a youtubelogo.
And then comes a youtube-video.
Is it possiible?

This question has an accepted answers - jump to answer

Answers

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49

    Absolutely, use https://datatables.net/reference/option/columns.render . In addition, you can also set https://datatables.net/reference/option/columns.data to null.

    Although i would put all of these icons in a single "Actions" column.

  • JCR1951JCR1951 Posts: 34Questions: 6Answers: 0

    [code]
    $(document).ready(function() {

    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/server_processing.php",
            "scrollY": 200,
            "scrollCollapse": true,
            "paging":         true,
    
    "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function (data, type, full, meta){
        return '<a href="'+data+'"><img src = "facebook-logo_zw.jpg"></a>'; 
    
    }
    }]
    
    } );
    

    [/code]

    Thanks for the fast reply.
    I tried this code.
    But the data still undefined.
    Even if I give the data a "http://www.facebook.com".

    And now with targets I cant call another colomn.

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49

    The "data" option is expecting a "download_link" variable in the json object being added to the row. So in this instance, what are you expecting the data value to be in the render function?

  • JCR1951JCR1951 Posts: 34Questions: 6Answers: 0

    The hrefs (http:www.facebook.com/...) are coming from the database.
    So I was thinking that info was enough...
    Sorry for my bad English...

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49
    edited May 2016

    Looking at this example, https://datatables.net/examples/server_side/object_data.html , notice how the Ajax data is formatted. So each columnDefs.data corresponds to a variable within returned Ajax data. So make sure the variable you assigned the href link to is "download_link".

  • JCR1951JCR1951 Posts: 34Questions: 6Answers: 0

    I did change it...at the serverside and the clientside.
    Please help me to find the solution now for the different column clicks.
    I'm still a beginner in these things.

    server_processing.php
    [code]
    $table = 'markers';
    $primaryKey = 'id';
    $columns = array(

    array( 'db' => 'name', 'dt' => 'name' ),
    array( 'db' => 'address',  'dt' => 'address' ),
    array( 'db' => 'lat',   'dt' => 'lat' ),
    array( 'db' => 'lng',     'dt' => 'lng' ),
    array( 'db' => 'type',     'dt' => 'type' ),
    

    );

    $sql_details = array(
    'user' => 'xxxxxxxxx',
    'pass' => 'xxxxxxxxxxxxxxxx',
    'db' => 'xxxxxxxxxxx',
    'host' => 'xxxxxxx'
    );

    require( 'ssp.class.php' );

    echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
    );
    [/code]

    simple.html
    [code]
    $(document).ready(function() {

    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/server_processing.php",
            "scrollY": 200,
            "scrollCollapse": true,
            "paging":         true,
    
            "columns": [
                        { "data": "name" },
                        { "data": "address" },
                        { "data": "lat" },
                        { "data": "lng" },
                        { "data": "type" }
                                    ]
    } );
    

    } );
    [/code]

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49

    Here is a basic example of what I am trying to explain http://live.datatables.net/darujobi/1/edit?js,output

  • JCR1951JCR1951 Posts: 34Questions: 6Answers: 0

    I copied your script for testing.

    There is an error.

    simple.html:92 Uncaught TypeError: data.each is not a function

    Thanks for your time!

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49

    haha yeah i figured as much. I use http://sugarjs.com/ which is an extension of Jquery library. You can either include that or change the .each() to a normal js loop.

  • JCR1951JCR1951 Posts: 34Questions: 6Answers: 0

    This works for me...

    Maybe you can help me to do this in a hidden column.
    And then click on the facebook logo (image) in the row to activate the hidden value in that row.

    [code]
    $('#example tbody').on( 'click', 'td', function () {
    var url = $(this).html().trim();
    var m = url.search("http");
    if (m > -1)
    {
    window.open(url);
    }

    });
    

    [/code]

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49
    Answer ✓

    Let me see if I understand you, you want to click on the Facebook logo (which is in a visible column), and that in turn fires a link in a hidden column?

    Also, your link example is firing way too many alerts. Seems like alerts are firing for each column in row.

  • JCR1951JCR1951 Posts: 34Questions: 6Answers: 0
    edited May 2016

    The new code gives all the values of the td's. Except the hidden fields.
    And it gives loops more and more, whenever I click a row.
    I started a new question.... There is more code..

    https://datatables.net/forums/discussion/35210/jquery-doesnt-take-hidden-td

This discussion has been closed.