CODEWITHSUNDEEP
jquerydatatables
Taylor Reed
Taylor Reed

Reputation: 355

DataTables remove row button

I am trying to have my script delete the row completely once the "locatebutton" has been pressed. I have the following code however I cannot seem to get it working right. Yes, the table name within DataTables is named "dataTables-example".

Button:

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

Script:

<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') );
} );
        }
                    });
    }

Upvotes: 4

Views: 14126

Answers (3)

tgrandje
tgrandje

Reputation: 2514

I know this is an old post, but for further references, the proposed answers won't work for responsive tables which rows have been splitted. In that case, we will need something like :

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

Edit

Better yet (I think) :

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

Upvotes: 0

Udara Kasun
Udara Kasun

Reputation: 2216

Try this one. this is working example

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

Upvotes: 5

Taylor Reed
Taylor Reed

Reputation: 355

I was able to accomplish this with the following

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

Upvotes: 6

Related Questions