DataTables 删除行按钮

Question

我想让我的脚本在“locatebutton”被按下后彻底删除该行。我有以下代码，但似乎无法正常工作。是的，在DataTables中表格名称为"dataTables-example"。

按钮：

<td><button type="button" name="locateButton1" class="btn btn-info" onClick="UpdateLocate(<?php echo $orow['wo']; ?>);"/>Locates</button></a></td>

脚本：

<script>
function UpdateLocate(wo)
    {
            jQuery.ajax({
            type: "POST",
            url: "functions/markLocates.php",
            data: 'wo='+wo,
            cache: false,
            success: function(response)
        {
                //alert("Record successfully updated");

                    $('#dataTables-example').on( 'click', 'a.editor_remove', function (e) {
    e.preventDefault();

    editor
        .title( 'Edit record' )
        .message( "Are you sure you wish to delete this row?" )
        .buttons( { "button": "locateButton1", "fn": function () { editor.submit() } } )
        .remove( $(this).closest('tr') );
} );
        }
                    });
    }

- Taylor Reed

Answer 1

我使用以下方法完成了这个任务。

$("#dataTables-example").on('click', '.btn-info', function () {
        $(this).parent().parent().remove();
    });

- Taylor Reed

Answer 2

请试用这个示例，这是工作正常的示例。

   <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td><button>Delete</button></td>
                    </tr>
                </tbody>
            </table>

    <script>
      $(document).ready(function () {
         var table = $('#example').DataTable({
            "columns": [
              null, 
              null,
              null,
              {
                "sortable": false
              }
            ]
          });          
      });
      $('#example').on("click", "button", function(){
            console.log($(this).parent());
            table.row($(this).parents('tr')).remove().draw(false);
      });
    </script>

- Udara Kasun

Answer 3

我知道这是一篇旧的帖子，但对于进一步的参考，提出的答案对于具有分割行的响应式表格是无效的。在这种情况下，我们需要类似于以下的解决方案：

$('#example').on("click", "button", function(){
  var td = $(this).closest("tr"); 
  if (td.hasClass("child")) {td.prev('.parent').remove();}
  td.remove();
});

---

编辑

更好的方式（我认为）：

$('#example').on("click", "button", function(){
  var table = $(button).closest("table").DataTable();
  table.cell( {focused:true} ).row().remove();
  table.draw();

- tgrandje