Select problem when use datatables with modal

MintAces

I have a datatable in modal will load data onclick of buttons (with others json url)

The problem is my datatables just work fine if the time i open it is odd (1, 3, 5, ...) With the even time i open it (2, 4, 6, ...) the select function (multiple row select) doesn't work and i do not know why

Test case 1:

1. I click on a button to open modal have my datatable (Select function working)
2. I close that modal
3. I click on that button again (open modal with same datasource)
   -> The select function not work
4. I closed the modal and reopen it
   -> The select function working

Test case 2:

1. I click on button1 to open modal have my datatable (Select function working)
2. I close that modal
3. I click on button2 to open modal (with another datasource)
   -> The select function not work
4. I closed the modal and reopen it
   -> The select function working

My html

<!-- Modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="candidateEventModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Candidates of event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <b>Change status of candidates in this event</b>
                <br>
                <div class="btn-group btn-group-toggle mb-3" data-toggle="buttons" id="statusButtons">
                    <label class="btn btn-success">
                        <input type="radio" value="passed" name="status" autocomplete="off"> Passed
                    </label>
                    <label class="btn btn-danger">
                        <input type="radio" value="failed" name="status" autocomplete="off"> Failed
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" value="active" name="status" autocomplete="off"> Active
                    </label>
                    <label class="btn btn-warning">
                        <input type="radio" value="drop-out" name="status" autocomplete="off"> Drop-out
                    </label>
                    <label class="btn btn-light">
                        <input type="radio" value="cancel" name="status" autocomplete="off"> Cancel
                    </label>
                    <label class="btn btn-info">
                        <input type="radio" value="done" name="status" autocomplete="off"> Done
                    </label>
                </div>
                <div class="card mb-3" style="display: block;" id="divECTable">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="display table table-bordered" id="eventCandidateTable">
                                <thead>
                                    <tr>
                                        <th colspan="5">
                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <i id="courseCode">Course Code</i>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th>C-ID</th>
                                        <th>Candidate Name</th>
                                        <th>E-ID</th>
                                        <th>Updated date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <tr>
                                            <th>C-ID</th>
                                            <th>Candidate Name</th>
                                            <th>E-ID</th>
                                            <th>Updated date</th>
                                            <th>Status</th>
                                        </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer small text-muted">Updated </div>
                </div>
            </div>
        </div>
    </div>
</div>

My JavaScript

var table1 = $('#eventCandidateTable').DataTable({
            destroy: true,
            ajax: {
            url: 'http://localhost:8084/api/candidateEvent/all',
            dataSrc: ''
            },
            "columnDefs": [ 
                {"targets": 0, "data": "candidateID",   "width": "10%"},
                {"targets": 1, "data": "candidateName", "width": "20%"},
                {"targets": 2, "data": "idEvent",       "width": "15%"},
                {"targets": 3, "data": "updateDate",    "width": "15%"},
                {"targets": 4, "data": "status",        "width": "20%"}
                ]
        });
        // Select function
        table1.on( 'click', 'tr', function () {
            $(this).toggleClass('selected');
        } );

colin

Hi @MintAces ,

Those test cases would be most useful if you could link to your page or set up a test environment on http://live.datatables.net ,

Cheers,

Colin

MintAces

Thanks @colin ,
I'm trying to do what you said, but my code include some cdn, so it's little hard to do it

MintAces

Here is video about my problem
https://www.youtube.com/watch?v=MHLHqZNyvrw&list=WL&index=3&t=0s

Note:
1. I'm at company and do not have software to capture my screen.
2. The video has just uploaded, it's gonna need some time to have full HD

colin

Thanks, but the video doesn't really help - we'd really need to see the problem so we can use diagnostic tools on it. We don't need your entire environment, just the minimal configuration that demonstrates the issue.

Cheers,

Colin

avanthikam

Hi @MintAces. I'm also facing the same problem. Any solution to this ?

kthorngren

@avanthikam It doesn't look like the OP is using the Select Extension but their own code for selecting rows. You can try the Select Extension or, if you want your own event, use event delegation as shown in this example.

If you need help with this please provide a link to your page or a test case replicating the problem so we can help debug.

Kevin