Make a value clickable

hercross

Hi, I'm using Datatables. I get a values with AJAX, and show it. One of this fields are telephone number, and I'd like to make it clickable.

Now I have it works this way:

table = $('#db_contacts').DataTable({
      "destroy":true,
      "responsive":true,
      "ajax":{
        "method":"POST",
        "url":"../include/sql_contacts.php"
      },

      "select":{
        "style":"multi"
      },

      "order":[
        [1, "asc"]
      ],

      "columns":[
        {"data":"id_contacts"},
        {"data":"name"},
        {"data":"companie"},
        {"data":"tel_companie",
          "fnCreatedCell": function(nTd, sData, oData, iRow, iCol){
            $(nTd).html("<a class='call_tel_companie' style='color:blue;' href='javascript:void(0)'>"+oData.tel_companie+"</a>");
          }
        },
        {"data":"tel_direct",
        "fnCreatedCell": function(nTd, sData, oData, iRow, iCol){
            $(nTd).html("<a class='call_tel_direct' style='color:blue;' href='javascript:void(0)'>"+oData.tel_direct+"</a>");
          }
        },
        {"data":"mobile_ofi",
          "fnCreatedCell": function(nTd, sData, oData, iRow, iCol){
            $(nTd).html("<a class='call_mobile_ofi' style='color:blue;' href='javascript:void(0)'>"+oData.mobile_ofi+"</a>");
          }
        },
        {"data":"email_ofi"},
        {"defaultContent":"<a class='edit_contacts glyphicon glyphicon-pencil' data-toggle='tooltip' href='javascript:void(0)' tittle='Edit contact'</a> <a class='delete_contacts glyphicon glyphicon-remove' data-toggle='tooltip' data-placement='top' href='javascript:void(0)' tittle='Delete contact'</a>"}
      ],

      "columnDefs":[
        {
          "targets":[0],
          "visible":false,
          "searchable":false
        },
        {
          className: "text-center",
          "targets":[0,1,2,3,4,5,6,7]
        },
        {
          responsivePriority: 1, targets: 0
        },
        {
          responsivePriority: 2, targets: -1
        }
      ],
    });

This works, in tel_companie, tel_direct, mobile_ofi fields I can see a blue link number, and I can clicked.

The problem I have is when in one field I have two numbers.

I received the number via AJAX like this:

number1<br/>number2 and show in datatables in two rows inside the same row, like the photo.

When I click in one of thats numbers, I get number1<br/>number2<br/>...

I cannot know the number click.

How can I send only the number click?

Thanks

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

The best way to do that would be to use columns.render - see example here. You would need to also parse the string, strip out the <br> tags, and generate links on both the numbers - but that would all be done within the columns.render function,

Colin

hercross

Hi, thanks for answer to me..

I've tried that, this way:

{"data":"telefonos",
         "render":function(data, type){
          var brExp = /<br\s*\/?>/i;
          var oData = data.split('<br/>');
          if(oData.length > 1){
           for(var i=0; i<oData.length; i+=1){
            return '<a class="call_telefonos" style="color:blue;" href="javascript:void(0)">'+oData[0]+'</a>';
           }
          }else{
           return '<a class="call_telefonos" style="color:blue;" href="javascript:void(0)">'+oData+'</a>';
          }
         }
        },

But when I click the phone number, always return me number1<br/>number2<br/>..

What are I doing wrong?

Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

hercross

Hi, sorry for delay...

I've tried to make a sample, but I don't know how is it..

I have this:

http://live.datatables.net/zejoqata/1/

In "telefonos", I don¡t konw how show you, I have 123456<br/>98765<br/>

And with:

{"data":"telefonos",
         "render":function(data, type){
          var brExp = /<br\s*\/?>/i;
          var oData = data.split('<br/>');
          if(oData.length > 1){
           for(var i=0; i<oData.length; i+=1){
            return '<a class="call_telefonos" style="color:blue;" href="javascript:void(0)">'+oData[0]+'</a>';
           }
          }else{
           return '<a class="call_telefonos" style="color:blue;" href="javascript:void(0)">'+oData+'</a>';
          }
         }
        }

I've tried to separate each number in a new line, but no works..

And when I clicked in the number, I get: 123456<br/>98765<br/>

I don't get click number.

I have this when I click the number:

$(tbody).on('click','.call_telefonos',function(){
      var data = table.row($(this).parents('tr')).data();
      alert(data.telefonos);
}

What am I make wrong??

Thanks

colin

I'm not clear what you're trying to do - that click code isn't in the test case provided. Please can you provide a test case reproducing the issue you want help, with steps on how to reproduce, and explaining what you would prefer to happen instead,

Colin

kthorngren

I'm not clear what the issue is but this block of code doesn't seem correct:

           for(var i=0; i<oData.length; i+=1){
            return '<a class="call_telefonos" style="color:blue;" href="javascript:void(0)">'+oData[0]+'</a>';
           }

You have a return statement inside the for loop. Are wanting something like this?

           var html = '';
           for(var i=0; i<oData.length; i+=1){
            html += '<a class="call_telefonos" style="color:blue;" href="javascript:void(0)">'+oData[ i ]+'</a>';
           }
           return html;

Note the oData[ i ] in line 3.

If you still need help please update the test case to show what you have so we can see the problem and offer suggestions.

Kevin

hercross

OK, sorry, I didn't know how can I shared you the exmple, now yes, I think....

I have this:
http://live.datatables.net/dapunoti/6/

In that example, you can see 4 columns in the number three, I have phones number. In the first row I get the phone numbers like 12345<br/>9876<br/>, and with render I can put in 2, 3.... lines, perfect!! thanks...

Now the problem.

I've made that phone numbers like a link, when I click that link, is where I hace the problem.

If I click in the second row, I get 12345, perfect.
If I click in the firts row, It doesn't matter if I click in the first number or the secodn, I always get 12345<br/>9876<br/>.

The question is, how can I get the number clicked? If I click in the first number, get 12345..

Is it possible?

Thanks

P.S: I don't know Why don't work when I click in the number, in this example, but in my code works..

kthorngren

There were two issues with the test case. First this error:

Uncaught ReferenceError: table is not defined

Had to assign table like this:

var table = $('#example').DataTable({

Next is the table ID needs to be prefixed with # for the click event handler, like this:

lanzar_llamada('#example', table);

how can I get the number clicked?

Use standard jQuery methods to get the attributes of the element clicked, like this:

var text = $(this).text();

Here is the updated test case:
http://live.datatables.net/sukemabe/1/edit

Kevin

hercross

Uncaught ReferenceError: table is not defined

Sorry, copy/paste fails...

var text = $(this).text();

Perfect!! Works great!!

Thank you so much..