Phone number column click to call

Lezamiz Media

Hi Folks,

Test case:
http://live.datatables.net/ravuzepi/11/edit

Again, I know I should know this, but something's not making sense to me. The order of the javascript most likely.

I have a column named, "Phone".
I want all the data in that column to be clickable. Back story is that some of the users Iphones don't offer the Call option when highlighting a phone number. 1 iphone works just fine, but I'm not an Iphone guy. Android works fine.

Anyway, I found some code here:
https://datatables.net/forums/discussion/63244/telephone-field-to-make-calls

It looks like:
{
data: "tb_contacto.telefonoFijo",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="tel:' + data + '">' + data + '</a>';
}
return data;
}
},

If I take out the tb_contacto.telephonoFijo and replace it with Phone, the page stops loading. I'm using SSP.
I know what's happening here, the href is prefixing the data in the column with tel:
But I'm not sure about the other stuff. Rendering a display of html code?

Anyway, I've got that code and replace it with phone, I get this:
SyntaxError: Unexpected token '{'
So I do a process of elimination and take out the first { and the last } and the ,
Still nothing. Wash, rinse, repeat.

Any ideas how I can make that last column clickable?

Thanks in advance for lending me your knowledge.
Chris

kthorngren

Since you are using DOM sourced data and your ajax url doesn't work I turned of ajax and serverSide. You need to move the code for rendering the phone number as a link inside the columnDefs array. You also need to remove data: "Phone" since you have DOM sourced data. Use-option columnDefs.targets` to point to the Phone column. I updated the example:
http://live.datatables.net/ravuzepi/12/edit

Kevin

Lezamiz Media

Thanks Kevin! I have a note now on what to turn off when I make a test case. Very much appreciated!

Lezamiz Media

Hi Kevin,

http://live.datatables.net/ravuzepi/12/edit

Unforseen issue that I should've seen coming.
How to compensate for null?

I'd like to have blank for anything that shows up as null anyway. But I've tried several ways of:
{ data: null,
defaultContent: ' ',
}
as you outlined here:
https://datatables.net/forums/discussion/70733/how-to-put-empty-values-in-data-parametr

variations of:

{"data":6,"defaultContent":"null","searchable":false},

So to future proof this, is there a way to have any of the columns, even ones that I might add in the future, if the data is blank, show a blank instead of null?

kthorngren

So to future proof this, is there a way to have any of the columns, even ones that I might add in the future, if the data is blank, show a blank instead of null?

Use columnDefs with columnDefs.targets set to "_all", like this example:
http://live.datatables.net/pixeyape/1/edit

If you have null data in a column using columns.render you will need to use an if statement and if the data is null return an empty string otherwise return the rendered data.

Having null in the data should result in an empty cell. Here is the updated example without columns.deefaultContent. You still need an if statement if using columns.render.

Kevin

Lezamiz Media

Hi Kevin,
Thanks for your help.

I've got "Not set" showing up in most places. But when I go into mysql and remove the null and just have it blank, the blank doesn't seem to be replaced with not set.
This doesn't seem to replace the blank (live.datatables example) in the address field, email, or the phone in the first row, for example:

         {
        targets: '_all',
        defaultContent: '<i>Not set</i>'
         },

http://live.datatables.net/ravuzepi/14/edit

So, if it's not apparent already, I have no idea what I'm doing.
And in that case, I may not be using the correct words.
When I say null, it's literally saying null, it's not blank. The hyperlink shows up as Tel:null.
In the mysql table, it also says null, it's not blank.
I may have set up the mysql tables incorrectly too. I wouldn't put it past myself.

So, I'm still having trouble with the if statement using columns.render.

    {
        //data: "null",
      targets: '_all',
        "render": function(data, type, row, meta){
            if(type === 'display'){
                data===null;
              return ' ';
        }
    }
    },

I found this, but it's not an if statement:
https://datatables.net/forums/discussion/26587/html-table-as-data-source-and-data-null-column

{
    "data": null,
    "render": function ( data, type, full, meta ) {
        return ' ';
    }
},

I've looked at:
https://datatables.net/reference/option/columns.render and trying to imagine how I can put any of that into an if statement boggles my little mind.

Tried variations of the first example here too:
https://datatables.net/reference/option/columns.defaultContent

$('#contact-detail').dataTable( {
"columns": [
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    {
      "data": "Phone", // can be null or undefined
      "defaultContent": "<i>Not set</i>"
    }
  ],
  } );

I'm probably doing all of this wrong because I'm the typical "hacker" cutting and pasting rather than actually learning. Sorry. So, if you can help me get datatable to show a blank (or Not Set), I'd greatly appreciate it.

So again, I can't thank you and Colin and Alan enough. This datatables thing is working WAY better than I ever could've imagined. We were having such trouble with Google Sheets that things were just being deleted left and right that I had to start thinking about how to give certain people access to read the data, but not edit it. Putting it on the web seemed the most logical (we're using userspice too) since they'll be reading this from the field on cell phones, this is perfect! So again, thank you guys.

Chris

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

allan

            data===null;
          return ' ';

The first line there doesn't do anything. It will evaluate, but it isn't an if condition so it is the same as writing true; on its own line.

You would really want:

if (data === null) {
  return ' ';
}

return data;

The example you linked to is kind of a special case, since there is no null data there - it is DOM sourced, so it can be empty string, but never null.

Here is the example updated to allow for null or empty string data in the renderer.

Allan

Lezamiz Media

Hi Allan,

Sorry, I'm not seeing where in the following example it allows for null or empty.
http://live.datatables.net/ravuzepi/15/edit

Let me see if I can do the syntax highlighting:

```js{
//data: "Phone",
targets: [9],
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="tel:' + data + '">' + data + '</a>';
return data; // Need to return the disaply data
console.log(data)
}
return data;
}
},
'''
I tried:
'''js {
targets: '_all',
defaultContent: '<i>Not set</i>',
if (data === null) {
return ' ';
}

return data;
},
'''

and tried:
'''js {
//data: "Phone",
targets: [12,14],
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="tel:' + data + '">' + data + '</a>';
return data; // Need to return the disaply data
console.log(data)

        }
        return data;
    if (data === null) {

return ' ';
}

return data;

    }
},

...

and...
'''js {
//data: "Phone",
targets: [12,14],
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="tel:' + data + '">' + data + '</a>';
return data; // Need to return the disaply data
console.log(data)

        }
        return data;


    }
    if (data === null) {

return ' ';
}

return data;
},
'''

Thanks for your help. Obviously, because of where I'm placing the code, I don't understand the code. I'm an English as a Second Language teacher and totally get what it's like being on the other side of someone saying "Ball big red".
Chris

Lezamiz Media

Ok, need to figure out the syntax highlighting. So very sorry.

Lezamiz Media

Hi Allan,

I took the columnDefs section from your example and it does work. I still would like to learn where in that section did I make the mistake. I'm thinking it's with all of the {} and [] and commas and such.

Thanks,
Chris

Lezamiz Media

Hi Allan,

Ok, ran the whole thing past the bosses and they wanted to change the order of the columns. Just kill me now these people can't make up their mind on anything.

Made the changes and now we're back to null being in the phone columns.

Also, I don't understand why, when we're doing columnDefs, targets _all with defaultContent, then what would make the difference in the order of the columns? I don't see it in the code where the render is targeting specific columns, so...what am I missing?

ssp:
array( 'db' => 'rider', 'dt' => 0 ),
array( 'db' => 'address', 'dt' => 1 ),
array( 'db' => 'city', 'dt' => 2 ),
array( 'db' => 'price', 'dt' => 3 ),
array( 'db' => 'MLS', 'dt' => 4 ),
array( 'db' => 'status', 'dt' => 5 ),
array( 'db' => 'showinginstructions', 'dt' => 6 ),
array( 'db' => 'contact1', 'dt' => 7 ),
array( 'db' => 'Phone', 'dt' => 8 ),
array( 'db' => 'contact2', 'dt' => 9 ),
array( 'db' => 'Phone2', 'dt' => 10 ),
array( 'db' => 'notes', 'dt' => 11 ),
array( 'db' => 'owner', 'dt' => 12 ),
array( 'db' => 'ownercarry', 'dt' => 13 ),
array( 'db' => 'freeandclear', 'dt' => 14 ),

I'm so confused.
Can someone take a look?

http://live.datatables.net/ravuzepi/16/edit

kthorngren

now we're back to null being in the phone columns

You have the string 'Null' in HTML. Since its in HTML its a string as HTML doesn't have the concept of Null like Javascript and JSON.

You are getting this error in the console which is causing Javascript to stop processing resulting in the Datatable not completing the initialization:

Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')

Note that None of the Datatables elements, like search and paging, and formatting isn't there. The problem is your last 3 rows of data are missing the last column in HTML. I updated the test case to add the last column:
http://live.datatables.net/becavoha/1/edit

Kevin

Lezamiz Media

Hi Kevin,

Oh the data in the html side is there because I wanted to point it out. It's not really there in the actual html on the server.

For the rows, they're all there on the server. I'm using ssp so it's difficult for me to make that into an html table for the test case. But ya, it's fixed now but still showing blanks in some columns, "Not Set" in others, and Null in the phone number column.

All I did was move the columns in a different order, it was only showing the blanks in some area and not set everywhere else. Null was fixed after Allan got ahold of it.

We can live with the blanks because we'd rather have blanks if nothings in there anyway, or not set which is fine.

But the null thing won't do.

Can you help?

This makes the most sense to me, but I don't know where to put it:
if (data === null) {
return ' ';
}

return data;

Thanks in advance,
Chris

kthorngren

To build a test case use the browser's network inspector tool to get an example of the data causing the problem from the XHR > Response tab. You can convert this to Javascript data and similar to this example I initially posted:
http://live.datatables.net/pixeyape/1/edit

I updated the test case to show how to use columns.render to return Not Set for all columns if the data is either null or an empty string.
http://live.datatables.net/pixeyape/3/edit

Kevin

Lezamiz Media

Hi Kevin,

Ok. That works and I see how you did it. Now I have to try to combine that with:
{
//data: "Phone",
targets: [8,10],
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="tel:' + data + '">' + data + '</a>';
return data; // Need to return the disaply data
console.log(data)
}
return data;
}
},

I've added the phone column to the example:
http://live.datatables.net/pixeyape/3/edit

I'll be trying this all day on my side. I'll check back here from time to time to see if you get it before I do.

kthorngren

Do you have a link to the updated test case?

Basically just add an if statement like this:

if(type === 'display'){
  if ( data === null || data === '' ) {
    data = 'Not Set';
  } else {
    data = '<a href="tel:' + data + '">' + data + '</a>';
  }
return data; // Need to return the disaply data

Kevin

Lezamiz Media

Yep. You got it before me.
I was thinking I had to do an if else, but was having trouble building the structure.

I think that's it. I'll run this by the bosses again and hopefully this will be the end of this saga.

Thank you Allan, Kevin, and Colin!

Chris