options/custom-toolbar.html

<script>
init({
  title: 'Custom Toolbar',
  desc: 'Use `toolbar` option to define the custom toolbars.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <div id="toolbar">
    <div
      class="form-inline"
      role="form"
    >
      <div class="form-group">
        <label class="control-label">
          Offset:
        </label>
        <input
          name="offset"
          class="form-control"
          type="number"
          value="0"
        >
      </div>
      <div class="form-group">
        <label class="control-label">
          Limit:
        </label>
        <input
          name="limit"
          class="form-control"
          type="number"
          value="5"
        >
      </div>
      <div class="form-group">
        <input
          name="search"
          class="form-control"
          type="text"
          placeholder="Search"
        >
      </div>
      <div class="form-group">
        <button
          id="ok"
          type="submit"
          class="btn btn-primary"
        >
          OK
        </button>
      </div>
    </div>
  </div>
  <table
    id="table"
    data-toggle="table"
    data-height="460"
    data-toolbar="#toolbar"
    data-show-refresh="true"
    data-show-toggle="true"
    data-show-columns="true"
    data-query-params="queryParams"
    data-response-handler="responseHandler"
    data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
  >
    <thead>
      <tr>
        <th data-field="id">
          ID
        </th>
        <th data-field="name">
          Item Name
        </th>
        <th data-field="price">
          Item Price
        </th>
      </tr>
    </thead>
  </table>
</template>

<script>
  const $table = $('#table')
  const $ok = $('#ok')

  function mounted () {
    $ok.click(function () {
      $table.bootstrapTable('refresh')
    })
  }

  window.queryParams = () => {
    const params = {}

    $('#toolbar').find('input[name]').each(function () {
      params[$(this).attr('name')] = $(this).val()
    })
    return params
  }

  window.responseHandler = res => res.rows
</script>

<style>
.form-inline .form-group,
.form-inline .control-label,
.form-inline .form-control {
  display: inline-block;
  width: auto;
  margin-right: 5px;
}

.form-inline .btn {
  vertical-align: baseline;
}
</style>