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

vitor.mip

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
Sair da visualização do manuscrito		 

allan

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

Allan

vitor.mip

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

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

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

Thanks kthorngren

vitor.mip

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

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

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

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

I already convert the video to mp4.

Please, take a look.

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

kthorngren

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

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

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

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

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

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

A big hug from Porto (Portugal)

Vitor Pinto