使用数据表插件删除行，然后将其从数据库中删除

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 上的单击事件，该事件会在该行上注入一些类（例如： 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