javascript - 我的编辑/删除按钮在表格上的下一页等其他页面上不起作用。它只适用于有 10 个数据条目的第一页

Question

我的编辑和删除查询仅适用于数据表的第一页，但不适用于第二页。我正在使用 ajax 和 jquery。谢谢你帮助我。这是代码：

        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">Product Info</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $i = 1;
                            $prod = $conn->query("SELECT * FROM product_list order by id asc");
                            while($row=$prod->fetch_assoc()):
                            ?>
                            <tr>
                                <td class="text-center"><?php echo $i++ ?></td>
                                <td class="">

                                    <p><small>Category : <b><?php echo $cat_arr[$row['category_id']] ?></b></small></p>
                                    <p><small>Name : <b><?php echo $row['name'] ?></b></small></p>
                                    <p><small>Description : <b><?php echo $row['description'] ?></b></small></p>
                                    <p><small>Price : <b><?php echo number_format($row['price'],2) ?></b></small></p>
                                    <p><small>Expiry Date : <b><?php echo $row['expdate'] ?></b></small></p>
                                </td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-primary edit_product" type="button" data-id="<?php echo $row['id'] ?>" data-name="<?php echo $row['name'] ?>" data-sku="<?php echo $row['sku'] ?>" data-category_id="<?php echo $row['category_id'] ?>" data-description="<?php echo $row['description'] ?>" data-price="<?php echo $row['price'] ?>" data-cprice="<?php echo $row['cprice'] ?>" data-pdate="<?php echo $row['pdate'] ?>" data-expdate="<?php echo $row['expdate'] ?>">Edit</button>
                                    <button class="btn btn-sm btn-danger delete_product" type="button" data-id="<?php echo $row['id'] ?>">Delete</button>
                                </td>
                            </tr>
                            <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <div class="col-md-4">
        <form action="" id="manage-product">
            <div class="card">
                <div class="card-header">
                       Wholesale Stocks 
                </div>
                <div class="card-body">
                        <input type="hidden" name="id">
                        <div class="form-group">
                            <label class="control-label">Ref No:</label>
                            <input type="text" class="form-control" name="sku" value="<?php echo $sku ?>">
                        </div>                          
                </div>
                <div class="card-body">
                        <div class="form-group">
                            <label class="control-label">Category</label>
                            <select name="category_id" id="" class="custom-select browser-default">
                            <?php 

                            $cat = $conn->query("SELECT * FROM category_list order by name asc");
                            while($row=$cat->fetch_assoc()):
                                $cat_arr[$row['id']] = $row['name'];
                            ?>
                                <option value="<?php echo $row['id'] ?>"><?php echo $row['name'] ?></option>
                            <?php endwhile; ?>
                            </select>
                        </div>
                    <div class="form-group">
                        <label class="control-label">Product Name</label>
                        <input type="text" class="form-control" name="name" >
                    </div>
                    <div class="form-group">
                        <label class="control-label">Description</label>
                        <textarea class="form-control" cols="30" rows="3" name="description"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Cost Price</label>
                        <input type="number" step="any" class="form-control text-right" name="cprice" >
                    </div>                      
                    <div class="form-group">
                        <label class="control-label">Selling Price</label>
                        <input type="number" step="any" class="form-control text-right" name="price" >
                    </div>  
                    <div class="form-group">
                        <label class="control-label">Date Produced</label>
                        <input type="text" step="any" class="form-control text-right" name="pdate" >
                    </div>  
                    <div class="form-group">
                        <label class="control-label">Expiring Date</label>
                        <input type="text" step="any" class="form-control text-right" name="expdate" >
                    </div>                      
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-sm btn-primary col-sm-3 offset-md-3"> Save</button>
                            <button class="btn btn-sm btn-secondary col-sm-3" type="button" onclick="$('#manage-product').get(0).reset()"> Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

这是 JQuery 脚本。我用 id 作为我的主键。这是代码

$('table').dataTable()
$('#manage-product').submit(function(e){
    e.preventDefault()
    start_load()
    $.ajax({
        url:'ajax.php?action=save_product',
        data: new FormData($(this)[0]),
        cache: false,
        contentType: false,
        processData: false,
        method: 'POST',
        type: 'POST',
        success:function(resp){
            if(resp==1){
                alert_toast("Data successfully added",'success')
                setTimeout(function(){
                    location.reload()
                },1500)

            }
            else if(resp==2){
                alert_toast("Data successfully updated",'success')
                setTimeout(function(){
                    location.reload()
                },1500)

            }
        }
    })
})

这是编辑功能：

$('.edit_product').click(function(){
    start_load()
    var cat = $('#manage-product')
    cat.get(0).reset()
    cat.find("[name='id']").val($(this).attr('data-id'))
    cat.find("[name='name']").val($(this).attr('data-name'))
    cat.find("[name='sku']").val($(this).attr('data-sku'))
    cat.find("[name='category_id']").val($(this).attr('data-category_id'))
    cat.find("[name='description']").val($(this).attr('data-description'))
    cat.find("[name='price']").val($(this).attr('data-price'))
    cat.find("[name='cprice']").val($(this).attr('data-cprice'))
    cat.find("[name='pdate']").val($(this).attr('data-pdate'))
    cat.find("[name='expdate']").val($(this).attr('data-expdate'))
    end_load()
})

这是删除功能：

$('.delete_product').click(function(){
    _conf("Are you sure to delete this product?","delete_product",[$(this).attr('data-id')])
})
function delete_product($id){
    start_load()
    $.ajax({
        url:'ajax.php?action=delete_product',
        method:'POST',
        data:{id:$id},
        success:function(resp){
            if(resp==1){
                alert_toast("Data successfully deleted",'success')
                setTimeout(function(){
                    location.reload()
                },1500)

            }
        }
    })
}

例如，当我单击编辑时，表单应填充表格上显示的相应数据，如果我想删除我希望编辑/删除按钮工作的数据，删除按钮应返回对话框消息请，谢谢。

标签： javascriptphpjqueryajaxdatabase