Bootstrap-table: Delete rows from table

[iamthestreets]

Hi,

I am trying to delete rows (users) from the table based on an ID. When I check more than one box I get the ID of each select which I then add to a hidden input with the the value being the ids - example value="1,2" I then wrote function to delete the users from the database, but it is only deleting the first section in this example only userid 1 would be deleted from DB.

Here is an example of the delete user code.

function removeRow(){

    var url = 'remove-user.php';
    var id = document.getElementById("user-id").value;
    var data = 'userID=' + id;

    $.ajax({
            url: url,
            data: data,
            cache: false,
            error: function(e){
                    alert(e);
                },
            success: function () {
                var selects = $('#users-table').bootstrapTable('getSelections');
                    ids = $.map(selects, function (row) {
                        return row.id;
                    });

                $('#users-table').bootstrapTable('remove', {
                    field: 'id',
                    values: ids
                });                
            }
          });

    }

Do you have any other suggestion on how I could do this?

Again, it is not deleting all selections only the first one.

[prgwiz]

Here is what I use for the delete button on click:

function bst_DeleteButton(oBtn) {
   var options = { title: "Are you really sure you want to delete all the checked rows?",
         singleton: true,
         popout: true,
         btnOkClass: "btn-xs btn-danger",
         btnOkIcon: "glyphicon glyphicon-trash",
         btnOkLabel: "Delete",
         btnCancelLabel: "Cancel",
         placement:"auto right",
         onConfirm: function() {
            var $div = $(this).closest('div.bootstrap-table'),
               $table = $div.find('table.table') ,
               $rows = $table.find(':checked'),
               ids = $.map($rows, function (row) {
                  return row.value
               });

            ajax_call('?MODE=jqload&alias='+$table.data('alias')+'&action=bst_remove&id='+ ids.toString(),
               'DELETE',
               null,
               function(response) {
                  gg_jqresponse(response);
                  if (response.success) {
                     gg_checkrefresh();
                  }
               }
            );
         }
      };
   if ($(oBtn).confirmation) {$(oBtn).confirmation('destroy');}
   $(oBtn).confirmation(options);
   $(oBtn).confirmation('show');
   return false;
   }

[iamthestreets]

Thanks for the reply!

Are you sending anything to the database to be deleted?

Also, what does your HTML look like?

[wenzhixin]

Hi @iamthestreets , you can try this:

function removeRow() {

    var selects = $('#users-table').bootstrapTable('getSelections');
        ids = $.map(selects, function (row) {
            return row.id;
        });

    var url = 'remove-user.php';
    var data = 'userID=' + ids.join(',');

    $.ajax({
        url: url,
        data: data,
        cache: false,
        error: function (e) {
            alert(e);
        },
        success: function () {
            $('#users-table').bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
        }
    });
}

[iamthestreets]

Thanks for the response. I am still having an issue. I am able to remove the data from the database and update the table, but I keep getting logged out and redirected the login page. I believe I am loosing my session when the page refreshes. Any ideas why this is happening?

[RodrigoBurgosMella]

I implement the following function directly in the library and has worked very good

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

how to use, like "updateRow"

$("#your-table").bootstrapTable('removeRow',{index:1});

I hope serves them (sorry for my English)

[rahulmuraliqllabscom]

I have a bootstrapTable in my project, and i want to insert delete and update rows dynamically but i dont have any unique value in the row, however i have a unique row id for each row(ie html row id ) how can i delete a row from bootstrapTable using this id.

When i use $("#id").remove(); the rows is removed from that screen but on going to another tab in pagination and comming back it gets reloaded as if it was not deleted.

Any help is highly appreciated

[wenzhixin]

You can use table method to do that: http://bootstrap-table.wenzhixin.net.cn/documentation/#methods @rahulmuraliqllabscom

[rahulmuraliqllabscom]

I have an ajax call that returns a table row in HTML format which will include action buttons for delete and edit according to the requirements of my project. So is there a way to insert HTML into the existing table

[wenzhixin]

Please check out the documentation

[rahulmuraliqllabscom]

Is it possible to remove a row from the table if I have the row index

[lio590]

Hi wenzhixin txh for pointing us to the documentation / methods however I couldn't find any method that allows us to delete a row based on index. Can you give us a hint ?

[wenzhixin]

http://issues.wenzhixin.net.cn/bootstrap-table/#methods/remove.html

[lio590]

Thx wenzhixin that's what I thougth tehre is a method to remove by ID but not directly the 'index". By teh way thx for thsi excellent piece of software saves me a lot fo time. I will donate you deserve it

[wenzhixin]

var id = $table.bootstrapTable('getData')[index].id;

[lio590]

great thx !

[lio590]

Yes teh thing is that getting the ID doesn't help since I'm using
this.runningFormatter = function (value, row, index) {
var tableOptions = $table.bootstrapTable('getOptions');
return ((tableOptions.pageNumber-1) * tableOptions.pageSize)+(1 + index);
}; // credit to enayet-repo

but then in this case when I use $table.bootstrapTable('getSelections')to get the slections it doesn't return the row.id
So I was looking for something like > $table.bootstrapTable('removeRowByIndex', index)

[lio590]

Ok the winner is RodrigoBurgosMella above with his removeRow works as expected

[RodrigoBurgosMella]

I'm glad that the contribution has worked, that everyone is very well

[xterwolf]

My solution;

      'click .row_delete': function (e, value, row, index) {

        var table_data_array = $('#ttable').bootstrapTable('getData');
        table_data_array.splice(index, 1);

        $('#ttable').bootstrapTable({
              height: 450,
              columns: [....],
              data: table_data_array
        });
     }

[SaharAshF]

My Solution :

var $Table = $('#TableID');
var TmpTableData =$Table.bootstrapTable('getData');;
var TmpNewTableData = TmpTableData.slice();
TmpNewTableData.splice(Index, 1);
$Table.bootstrapTable('removeAll');
$Table.bootstrapTable('prepend', TmpNewTableData);