Introduction

Bootstrap Semi-Auto Table is a jQuery plugin that provide an HTML element (typically a table) with toolbar, pagination and sort function.

Unlike other great jQuery plugins (Bootstrap Table, jquery.datagrid, DataTables, etc.), Bootstrap Semi-Auto Table doesn't do data loading, searching or filtering.

If you want data refresh, you should do it yourself by invoking the methods provided by Bootstra Semi-Auto Table to re-render the ui (partially or fully), that's why it's semi-auto.

The advantage of Bootstrap Semi-Auto Table is:

  1. There are no extremely powerful but also horrible configuration.
  2. It's easy to build toolbar.
  3. You can have more control on data refresh and rendering. You can use pure ajax, partial page load or old-school form post.

Dependencies

Bootstrap Semi-Auto Table depends on the following: 

"jquery": ">= 1.9.1",
    "bootstrap": "~3.3.4",
    "fontawesome": "~4.3.0",
    "bootstrap-select": "~1.7.2",
    "datatables.net": "~1.10.10",
    "datatables-colreorder": "~1.3.0"

Download

Source Code

Source, dist, and docs.

Download source (v.2.1.1)

Clone or fork via GitHub

Via Github (v.2.1.1)

Install with Bower

$ bower install bootstrap-semi-auto-table

Quick Start

Column A Column B Column C Column D
a b c d
a b c d 
<table id="table">
  <thead>
  <tr>
    <th></th>
    <th><a href="#" data-sort-by="A">Column A</a></th>
    <th><a href="#" data-sort-by="B">Column B</a></th>
    <th><a href="#" data-sort-by="C">Column C</a></th>
    <th>Column D</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="row.id" value="1"/></td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="row.id" value="2"/></td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  </tbody>
</table>

<script>
  $(function () {
    var $table = $("#table");
    $table.semiAutoTable({
      sortOption: {
        'A': 'asc',
        'B': 'desc'
      },
      menus: [
        {
          title: 'Menu1',
          tooltip: 'tooltip',
          callback: function () {
            console.log(JSON.stringify($table.semiAutoTable('getSelectedRows')));
          }
        },
        [
          {
            title: 'Menu2',
            dropdowns: [
              {
                title: 'Submenu-2'
              }
            ]
          },
          {
            title: 'Menu3',
            dropdowns: [
              {
                title: 'Submenu-3'
              }
            ],
            callback: function () {
              console.log(JSON.stringify($table.semiAutoTable('getSelectedRows')));
            }
          }
        ]

      ],
      pageOption: {
        currentPage: 11,
        totalPages: 20,
        totalRows: 202
      }
    }).on('pageChange', function (event, pageObject) {

      console.log(JSON.stringify(pageObject));
      $(this).semiAutoTable('updatePaginator', pageObject);

    }).on('sortChange', function (event, sortObject) {

      console.log(JSON.stringify(sortObject));

      var $this = $(this);
      var oldSortObject = $this.semiAutoTable('getSortObject');
      $this.semiAutoTable('updateSortBy', $.extend(oldSortObject, sortObject));

    });
  });
</script>