Replies

• allan Posts: 61,934Questions: 1Answers: 10,155 Site admin

  August 2023

  Happy to take a look at a test case showing the issue.

  Allan
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023

  Thanks Allan.

  The issue is very simple to understand.
  If I filter to show only 1 record in datatable, I click in image and show what I want.
  But, if I filter to show all the records, I click, for example in image 3, however instead to show the details of the image 3, no, shows only always the details of the image 1.
  Can you help me?
• kthorngren Posts: 20,408Questions: 26Answers: 4,789

  August 2023

  The problem description is easy to understand. Without seeing your code to understand how you are filtering, etc its impossible to offer suggestions. Screenshots are not enough to debug issues. If you can't link to a running test case showing the issue then at least post the relevant code. If we don't see anything obvious then we will still need a link to a test case to debug the problem.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023

  It's true, you're absolutely right.
  I'll post the code on the link you gave me.

  Thanks kthorngren
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023

  Source Code
  [HTML]
  https://mega.nz/file/DgQx2JCS#T7eG9tANyzCQi40dNmZVxZTd1lnSmZ6HwQI1x5H9nZU
  [Controller]
  https://mega.nz/file/y5IHGQIb#9rflEkdRh3Kcgy6ER6nniYCpe3S2sRDRecvgQ_fwkOY
  [Model]
  https://mega.nz/file/7pQz1ZyA#B7Upc3Ijdo-YrszozSkBS99P5Q5HBn-xe-OAdA4-AWU
  [Repository]
  https://mega.nz/file/H9gzUbAT#Ilhz2mw31D7wk3sDgnnUwG37l21FvgeK4XUuZUfVjbU
  [Service]
  https://mega.nz/file/fwpRRLbb#fhX-y72upsRm-aiUggJNrSRT085yV9og-u6e7erJ_Zo
  [ServiceIMP]
  https://mega.nz/file/H1wTDLjJ#ThzFXQ5fZ7_u8eDrLqCHkswHE9r2SaI7kXwjER5wpyY
  [DataTable JS]
  https://mega.nz/file/Shh1xSaS#Au4Ru6B4dE2ytOFUqJvXNxYgYNzf2I4oxrntl2yDTx4
• kthorngren Posts: 20,408Questions: 26Answers: 4,789

  August 2023

  I looked at the HTML code and DataTable JS code but don't see how you are filtering nor your image click event. The other code seems like its server side code. Please point us to where the code is and how it works.

  Maybe the problem is when filtering you aren't using Datatables APIs to filter and update the data. If you are updating the HTML table directly then Datatables won't know about the changes. See this FAQ.

  Can you build a simple test case that shows the problem?

  This example shows one way to use click events to get the row data or cell data.

  Kevin
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023 edited August 2023

  Hello Kevin!

  To explain better a make for you a video to show the issue.
  With the code above I think you can understand what is the problem.

  [Video]
  https://mega.nz/file/Dh5FTTxT#NvN9_vHES_z0rPZuKa3HdPhY25ie3WA2zG5VVDEu7U4

  Meanwhile, I'm going to do the code without using the DataTable.
  Vitor Pinto
• kthorngren Posts: 20,408Questions: 26Answers: 4,789

  August 2023

  With the code above I think you can understand what is the problem.

  I understand the problem. The video doesn't play for me. What I don't understand how you are filtering and what the click event handler is doing because I don't see the code for it. If you want to point out where this code is in the above we can take a look.

  Kevin
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023

  I already convert the video to mp4.

  Please, take a look.

  [Video]
  https://mega.nz/file/39JjRDQZ#fE3l7OAQQjuEqpsLVr0MNnwEJNZ0k7A77jF8Zbs2s4M
• kthorngren Posts: 20,408Questions: 26Answers: 4,789

  August 2023

  Yes, when you have the page length set to one you can click on the image and get the correct data. But if the page length is greater than one you always get the first image. I understand that. To help we will need to see the code click event handler code. Please post this code. I pointed to this example which is the recommended way to create a click event handler with Datatables.

  Kevin
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023 edited August 2023

  Thank you for your reply.
  The only answer I can give you is in the HTML file. I can't publish code here. Please see:
  img th:src="@{${manu.nomeficheiro}}" width="100" height="150" alt="" data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false"

  I'm sorry, I can't publish the open and close tags simbols
• kthorngren Posts: 20,408Questions: 26Answers: 4,789

  August 2023

  I'm sorry, I can't publish the open and close tags simbols

  Use Markdown to format the code. See this note at the bottom of the Leave a Comment input

  Posts are formatted using Markdown. To highlight code, please use triple back ticks (```) on new lines before and after the code block.

  You have this:

                                  <td>
                                      <div>
                                          <a data-title="Visualização do Manuscrito" >
                                          <img th:src="@{${manu.nomeficheiro}}" width="100" height="150" alt="" data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false"/>
                                          </a>
                                      </div>
  
                                      <div  class="modal fade"
                                            id="exampleModal"
  

  Your code shows only one row. Are you using the same id for each row? If so this will not work as the id attribute is to be unique on the page. Only the first on the page will be found.

  Kevin
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023

  Thanks to your feedback, I solved the issue.
  I forgot to include the ID for all the rows

  Thank you very much Kevin
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023

  Kevin, look at line 4 and 7. The "Id" field make all diference, because I forgot that, so, and I don't understood what was the issue. Thanks to you, when you mean "Id" in you feedback, I think to my self: "I don't believe... I forgot to declare the "Id".
  Right now, work like a charm!

  Thanks Kevin

  <td>
          <div>
              <a data-title="Visualização do Manuscrito" >
                 <img th:src="@{${manu.nomeficheiro}}" width="100" height="150" alt="" data-toggle="modal" th:attr="data-target='#mostramanuscrito'+${manu.id}" data-backdrop="static" data-keyboard="false"/></a>
             </div>
                   
       <div  class="modal fade" th:attr="id='mostramanuscrito'+${manu.id}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog">
             <div class="modal-content">
                   <div class="modal-body">
                       <iframe allowfullscreen="allowfullscreen"
                                    scrolling="no"
                                    lass="fp-iframe"
                                    style="border: 1px solid lightgray; width: 100%; height: 510px;"
                                     th:src="@{${manu.heizine_slide}}">
                           </iframe>
                     </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Sair da visualização do manuscrito</button>
         </div>
        </div>
       </div>
      </div>
  </td>
  
• kthorngren Posts: 20,408Questions: 26Answers: 4,789

  August 2023 edited August 2023

  Great, glad its working and thanks for sharing your solution. Sometimes it just takes an extra set of eyes to see the problem.

  Kevin
• vitor.mip Posts: 10Questions: 0Answers: 0

  August 2023

  A big hug from Porto (Portugal)

  Vitor Pinto