Pagination

Test pagination

by jimkennelly

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
  </head>

  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script type="text/javascript">
      function pagin() {
        $("#table").bootstrapTable("togglePagination");
      }

    </script>
    <div id="page_body">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="fpbx-container">
              <div class="display full-border">
                <button onclick="pagin()">
                  Pagination On/Off
                </button>

                <table id="table" data-show-toggle="True" data-maintain-selected="true" data-pagination="True" class="table table-striped"></table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>

JavaScript

$('#table').bootstrapTable({
  columns: [{
    field: 'id',
    title: 'Item ID',
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price',
    formatter: formatItemPrice

  }],
  data: [{
    id: "1",
    name: 'Item 1',
    price: "10"
  }, {
    id: "2",
    name: 'Item 2',
    price: "20"
  }]
});

function formatItemPrice(value, row, index) {
  var selectCode = '<select>';
  var valuesAllowed = [0, 10, 20, 30];

  valuesAllowed.forEach(function(ii) {
    selectCode += '<option value="10">10</option>';
  });



  selectCode += '</select>'
  return selectCode;
}