Search code examples
bootstrap-table

bootstrap-table.js how to remove row within actionevent


How do I change the 'alert' click event in this fiddle to remove the row in which the icon was clicked? I have tried several approaches none of which have worked. I want to delete/remove the row, not post an alert. Thank you in advance.

Here is the Fiddle

        function actionFormatter(value, row, index) {
        return [
    '<a class="like" href="javascript:void(0)" title="Like">',
    '<i class="glyphicon glyphicon-heart"></i>',
    '</a>',
    '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
    '<i class="glyphicon glyphicon-edit"></i>',
    '</a>',
    '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
    '<i class="glyphicon glyphicon-remove"></i>',
    '</a>'
       ].join('');
          }

   window.actionEvents = {
     'click .like': function (e, value, row, index) {
    alert('You click like icon, row: ' + JSON.stringify(row));
    console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
    alert('You click edit icon, row: ' + JSON.stringify(row));
    console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
    alert('You click remove icon, row: ' + JSON.stringify(row));
    console.log(value, row, index);
     }
      };

Solution

  • added: var $table = $('#table')

    and this to the click function: 'click .remove': function (e, value, row, index) { $table.bootstrapTable('remove', { field: 'id', values: [row.id] });

    Now it works.

          var   $table = $('#table')
    
     function actionFormatter(value, row, index) {
        return [
    '<a class="like" href="javascript:void(0)" title="Like">',
    '<i class="glyphicon glyphicon-heart"></i>',
    '</a>',
    '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
    '<i class="glyphicon glyphicon-edit"></i>',
    '</a>',
    '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
    '<i class="glyphicon glyphicon-remove"></i>',
    '</a>'
       ].join('');
          }
    
       window.actionEvents = {
         'click .like': function (e, value, row, index) {
        alert('You click like icon, row: ' + JSON.stringify(row));
        console.log(value, row, index);
    },
    'click .edit': function (e, value, row, index) {
        alert('You click edit icon, row: ' + JSON.stringify(row));
        console.log(value, row, index);
    },
        'click .remove': function (e, value, row, index) {
                   $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
        }
    };