reorder-rows.html

<script>
init({
  title: 'Reorder Rows',
  desc: 'Use Plugin: <a href="https://github.com/isocra/TableDnD" target="_blank">TableDnD</a> and bootstrap-table-reorder-rows.',
  links: [
    'bootstrap-table.min.css',
    'extensions/reorder-rows/bootstrap-table-reorder-rows.css'
  ],
  scripts: [
    'https://cdn.jsdelivr.net/npm/tablednd@1.0.5/dist/jquery.tablednd.min.js',
    'bootstrap-table.min.js',
    'extensions/reorder-rows/bootstrap-table-reorder-rows.min.js'
  ]
})
</script>

<template>
  <div class="toolbar">
    <button
      id="button"
      class="btn btn-secondary"
    >
      getData
    </button>
  </div>

  <table
    id="table"
    data-pagination="true"
    data-search="true"
    data-show-toggle="true"
    data-toolbar=".toolbar"
    data-use-row-attr-func="true"
    data-reorderable-rows="true"
    data-url="json/data1.json"
  >
    <thead>
      <tr>
        <th
          data-field="state"
          data-checkbox="true"
        >
          ID
        </th>
        <th
          data-field="id"
          data-sortable="true"
        >
          ID
        </th>
        <th
          data-field="name"
          data-sortable="true"
        >
          Item Name
        </th>
        <th
          data-field="price"
          data-sortable="true"
        >
          Item Price
        </th>
      </tr>
    </thead>
  </table>
</template>

<script>
  function mounted () {
    $('#table').bootstrapTable()

    $('#button').click(function () {
      alert(JSON.stringify($('#table').bootstrapTable('getData').map(function (row) {
        return row.id
      })))
    })
  }
</script>