How do you use render in table view to set up 2 data items as a link?

koniahin

This is somewhat related to https://datatables.net/forums/discussion/50576/how-do-you-add-custom-code-in-a-cell#latest which is closed.

I have this code:

  {
    data: null, render: function ( data, type, row ) {
      return '<a href="data.articles.link" target="_new">data.articles.faq_link_title</a>';
    }
  },

The table is articles and the two fields are articles_link and faq_link_title. The idea is to allow a pretty link title to display and link to the defined link. What it is doing is showing the title as "data.articles.faq_link_title" and similar for the URL.

kthorngren

You are trying to insert variables within the string. You will need to do something like this:

return '<a href="' + data.articles.link + '" target="_new">' + data.articles.faq_link_title + '</a>'

Kevin

koniahin

Thanks,

 { 
    data: null, render: function ( data, type, row ) {
      return '<a href="' + data.articles.faq_link + '" target="_new">' + data.articles.faq_link_title + '</a>';
    }
  },

I updated the line to the above. It returns a processing error and does not load the page.

kthorngren

Could be a syntax error. Look in your browser's console. I may have misplaced a single quote.

Kevin

koniahin

It is working, sort of. I had an extra column enabled that was causing it to fail. Sort of I said.

If I enter anything in the search field it is returning an error in a js popup:

DataTables warning: table id=tasks - Unknown field: (index 10)

If I display a simple data field search works fine.

{ data: "articles.faq_link" },

there is no error.

kthorngren

Hmm, I've never seen that error. Its hard to say why searching would cause the error. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

koniahin

It is a restricted access page, but you can to it by following a couple steps.

Visit https://www.smokeymo.xyz
Select Account --> Register and sign up
It will send an email - ignore it - we need to fix that.
Add a note here referencing who you signed up as (not your full email here).
Providing not a spammer I will update your access level and notify you.
Then you can sign in and under the DTE menu select "Faire".

allan

That error will happen if you are using server-side processing with our PHP libraries for Editor and you attempt to sort on a column which does not have a data point assigned to it.

Specifically you have:

data: null

And are using a client-side renderer to display the data, so the server has no way to know what data it should sort on when sorting on the column.

The article title probably makes most sense, so use:

{
  data: 'articles.faq_link_title',
  render: function ( data, type, row ) {
    return '<a href="+'row.articles.link+'" target="_new">'+data+'</a>';
  }
},

Note the use of row in the rendering function, since data would now point to the title - i.e. row.articles.faq_link_title === data in that function.

Allan

koniahin

When I change to the following it errors when running 'npm run dev' and the page does not load.

  {
    data: articles.faq_link_title,
    render: function ( data, type, row ) {
      return '<a href="+'row.articles.faq_link+'" target="_new">'+data+'</a>';
    }
  },

When I run laravel's npm run dev it errors pointing to the word 'row' of row.articles.faq_link.

kthorngren

return '<a href="+'row.

There is a typo in the code "+'r should be "'+r. The ' and '+' need to be swapped.

  data: articles.faq_link_title,
  render: function ( data, type, row ) {
    return '<a href="'+row.articles.faq_link+'" target="_new">'+data+'</a>';
  }
},

Kevin

koniahin

The original problem was failing with Search, then you mentioned Ordering which I had not tested. That clued me. I updated the code to:

  {
    data: null, 
    render: function ( data, type, row ) { 
      return '<a href="' + data.articles.faq_link + '" target="_new">' + data.articles.faq_link_title + '</a>';
    },
    orderable: false, searchable: false,
  },

This now works.

koniahin

I will need to check the typo thing to see if that works too. The important thing is that we have at least one workable solution.

koniahin

So I checked. Correcting the typo npm run dev runs successfully but the page loads with no rows.

  {
    data: articles.faq_link_title,
    render: function ( data, type, row ) {
      return '<a href="'+row.articles.faq_link+'" target="_new">'+data+'</a>';
    }
  },

For now, I'm happy that we have a working solution.