Make your table looks pretty.
- jQuery 2.1.0+
- Bootstrap 3
Enable prettytable via javascript:
$('.table[data-role=prettytable]').prettyTable();Set max column width:
<table data-role="prettytable">
<thead>
<tr>
<th data-width="100">
...Will apply the min value of
data-widthand dynamic calculated finally.
Set column width according on data-min-width and auto calculated value:
<table data-role="prettytable">
<thead>
<tr>
<th data-min-width="100">
...Set fixed column width:
<table data-role="prettytable">
<thead>
<tr>
<th data-fixed-width="100">
...Set flex column width:
<table data-role="prettytable">
<thead>
<tr>
<th data-width="flex">
...Options can be passed via data attributes or JavaScript.
Scroller now only accept
falseor'x'
| Name | Type | Default | Desciption |
|---|---|---|---|
| scroller | string or false | false | enable horizontal scroller or not |
| fixedPadding | int | 20 | Reserved width for header column |
| iconWidth | int | 20 | Extra icon width such as question mark |
| maxColumnWidth | function | - | - |
scroller option example:
// programming style
$('.table[data-role=prettytable]').prettyTable({
scroller: 'x'
});or
<!-- conventional style -->
<table data-role="prettytable" data-scroller="x">
...
</table>$('.table[data-role=prettytable]').prettyTable();lock()freeze mouse wheel, ignore its eventsunlock()release mouse wheel, restore eventsrefresh()re-adjust columns of table
how to invoke?
only get invoked on the first matched jQuery objects.
var result = $('.table[data-role=prettytable]').prettyTable(METHOD_NAME);lock.pttriggered whenlock()method be invokedunlock.pttriggered whenunlock()method be invoked
subscribe event(s):
$(document.body).on('lock.pt', '.prettytable', function() {
// do something...
})- v0.1.0 Dec 31, 2014 first release with only kernal features.
- v0.1.1 Jan 07, 2014 Bug fix
- v0.1.2 Jan 08, 2014
+Remove underscore.js as a dependency.
+Add travis-CI support.
+Add
min-widthsupport. - v0.1.3 Jan 09, 2014 +Fixed font calculated bug for firefox browser
Add an additional attribute to the <th> tag,
<table class="prettytable" data-role="prettytable">
<thead>
<tr>
<th data-width=200>
...- by Xiong Zhengdong
- since Dec 31, 2014
