Overriding - AlphaHydrae/tableling GitHub Wiki

Overriding

The Bootstrap table is composed of five modules: table, pageSize, quickSearch, info and pagination.

Each module can be overriden independently. For example, to replace the view of the pageSize module, you can pass a pageSizeView option when extending Tableling.Bootstrap.Table. This option should contain the view class you wish to use. You can also pass a pageSizeViewOptions option if you need additional options to be passed to your view's initialize method.

You can extend Tableling's default view classes:

  • Tableling.Bootstrap.TableView can be extended to provide the table view as we have done above
  • Tableling.Bootstrap.PageSizeView is the page size select box
  • Tableling.Bootstrap.QuickSearchView is the quick search select box
  • Tableling.Bootstrap.InfoView is the info notice showing the number of records
  • Tableling.Bootstrap.PaginationView is the page switcher

Let's say that you want to change the page size select box to make it a text field instead. All you have to do is extend PageSizeView (or make a view class of your own) to change the template and pass the new class as an option to the table:

var CustomPageSizeView = Tableling.Bootstrap.PageSizeView.extend({
  // Override the original template.
  template : _.template('<input type="text" class="input-mini" name="pageSize" value="5" /> entries per page')
});

// When defining your table...
var BooksTable = Tableling.Bootstrap.Table.extend({

  tableView : BooksTableView,
  tableViewOptions : {
    collection: new Books({
      model: Book
    })
  },

  // ... override the page size view.
  pageSizeView : CustomPageSizeView
});