PHP [SOLVED]: How to copy Rows from BootstrapTable to another Html table when selected via checkbox?

PHP [SOLVED]: How to copy Rows from BootstrapTable to another Html table when selected via checkbox?

Home Forums Scripting PHP Tutorials PHP [SOLVED]: How to copy Rows from BootstrapTable to another Html table when selected via checkbox?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245542

    Cloudy Point
    Keymaster

    QuestionQuestion

    I have an HTML table created with bootstrap which takes data from a SQL database.
    I have added checkboxes to the first column of this table, but I would like to add a form to submit it and create a new table with only the rows selected by the checkbox. The rows should be deleted from the original table. I think I will need some jQuery code to loop over the table but I do not know how to create a new table with only the selected rows.

    Thanks in advance.

    <html>
    <head>
      <title> Dashboard</title>
      <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
      <link type="text/css" href="css/bootstrap-table.css" rel="stylesheet">
      <link type="text/css" href="css/font-awesome.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="custom.css">
    </head>
    <body>
      <div class="container">
        <div class="col-md-12">
          <div class="panel panel-success">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-12">
                  <table id="table" data-show-columns="true" data-height="460">
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script src="js/jquery-1.11.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/bootstrap-table.js"></script>
      <script type="text/javascript">
        var $table = $('#table');
        $table.bootstrapTable({
          url: 'list-leads.php',
          search: true,
          pagination: true,
          buttonsClass: 'primary',
          showFooter: true,
          minimumCountColumns: 2,
          columns: [{
            data: '',
            title: '',
            checkbox: true,
          }, {
            field: 'num',
            title: '#',
            sortable: true,
          }, {
            field: 'registrant',
            title: 'registrant',
            sortable: true,
          }, ],
        });
      </script>
    </body>
    </html>
    

    #245543

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    EDIT

    As OP wasn’t able to remove the added rows from the original table himself so, I had to change the example to load some data and use them hope you are able to take the things forward from here, the main thing is to select a column as a unique column by specifying into the table attributes using data-unique-id="column_name", make sure the column you select has unique values mostly an id column either from the database or any custom counter will do the work, and then use the removeByUniqueId method provided by bootstrapTable and pass it the id of the column you want to delete, and you should look into the events chart I provided in the link below in answer


    You can use the bootstrap events for the checkboxes i.e check.bs.table.

    It fires when a user checks a row, the parameters contain:

    • row: the record corresponding to the clicked row.
    • $element: the DOM element checked.

    I am creating a minimal example to copy the row to the table so that you can have a kick start for the rest of things like disabling the copied row from the bootstraptable.

    Similarly, if you want to remove the row if you un-checked then you need to use the onUncheck i.e uncheck.bs.table.See all Events for Bootstrap Table.

    See the demo below in Full Screen, for minimal options. Hope it helps you out.

    var data = [{
        "name": "bootstrap-table",
        "stargazers_count": "526",
        "forks_count": "122",
        "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
      },
      {
        "name": "multiple-select",
        "stargazers_count": "288",
        "forks_count": "150",
        "description": "A jQuery plugin to select multiple elements with checkboxes :)"
      },
      {
        "name": "bootstrap-show-password",
        "stargazers_count": "32",
        "forks_count": "11",
        "description": "Show/hide password plugin for twitter bootstrap."
      },
      {
        "name": "blog",
        "stargazers_count": "13",
        "forks_count": "4",
        "description": "my blog"
      },
      {
        "name": "scutech-redmine",
        "stargazers_count": "6",
        "forks_count": "3",
        "description": "Redmine notification tools for chrome extension."
      }
    ];
    
    
    $table = $('#table').bootstrapTable({
      data: data
    });
    $('#table').on('check.bs.table', function(e, row, $el) {
    
      $table.bootstrapTable('removeByUniqueId', row.forks_count);
      $('#duplicate > tbody:last-child').append('<tr id="' + $el.closest('tr').data('index') + '"><td >' + row.name + '</td><td>' + row.stargazers_count + '</td><td>' + row.forks_count + '</td></tr>');
    
    });
    $('#table').on('uncheck.bs.table', function(e, row, $el) {
      $('#duplicate > tbody tr#' + $el.closest('tr').data('index')).remove();
    });
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    
    
    <div class="row">
      <div class="col-sm-6">
    
        <table id="table" data-unique-id="forks_count">
          <thead>
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="name">Name</th>
              <th data-field="stargazers_count">Stars</th>
              <th data-field="forks_count">Forks</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="col-sm-6">
        <table id="duplicate" class="table table-striped">
          <thead>
            <tr>
              <th>
                Name
              </th>
              <th>
                Star
              </th>
              <th>
                Forks
              </th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>

    Source: https://stackoverflow.com/questions/48027652/how-to-copy-rows-from-bootstraptable-to-another-html-table-when-selected-via-che
    Author: Muhammad Omer Aslam
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.