Answers

• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  September 2022

  For the code snippet you supplied it is expected that you need a responsive table where if too many columns are shown for the page the some columns are hidden then shown with the plus sign. Is this what you are looking for?

  It sounds like you want something like this example. You can change the selector to the link column and instead of the alert place the data in the jQuery UI modal you want. For this solution you will need to create the jQuery UI modal.

  Kevin
• shawngibson Posts: 32Questions: 9Answers: 0

  September 2022

  Thanks, Kevin. That's half-correct. There are sometimes many columns to display, but the data of the "content" column itself is usually a full, HTML-formatted page of data, which is why it needs to be separated-out and focused-on only when needed, else the entire table appear unusably chaotic to a regular user.

  Think of it as being a link in a table cell which, when clicked, opens a PDF in a modal - that's what I need, visually, except instead of a PDF, it is the data in the "content" field of the current record which is displayed in the modal.

  Unfortunately, I am not very good at coding, so traversing a DOM in order to find an element and then know how to take that information and supply it to the innards of a modal when clicked...is beyond me.

  As a way of getting hopefully closer to solving my problem, in the JavaScript I provided above, is it possible to modify the code [var data = row. Data();] in such a way as to capture only the data of a particular column in the same row as where link is clicked?

  I'm currently studying the JavaScript in THIS EXAMPLE. If I can get it to work with my table(s) and show only the "content" column in the example's child display, I can (fingers crossed) combine that code with the original JQuery UI Modal code above and get it working with the JQuery UI Dialog or the UIKIT variation.

  I hope this response makes my needs clearer, and a coder might hopefully chime in with some much-needed expertise:)

  Merci,
  Shawn
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  September 2022

  in such a way as to capture only the data of a particular column in the same row as where link is clicked?

  Use cell().data(). Sounds like you want to display a modal. I don't think the Child Rows Details example is the way you want to go. I might be wrong but I think you will want a slight variation to the example I linked to. I made two changes to that example here:
  http://live.datatables.net/rakibobe/1/edit

  First it uses the selector 'tr td:nth-child(2)' to target a specific column. Then is uses cell().data() to get the data for that cell. You can change the alert() to a function that displays the modal with that data.

  Does this help or am I way off base

  Kevin
• shawngibson Posts: 32Questions: 9Answers: 0

  September 2022

  Not off base, definitely on base:) I can't get your link to work (404), but if those are the only two changes you made, I'll give it a go right now:)
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  September 2022 edited September 2022

  Your browser maybe changing http:// to https://. Try typing in http. Here is the code in case you still have problems with the link:

  $(document).ready(function () {
    var table = $('#example').DataTable();
  
    $('#example tbody').on('click', 'tr td:nth-child(2)', function () {
      var data = table.cell(this).data();
      alert('You clicked on ' + data);
    });
  });
  

  Imagine, from the example, that td:nth-child(2) is the Position column. Any click in that column will just show the position.

  Kevin
• shawngibson Posts: 32Questions: 9Answers: 0

  September 2022 edited September 2022

  (edit: I submitted this before refreshing the page to see you've already posted the code...Link is still 404 with https:// or https:// Doh!)

  This will hopefully amuse you lol:

  $(document).ready(function () {
      var table = $('#example').DataTable();
   
      $('#example tbody').on('click', 'tr td:nth-child(2)', function () {
          var data = table.cell( this ).data();
          //change this to "modal code" + data[0] where [0] is the correct column #
          alert('You clicked on ' + data[0] + "'s row");
      });
  });
  

  Am I even close lol?
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  September 2022 edited September 2022

  data[0]

  The cell().data() just returns the data for the cell where row().data(), in certain configurations, will return an array. So in the example with row().data() data[0] points to the name column. With cell().data() just us data. We cross posted so see my above answer.

  Kevin
• shawngibson Posts: 32Questions: 9Answers: 0

  September 2022

  I just added your code to a test table and played with the column positioning. It works a charm, executing the code (an alert with some preliminary text followed by the contents of the field in the appropriate record/row). I get it, this part, now:)

  Very excellent start. Now I can use the jQuery UI and UIKIT Documentation to convert the alert() to an appropriate "modal code" + data[_column_] setup.

  I'll also have to alter the original table._name_.js file so that it does not display the contents of that column/field, but instead shows the user some dummy text ("View Data" or such), similar to adding a functional link where it says "link" for each record, rather than showing the actual URL address.

  In that case, I think I would need to move your code from a document.ready initialization-type to being called when the link is clicked. I think that's how this goes lol...now back to the dungeon:)

  And thank you very much for your help, I feel stronger with the Dark Side today:)

  Shawn
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  September 2022

  it does not display the contents of that column/field, but instead shows the user some dummy text ("View Data" or such),

  You can use columns.render for this. Use orthogonal data to return "View Data"; for the display operation. See the [computed values section]https://datatables.net/manual/data/orthogonal-data#Computed-values() for an example.

  Kevin