bootstrap-table

Basic Table Initialization

This code initializes a basic table with three columns (ID, Name, Price) and two rows of data. The table is created using the bootstrapTable method, which takes an object with columns and data properties.

$(document).ready(function() {
  $('#table').bootstrapTable({
    columns: [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'price',
      title: 'Price'
    }],
    data: [{
      id: 1,
      name: 'Item 1',
      price: '$1'
    }, {
      id: 2,
      name: 'Item 2',
      price: '$2'
    }]
  });
});

Pagination

This code demonstrates how to enable pagination in a bootstrap-table. The pagination property is set to true, and the pageSize property is set to 5, meaning the table will display 5 rows per page.

$(document).ready(function() {
  $('#table').bootstrapTable({
    pagination: true,
    pageSize: 5,
    columns: [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'price',
      title: 'Price'
    }],
    data: [
      { id: 1, name: 'Item 1', price: '$1' },
      { id: 2, name: 'Item 2', price: '$2' },
      { id: 3, name: 'Item 3', price: '$3' },
      { id: 4, name: 'Item 4', price: '$4' },
      { id: 5, name: 'Item 5', price: '$5' },
      { id: 6, name: 'Item 6', price: '$6' }
    ]
  });
});

Search Functionality

This code adds a search box to the table, allowing users to filter the table data based on their input. The search property is set to true to enable this functionality.

$(document).ready(function() {
  $('#table').bootstrapTable({
    search: true,
    columns: [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'price',
      title: 'Price'
    }],
    data: [
      { id: 1, name: 'Item 1', price: '$1' },
      { id: 2, name: 'Item 2', price: '$2' },
      { id: 3, name: 'Item 3', price: '$3' },
      { id: 4, name: 'Item 4', price: '$4' },
      { id: 5, name: 'Item 5', price: '$5' },
      { id: 6, name: 'Item 6', price: '$6' }
    ]
  });
});

Sorting

This code enables sorting for each column in the table. The sortable property is set to true for the table and each column, allowing users to sort the data by clicking on the column headers.

$(document).ready(function() {
  $('#table').bootstrapTable({
    sortable: true,
    columns: [{
      field: 'id',
      title: 'ID',
      sortable: true
    }, {
      field: 'name',
      title: 'Name',
      sortable: true
    }, {
      field: 'price',
      title: 'Price',
      sortable: true
    }],
    data: [
      { id: 1, name: 'Item 1', price: '$1' },
      { id: 2, name: 'Item 2', price: '$2' },
      { id: 3, name: 'Item 3', price: '$3' },
      { id: 4, name: 'Item 4', price: '$4' },
      { id: 5, name: 'Item 5', price: '$5' },
      { id: 6, name: 'Item 6', price: '$6' }
    ]
  });
});