DataTables删除行按钮

时间:2015-10-29 20:47:28

标签: jquery datatables

我试图让我的脚本在" 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') );
} );
        }
                    });
    }

3 个答案:

答案 0 :(得分:3)

我能够通过以下

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

答案 1 :(得分:1)

试试这个。这是一个有效的例子

   <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>

答案 2 :(得分:0)

我知道这是一篇过时的文章,但对于更多参考,建议的答案将不适用于行已拆分的响应表。在这种情况下,我们将需要类似:

$('#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();