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

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

koniahinkoniahin Posts: 186Questions: 39Answers: 7

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.

Answers

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

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

    Kevin

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7
    edited March 2023

    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.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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".

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7
    edited March 2023

    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.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

Sign In or Register to comment.