Options

Name Type Default Description
locale string 'zh-CN' Support values: 'zh-CN', 'en-US'
containerClass string '' container class
btnGroupSize string 'btn-group-sm' Button size，See here
btnClass string 'btn-default' Button class, See here
toolbarClass string 'row semi-auto-table-toolbar' toolbar class
menuBarWrapperClass string 'col-sm-12 col-md-8 semi-auto-table-menubar' menu bar wrapper class
menuBarClass string 'btn-toolbar' menu bar class
paginatorWrapperClass string 'col-sm-12 col-md-4 semi-auto-table-paginator' paginator wrapper class
paginatorClass string 'btn-toolbar pull-right' paginator class
tableWrapperClass string 'table-responsive semi-auto-table-data' table wrapper class
tableClass string 'table table-striped table-condensed table-hover' table class
selectedNum boolean true 是否显示选中条数
pageTooltip boolean false 分页按钮是否显示tooltip
selectColor string 'info' 设置选中行的背景颜色，仅支持Bootstrap定义的五种颜色success、info、active、warning、danger

rowOption option for select-all button and row selector
object | false {
type: 'checkbox',
showSelectAll: true,
inputName: "row.id"
}
if false, will hide select-all button and disable row selector
type string 'checkbox' Value range: 'checkbox', 'radio', 'none'
showSelectAll boolean true Hide or show the select-all button. If type=='radio', select-all button will be hidden
inputName string 'row.id' checkbox or radio elements' name in the table row. If type=='none'如果type=none, this value is ignored
rowSelector string '> tbody > tr' data row selector

pageOption 分页widget
object | false if false, paginator will be hidden.
option object must include currentPage, totalPages, totalRows attributes
rowsPerPageOptions string '20,50,100,200,500,1000' options for how many rows per page
currentPage int Current page
rowsPerPage int rowsPerPageOptions[0] how many rows per page
totalPages int total pages
totalRows int total rows

sortOption sort status
object sortOption: {} example:
sortOption: {
'A': 'desc',
'B: 'asc'
}
[data-sort-by] status 'name': 'order' [data-sort-by] element will automatically enable sort function

example:
<a href="#" data-sort-by="A"> Column A </a>
sortOption: { 'A': 'desc' }
the result will be Column A

Value range:
'asc', icon:
'desc', icon:
unset, icon:
array of ButtonDefinition menus: [] there are 4 kinds of ButtonDefinition
  1. Buttons
  2. Single button dropdowns
  3. Split button dropdowns
  4. Button groups

ButtonDefinition - Buttons
object example:
{
title: ...,
icon: ...,
btnClass: ...,
tooltip: ...,
callback: ...
}
title string not required, button title
icon string not required，can be icon of Fontawesome or Glyphicons，eg. fa fa-calendar
btnClass string not required，override global btnClass setting
tooltip string not required, tooltip
callback function not required, triggered when click
id number 菜单的唯一标识
tag string menu右上角的小标记，与id配合使用

ButtonDefinition - Single button dropdowns
object example:
{
title: ..., (not required)
icon: ..., (not required)
btnClass: ..., (not required)
tooltip: ..., (not required)
dropdowns: ...
keepOpen: ...
}
dropdowns array of dropdowns
object | 'divider' example:
{
title: ...,
icon: ..., (not required)
callback: ...,
}
or
'divider'
keepOpen boolean false Keep Bootstrap dropdown open after click

ButtonDefinition - Split button dropdowns
object example:
{
title: ..., (not required)
icon: ..., (not required)
btnClass: ..., (not required)
tooltip: ..., (not required)
callback: ...,
dropdowns: ...
keepOpen: ...
}

ButtonDefinition - Button groups
array of ButtonDefinition example:
[ Button, Single button dropdowns, Split button dropdowns, ...]

columnOption option for column-select button
object {
showColumnSelect: false,
hideColumns: [],
stickyColumns: []
}
example:
{
showColumnSelect: true,
hideColumns: [1,3],
stickyColumns: [1]
}
showColumnSelect boolean false Hide or show the column-select button. If true, show the button what you can choose the column which you want to show
hideColumns array [] Init Hide Column. If hideColumns:[0,1], hide the first and second columns
stickyColumns array [] Sticky Column. If stickyColumns:[0,1], the first and second columns can not be shown or hidden

columnReorder - DataTable Extension
colOrderArrangable object false example:
true or
{ fixedColumnsLeft: 1
}

columnResizable - DataTable ColResizable
colResizable object false example:
true or
{
"tableWidthFixed": true
}

DataTable
useDataTable boolean true 是否调用dataTable插件,为true,以下选项才有效
columns array null 表格数据与头部的对应。格式为:
[ {"data": "course.code"}, {"data": "course.name"} ] 对应thead是: 
<thead><tr><th>代码</th><th>名称</th></tr></thead>
ajax ajax null 发请求拿到数据: $.ajax({ url: '', type: 'get' })
data json [] 表格数据, 与ajax二选一, 要么是ajax异步得到数据，要么通过data直接给
completeTableCallback function 渲染完成table需要调用的函数，用户自定义，只调用一次
reDrawCallback function 渲染table时调用的函数，用户自定义，每次画完table调用一次
fixedHeader object { enabled: false, scrollY: 0 } enabled为true表示：启用表头固定；scrollY为固定高度