Datatables Delete button is not working on other pages except first

Question

I am using datatables. I have action column in the table in which one delete button and i am using ajax post function to delete any row. But Delete button is only working on the first page. It is not working on other pages. Here is my delete button.

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
    <tr>   
        <th>#</th>
        <th class="col-md-5">Resource Person</th>
        <th class="col-md-4">Title/Topic</th>
        <th> Date </th>
        <th>Actions</th>
    </tr>
</thead>
<tbody>
    <?php 
    $sql = "SELECT * FROM seminar";
    $result = $con->query($sql);

    if ($result->num_rows > 0) {
                                    // output data of each row
        $count = 1;
        while($row = $result->fetch_assoc()) { ?>
        <tr>
            <td><?= $count ?></td>
            <td><?= $row['person'] ?></td>
            <td><?= $row['topic'] ?></td>
            <td><?= $row['date'] ?></td>
            <td>
                <button class="btn btn-danger delete_seminar" value="<?php echo $row['id'] ?>"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                <button class="btn btn-info" onclick="location.href = 'addRecord.php?id=<?php echo $row['id'] ?>';"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
            </td>
        </tr>
        <?php $count++; }

    }else{
        echo "<tr><td colspan='5'><center>No Record Found</center></td></tr>"; 
    }
    ?>

</tbody>

And my jquery function.

$('#example').DataTable();    
$(function() {
        $(".delete_seminar").on('click', function(event) {

            if (confirm("Are you sure?")) {
                var data = $(this).val();
                $.post('requests/seminars.php', {delete_sem: data}, function(data) {
                    if (data == "delete") {
                        location.reload();
                    }else{
                        alert(data);
                    };

                });
            }

        });    
    })

I don't know how to resolve this problem. Please help me to come out from this problem.

try: `$(document).on('click', ".delete_seminar", function(event) {...});` Your button isn't in the DOM if it's not on the first page so you need to add the event listener to the document. — annoyingmouse, Mar 15 '16 at 08:12

score 1 · Answer 1 · answered Jan 01 '18 at 07:17

1

You must edit your javascript like below

$(document).on('click', '.delete_seminar', function(e){..});

answered Jan 01 '18 at 07:17

RokiDGupta

181
1
5
13

Datatables Delete button is not working on other pages except first

1 Answers1