When I click on second row or third row, it always show me the the values of the first row

When I click on second row or third row, it always show me the the values of the first row

vitor.mipvitor.mip Posts: 10Questions: 0Answers: 0
edited August 2023 in Free community support

Dear friends,
I have a database with 4 records that is linked to the datatable. When I click on the second or third line os datatables it always show me the values ​​of the first line. But if I filter by number of records to 1, the pagination increases (of course). In this case, if I choose page two or three, etc, it already works fine. It just doesn't work when it's filtered to show all records in the datatable.
I hope you can help me.

I'm using HTML, Thymeleaf, Java, Spring Boot.

Imagem Manuscrito Descrição Acções
![](https://datatables.net/forums/uploads/editor/lz/2ym4639hvo8y.png "") ![](https://datatables.net/forums/uploads/editor/6n/ojbz2ajplm0m.png "")


Replies

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

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

    Allan

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

    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?

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

    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.mipvitor.mip Posts: 10Questions: 0Answers: 0

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

    Thanks kthorngren

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

    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.mipvitor.mip Posts: 10Questions: 0Answers: 0
    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

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

    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.mipvitor.mip Posts: 10Questions: 0Answers: 0

    I already convert the video to mp4.

    Please, take a look.

    [Video]
    https://mega.nz/file/39JjRDQZ#fE3l7OAQQjuEqpsLVr0MNnwEJNZ0k7A77jF8Zbs2s4M

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

    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.mipvitor.mip Posts: 10Questions: 0Answers: 0
    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

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

    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.mipvitor.mip Posts: 10Questions: 0Answers: 0

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

    Thank you very much Kevin

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

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

    A big hug from Porto (Portugal)

    Vitor Pinto

Sign In or Register to comment.