Answers

• ajith.thula Posts: 1Questions: 0Answers: 0

  April 2017

  I am facing same issue. Any solution please let me know
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  April 2017

  Instead of simply appending d to select in this statement:
  select.append( '<option value="'+d+'">'+d+'</option>' )

  Some string manipulation would need to happen to extract the desired text from d and append that. Maybe using indexOf and substring to get just the text desired.

  Kevin
• data100 Posts: 3Questions: 1Answers: 0

  April 2017

  I did find a solution to this problem but don't have the time to post it right now. I will post the solution I came up with tonight.
• data100 Posts: 3Questions: 1Answers: 0

  April 2017

  My solution was not to use an <a> tag for links, but to use an onclick event. For the window location, you can link to an internal webpage or external webpage. For external webpage links, make sure you include http:// or https://. I then created a css classed called "looklikelink" which made the cursor change when the text was hovered over. My CSS for the "looklikelink" class is below:

  My HTML looked like this:

  <tr>
  <td>Example</td>
  <td class="looklikelink" onclick="window.location='html/mypage.html'">My page</td>
  <td>Example2</td>
  <td>Example3</td>
  <td>Example4</td>
  <td>Example5</td>
  <td>Example6</td>
  <td>Example7</td>
  </tr>
  

  My CSS to make the text act like a link:

  .looklikelink {
      color: #0048bc;
      text-decoration: underline;
  }
  
• HMark Posts: 3Questions: 0Answers: 0

  December 2019

  By any chance, does anyone have a full solution to this problem without using an onclick event? The a tag is required for me, I have no choice. But otherwise my problem is the same and I don't have an advanced knowledge of jQuery to create an indexOf and substring method without help.

  Thanks.
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  December 2019

  @HMark Assuming you have something like the above: <a href="londonOffice.html">London</a>

  You might be able to jQuery to get the text. Try changing the code in lines 84-86 above to something like this:

                      column.data().unique().sort().each( function ( d, j ) {
                          var textVal = $( d ).text()
                          select.append( '<option value="'+textVal+'">'+textVal+'</option>' )
                      } );
  

  Kevin
• HMark Posts: 3Questions: 0Answers: 0

  December 2019

  Thank you Kevin, it does work, however, I have some columns with a boolean result and it now breaks on those. Is there a way to say if d has a link tag than use this option? I am going to work on that. My apologies for what are probably basic solutions.
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  December 2019 edited December 2019

  You can use column().index() to get the column index or column().header() to get the column header. From these you can determine which column the options are being built and how to handle it.

  Example using `-api column().index():

  var index = column.index();
  if (index === 3) { .  // Column with href
      column.data().unique().sort().each( function ( d, j ) {
          var textVal = $( d ).text()
          select.append( '<option value="'+textVal+'">'+textVal+'</option>' )
      } );
  } else {
       column.data().unique().sort().each( function ( d, j ) {
           select.append( '<option value="'+d+'">'+d+'</option>' )
      } );
  }
  

  Or using the header info:

  var title = $(column.header()).text();  // Using jQuery .text() method to get column title
  if (title === 'myHrefColumn') { .  // Column with href
      column.data().unique().sort().each( function ( d, j ) {
          var textVal = $( d ).text()
          select.append( '<option value="'+textVal+'">'+textVal+'</option>' )
      } );
  } else {
       column.data().unique().sort().each( function ( d, j ) {
           select.append( '<option value="'+d+'">'+d+'</option>' )
      } );
  }
  

  Kevin
• HMark Posts: 3Questions: 0Answers: 0

  December 2019

  Thank you. I was able to implement the first solution successfully.
• geogan Posts: 1Questions: 0Answers: 0

  February 2020

  I wrote similar solution before seeing this using plain JS with no jQuery and using regular expression

              column.data().unique().sort().each( function ( d, j ) {
                  console.log(d);
                  var dplain = d.replace(/<a\b[^>]*>(.*?)<\/a>/i,"$1");
                  select.append( '<option value="'+dplain+'">'+dplain+'</option>' )
              } );
  

  I am having one problem though now. The resulting select list contains many duplicates because the unique() function still only sees the original data in the d columns which are non-unique HREFs. I don't know how to get unique to work on the modified d values, but I also don't want to actually modify the real d column values, which would make unique work correctly.
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  February 2020

  I don't know how to get unique to work on the modified d values

  Are you using columns.render to modify the values? If yes then use the solution of cells().render() in this thread.

  Kevin