Question

如何使用每行中创建的按钮从数据表中删除特定行同时我想从数据库中删除这一行如何使用jquery？删除按钮的ID是（removeBtn）我按下此按钮时删除行..（按单个按钮删除单行）表的代码..

<table class="table table-striped table-bordered table-hover" id="liveSearch">

                    <thead>
                    <tr>
                        <th style="text-align: center">#</th>
                        <th style="text-align: center">col1</th>
                        <th style="text-align: center">col2</th>
                        <th style="text-align: center">col3</th>
                        <th style="text-align: center">col4</th>
                        <th style="text-align: center">col5</th>
                        <th style="text-align: center">col6</th>

                    </tr>
                    </thead>
                    <tbody>
                        <?php
                        $servername = "localhost";
                        $username = "root";
                        $password = "";
                        $dbname = "msk";

                        // Create connection
                        $conn = new mysqli($servername, $username, $password, $dbname);
                        // Check connection
                        if ($conn->connect_error) {
                            die("Connection failed: " . $conn->connect_error);
                        }

                        $per_page=5;
                        if (isset($_GET["page"])) {
                            $page = $_GET["page"];
                        }
                        else {
                            $page=1;
                        }
                        $start_from = ($page-1) * $per_page;
                        $sql = "select p.productname,p.quantity,p.onesale,p.wholesale,p.productdetailsid,s.fullname from productdetails p , supplier s where s.supplierid = p.supplierID";
                        $count = ($page*5)-4;

                        $result = $conn->query($sql);
                        if ($result->num_rows > 0) {
                            while($row = $result->fetch_assoc()) {
                            echo "<form method=\"post\" action=\"\">";
                            echo "<tr>";
                            echo "<td name=\"ct\" id=\"ct\">" . $count++ . "</td>";
                            echo "<td>" . $row["productname"] . "</td>
                            <td>" . $row["quantity"] . "</td>
                            <td>" . $row["onesale"] . "</td>
                            <td>" . $row["wholesale"] . "</td>
                            <td>" . $row["fullname"] . "</td>
                            <td>
                            <button class=\"btn btn-xs btn-danger\" name=\"removeBtn\"><i class=\"fa fa-times\"></i> </button>
                            <input type=\"hidden\" name=\"id\" id=\"id\" value='".$row["productdetailsid"]."'>
                            </td>"
                            ;
                            echo "</tr>";
                            echo "</form>";
                        }
                        }
                        $conn->close();
                        ?>
                    </tbody>
                </table>

Answer 1

您需要首先在DataTable上记下click事件，该事件会在该行上注入一些类（例如：selected）。然后，您需要在removeBtn单击中获取所选行，并在DataTable上调用remove函数。您可以在按钮单击时发布AJAX请求，并且在成功时您可以删除该行以便更好地理解。这是示例代码：

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

    $('#removeBtn').click( function () {

     $.ajax({
       url: "sample.php", 
       success : function(data){
          //delete the row
          table.row('.selected').remove().draw( false );
        },
       error: function(xhr){
           //error handling
        }}); 

    } );
} );

以下是描述链接： https://datatables.net/examples/api/select_single_row.html

使用datatable插件删除行，然后从数据库中删除它

1 个答案: