examples.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Examples &middot; Bootstrap Table</title>
  6. <meta name="author" content="zhixin">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="../src/bootstrap-table.css">
  10. <link rel="stylesheet" href="docs.css">
  11. <!--<link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">-->
  12. <!--[if lt IE 9]>
  13. <script src="//wenzhixin.net.cn/js/html5shiv.js"></script>
  14. <script src="//wenzhixin.net.cn/js/respond.min.js"></script>
  15. <![endif]-->
  16. <script src="../assets/jquery.min.js"></script>
  17. <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
  18. <script src="../docs/examples.js"></script>
  19. <script src="../src/bootstrap-table.js"></script>
  20. <script src="docs.js"></script>
  21. <script src="//wenzhixin.net.cn/js/analytics.js"></script>
  22. </head>
  23. <body>
  24. <a class="sr-only" href="#content">Skip to main content</a>
  25. <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
  26. <div class="container">
  27. <div class="navbar-header">
  28. <button class="navbar-toggle" type="button" data-toggle="collapse"
  29. data-target=".bs-navbar-collapse">
  30. <span class="sr-only">Toggle navigation</span>
  31. <span class="icon-bar"></span>
  32. <span class="icon-bar"></span>
  33. <span class="icon-bar"></span>
  34. </button>
  35. <a class="navbar-brand" href="index.html">
  36. Bootstrap Table
  37. </a>
  38. </div>
  39. <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
  40. <ul class="nav navbar-nav">
  41. <li>
  42. <a href="getting-started.html">Getting started</a>
  43. </li>
  44. <li>
  45. <a href="documentation.html">Documentation</a>
  46. </li>
  47. <li class="active">
  48. <a href="examples.html">Examples</a>
  49. </li>
  50. </ul>
  51. <ul class="nav navbar-nav navbar-right">
  52. <!-- GitHub buttons: see http://ghbtns.com -->
  53. <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></li>
  54. <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe></li>
  55. <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="165" height="20"></iframe></li>
  56. </ul>
  57. </nav>
  58. </div>
  59. </header>
  60. <div class="bs-header" id="content">
  61. <div class="container">
  62. <h1>Examples</h1>
  63. <p>The examples of bootstrap table.</p>
  64. </div>
  65. </div>
  66. <div class="container">
  67. <div class="row">
  68. <div class="col-md-3">
  69. <div class="bs-sidebar" role="complementary">
  70. <ul class="nav bs-sidenav">
  71. <li><a href="#basic-table">Basic Table</a></li>
  72. <li><a href="#transform-table">Transform Table</a></li>
  73. <li><a href="#classes-table">Table Style</a></li>
  74. <li>
  75. <a href="#sort-table">Sort Table</a>
  76. <ul class="nav">
  77. <li><a href="#basic-sort-table">Basic</a></li>
  78. <li><a href="#custom-sort-table">Custom</a></li>
  79. </ul>
  80. </li>
  81. <li><a href="#format-table">Format Table</a></li>
  82. <li><a href="#hide-header-table">Hide Header Table</a></li>
  83. <li><a href="#show-columns-table">Show Columns Table</a></li>
  84. <li><a href="#card-view">Card View Table</a></li>
  85. <li>
  86. <a href="#table-select">Table select</a>
  87. <ul class="nav">
  88. <li><a href="#radio-table">Radio</a></li>
  89. <li><a href="#checkbox-table">Checkbox</a></li>
  90. </ul>
  91. </li>
  92. <li>
  93. <a href="#pagination-table">Pagination Table</a>
  94. <ul class="nav">
  95. <li><a href="#client-side-pagination-table">Client Side</a></li>
  96. <li><a href="#server-side-pagination-table">Server Side</a></li>
  97. </ul>
  98. </li>
  99. <li></li>
  100. <li><a href="#table-events">Table Events</a></li>
  101. <li><a href="#table-methods">Table Methods</a></li>
  102. <li><a href="#via-javascript-table">Via JavaScript</a></li>
  103. </ul>
  104. </div>
  105. </div>
  106. <div class="col-md-9" role="main">
  107. <div class="page-header alert alert-info">
  108. <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
  109. Bootstrap Table is licensed under the The MIT License. Completely free, you can arbitrarily use and modify this plugin. If you like this plugin, you can give me a <a href="http://github.com/wenzhixin/bootstrap-table">star</a>, and I will do better, thanks.
  110. </div>
  111. <div>
  112. <div class="page-header">
  113. <h1 id="basic-table">Basic Table</h1>
  114. </div>
  115. <div class="bs-example">
  116. <table data-toggle="table" data-url="data1.json" data-height="246">
  117. <thead>
  118. <tr>
  119. <th data-field="id">Item ID</th>
  120. <th data-field="name">Item Name</th>
  121. <th data-field="price">Item Price</th>
  122. </tr>
  123. </thead>
  124. </table>
  125. </div>
  126. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  127. </div>
  128. <div>
  129. <div class="page-header">
  130. <h1 id="transform-table">Transform Table</h1>
  131. </div>
  132. <div class="bs-example">
  133. <div id="transform-buttons" class="btn-group btn-default">
  134. <button class="btn btn-default" id="transform">
  135. <i class="glyphicon glyphicon-transfer"></i> Transform
  136. </button>
  137. <button class="btn btn-default" id="destroy">
  138. <i class="glyphicon glyphicon-trash"></i> Destroy
  139. </button>
  140. </div>
  141. <table id="table-transform" data-url="data1.json" data-height="246" data-toolbar="#transform-buttons">
  142. <thead>
  143. <tr>
  144. <th data-field="id">Item ID</th>
  145. <th data-field="name">Item Name</th>
  146. <th data-field="price">Item Price</th>
  147. </tr>
  148. </thead>
  149. </table>
  150. <script>
  151. $(function() {
  152. $('#transform').click(function() {
  153. $('#table-transform').bootstrapTable();
  154. });
  155. $('#destroy').click(function() {
  156. $('#table-transform').bootstrapTable('destroy');
  157. });
  158. });
  159. </script>
  160. </div>
  161. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  162. </div>
  163. <div>
  164. <div class="page-header">
  165. <h1 id="classes-table">Table Style</h1>
  166. </div>
  167. <div class="bs-example">
  168. <div>
  169. <label><input id="hover" type="checkbox" checked> hover</label>
  170. <label><input id="striped" type="checkbox"> striped</label>
  171. </div>
  172. <table id="table-style" data-toggle="table" data-url="data1.json" data-height="246" data-row-style="rowStyle">
  173. <thead>
  174. <tr>
  175. <th data-field="id">Item ID</th>
  176. <th data-field="name">Item Name</th>
  177. <th data-field="price">Item Price</th>
  178. </tr>
  179. </thead>
  180. </table>
  181. <script>
  182. $(function() {
  183. $('#hover, #striped').click(function() {
  184. var classes = 'table';
  185. if ($('#hover').prop('checked')) {
  186. classes = 'table table-hover';
  187. }
  188. $('#table-style').bootstrapTable('destroy')
  189. .bootstrapTable({
  190. classes: classes,
  191. striped: $('#striped').prop('checked')
  192. });
  193. });
  194. });
  195. function rowStyle(row, index) {
  196. if (index === 2) {
  197. return {
  198. classes: 'red',
  199. css: {
  200. background: 'red',
  201. color: 'white'
  202. }
  203. };
  204. }
  205. return {};
  206. }
  207. </script>
  208. </div>
  209. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  210. </div>
  211. <div>
  212. <div class="page-header">
  213. <h1 id="sort-table">Sort Table</h1>
  214. </div>
  215. <div class="page-header">
  216. <h2 id="basic-sort-table">Basic</h2>
  217. </div>
  218. <div class="bs-example">
  219. <table data-toggle="table" data-url="data1.json" data-height="246" data-sort-name="name" data-sort-order="desc">
  220. <thead>
  221. <tr>
  222. <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
  223. <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
  224. <th data-field="price" data-sortable="true" data-sortable="true">Item Price</th>
  225. </tr>
  226. </thead>
  227. </table>
  228. </div>
  229. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  230. <div class="page-header">
  231. <h2 id="custom-sort-table">Custom</h2>
  232. </div>
  233. <div class="bs-example">
  234. <table id="table-custom-sort" data-toggle="table" data-url="data1.json" data-height="246" data-sort-name="price" data-sort-order="desc">
  235. <thead>
  236. <tr>
  237. <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
  238. <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
  239. <th data-field="price" data-sortable="true" data-sortable="true" data-sorter="priceSorter">Item Price</th>
  240. </tr>
  241. </thead>
  242. </table>
  243. <script>
  244. function priceSorter(a, b) {
  245. a = +a.substring(1); // remove $
  246. b = +b.substring(1);
  247. if (a > b) return 1;
  248. if (a < b) return -1;
  249. return 0;
  250. }
  251. </script>
  252. </div>
  253. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  254. </div>
  255. <div>
  256. <div class="page-header">
  257. <h1 id="format-table">Format Table</h1>
  258. </div>
  259. <div class="bs-example">
  260. <table id="table-format" data-toggle="table" data-url="data1.json" data-height="246">
  261. <thead>
  262. <tr>
  263. <th data-field="id">Item ID</th>
  264. <th data-field="name" data-formatter="nameFormatter">Item Name</th>
  265. <th data-field="price" data-formatter="priceFormatter">Item Price</th>
  266. </tr>
  267. </thead>
  268. </table>
  269. <script>
  270. function nameFormatter(value, row) {
  271. var icon = row.id % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'
  272. return '<i class="glyphicon ' + icon + '"></i> ' + value;
  273. }
  274. function priceFormatter(value) {
  275. // 16777215 == ffffff in decimal
  276. var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
  277. return '<div style="color: ' + color + '">' +
  278. '<i class="glyphicon glyphicon-usd"></i>' +
  279. value.substring(1) +
  280. '</div>';
  281. }
  282. </script>
  283. </div>
  284. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  285. </div>
  286. <div>
  287. <div class="page-header">
  288. <h1 id="hide-header-table">Hide Header Table</h1>
  289. </div>
  290. <div class="bs-example">
  291. <table data-toggle="table" data-url="data1.json" data-height="246" data-show-header="false">
  292. <thead>
  293. <tr>
  294. <th data-field="name">Item Name</th>
  295. <th data-field="price">Item Price</th>
  296. </tr>
  297. </thead>
  298. </table>
  299. </div>
  300. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  301. </div>
  302. <div>
  303. <div class="page-header">
  304. <h1 id="show-columns-table">Show Columns Table</h1>
  305. </div>
  306. <div class="bs-example">
  307. <table data-toggle="table" data-url="data3.json" data-height="246" data-show-columns="true" data-id-field="id">
  308. <thead>
  309. <tr>
  310. <th data-field="state" data-radio="true"></th>
  311. <th data-field="name">Name</th>
  312. <th data-field="price">Price</th>
  313. <th data-field="column1">Columns1</th>
  314. <th data-field="column2" data-visible="false">Columns2</th>
  315. <th data-field="column3">Columns3</th>
  316. <th data-field="column4" data-visible="false">Columns4</th>
  317. </tr>
  318. </thead>
  319. </table>
  320. </div>
  321. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  322. </div>
  323. <div class="page-header">
  324. <h1 id="card-view">Card View Table</h1>
  325. </div>
  326. <div class="bs-example">
  327. <table data-toggle="table" data-url="data4.json" data-height="246" data-card-view="true">
  328. <thead>
  329. <tr>
  330. <th data-field="name">Name</th>
  331. <th data-field="license">License</th>
  332. <th data-field="description">Description</th>
  333. <th data-field="url">Url</th>
  334. </tr>
  335. </thead>
  336. </table>
  337. </div>
  338. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  339. <div>
  340. <div class="page-header">
  341. <h1 id="table-select">Table Select</h1>
  342. </div>
  343. <div class="page-header">
  344. <h2 id="radio-table">Radio</h2>
  345. </div>
  346. <div class="bs-example">
  347. <table data-toggle="table" data-url="data1.json" data-height="246" data-click-to-select="true">
  348. <thead>
  349. <tr>
  350. <th data-field="state" data-radio="true"></th>
  351. <th data-field="id" data-align="right">Item ID</th>
  352. <th data-field="name" data-align="center">Item Name</th>
  353. <th data-field="price" data-align="left">Item Price</th>
  354. </tr>
  355. </thead>
  356. </table>
  357. </div>
  358. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  359. <div class="page-header">
  360. <h2 id="checkbox-table">Checkbox</h2>
  361. </div>
  362. <div class="bs-example">
  363. <table data-toggle="table" data-url="data1.json" data-height="246" data-click-to-select="true">
  364. <thead>
  365. <tr>
  366. <th data-field="state" data-checkbox="true"></th>
  367. <th data-field="id" data-align="right">Item ID</th>
  368. <th data-field="name" data-align="center">Item Name</th>
  369. <th data-field="price" data-align="">Item Price</th>
  370. </tr>
  371. </thead>
  372. </table>
  373. </div>
  374. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  375. </div>
  376. <div>
  377. <div class="page-header">
  378. <h1 id="pagination-table">Pagination Table</h1>
  379. </div>
  380. <div class="page-header">
  381. <h2 id="client-side-pagination-table">Client Side</h2>
  382. </div>
  383. <div class="form-inline">
  384. <label>
  385. I18n:
  386. <select class="form-control" id="i18n">
  387. <option value="en">en</option>
  388. <option value="zh-CN">zh-CN</option>
  389. <option value="zh-TW">zh-TW</option>
  390. </select>
  391. <a href="https://github.com/wenzhixin/bootstrap-table/tree/master/src/locale">Translate your language?</a>
  392. </label>
  393. </div>
  394. <div class="bs-example">
  395. <table id="table-pagination" data-toggle="table" data-url="data2.json" data-height="400" data-pagination="true" data-search="true">
  396. <thead>
  397. <tr>
  398. <th data-field="state" data-checkbox="true"></th>
  399. <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
  400. <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
  401. <th data-field="price" data-sortable="true" data-sorter="priceSorter">Item Price</th>
  402. </tr>
  403. </thead>
  404. </table>
  405. </div>
  406. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  407. <div class="page-header">
  408. <h2 id="server-side-pagination-table">Server Side</h2>
  409. </div>
  410. <div class="bs-example">
  411. <table id="table-pagination"
  412. data-toggle="table"
  413. data-url="/examples/bootstrap_table/data"
  414. data-height="400"
  415. data-side-pagination="server"
  416. data-pagination="true"
  417. data-search="true"
  418. data-query-params="queryParams">
  419. <thead>
  420. <tr>
  421. <th data-field="state" data-checkbox="true"></th>
  422. <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
  423. <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
  424. <th data-field="price" data-sortable="true">Item Price</th>
  425. </tr>
  426. </thead>
  427. </table>
  428. <script>
  429. // url: /examples/bootstrap_table/data?offset=0&limit=10&search=test
  430. function queryParams(params) {
  431. return {
  432. limit: params.pageSize,
  433. offset: params.pageSize * (params.pageNumber - 1),
  434. search: params.searchText,
  435. name: params.sortName,
  436. order: params.sortOrder
  437. };
  438. }
  439. // url: /examples/bootstrap_table/data?page=1&number=10&search=test
  440. /*
  441. function queryParams(params) {
  442. return {
  443. page: params.pageNumber,
  444. number: params.pageSize,
  445. search: params.searchText
  446. };
  447. }
  448. */
  449. </script>
  450. </div>
  451. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  452. </div>
  453. <div>
  454. <div class="page-header">
  455. <h1 id="table-events">Table Events</h1>
  456. </div>
  457. <div class="bs-example">
  458. <div class="alert alert-success" id="events-result">
  459. Here is the result of event.
  460. </div>
  461. <table id="events-table" data-url="data1.json" data-height="246">
  462. <thead>
  463. <tr>
  464. <th data-field="state" data-checkbox="true"></th>
  465. <th data-field="id" data-sortable="true">Item ID</th>
  466. <th data-field="name" data-sortable="true">Item Name</th>
  467. <th data-field="price" data-sortable="true">Item Price</th>
  468. </tr>
  469. </thead>
  470. </table>
  471. <script>
  472. $(function() {
  473. var $result = $('#events-result');
  474. $('#events-table').bootstrapTable({
  475. onClickRow: function(row) {
  476. $result.text('Event: onClickRow, data: ' + JSON.stringify(row));
  477. },
  478. onSort: function(name, order) {
  479. $result.text('Event: onSort, data: ' + name + ', ' + order);
  480. },
  481. onCheck: function(row) {
  482. $result.text('Event: onCheck, data: ' + JSON.stringify(row));
  483. },
  484. onUncheck: function(row) {
  485. $result.text('Event: onUncheck, data: ' + JSON.stringify(row));
  486. },
  487. onCheckAll: function() {
  488. $result.text('Event: onCheckAll');
  489. },
  490. onUncheckAll: function() {
  491. $result.text('Event: onUncheckAll');
  492. }
  493. });
  494. });
  495. </script>
  496. </div>
  497. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  498. </div>
  499. <div>
  500. <div class="page-header">
  501. <h1 id="table-methods">Table methods</h1>
  502. </div>
  503. <div class="bs-example">
  504. <div class="btn-group">
  505. <button class="btn btn-default" id="get-selections">
  506. Get Selections
  507. </button>
  508. <button class="btn btn-default" id="load-data" data-method="load">
  509. Load Data
  510. </button>
  511. <button class="btn btn-default" id="append-data" data-method="append">
  512. Append Data
  513. </button>
  514. <button class="btn btn-default" id="merge-cells">
  515. Merge Cells
  516. </button>
  517. <button class="btn btn-default" id="check-all" data-method="checkAll">
  518. Check All
  519. </button>
  520. <button class="btn btn-default" id="uncheck-all" data-method="uncheckAll">
  521. Uncheck All
  522. </button>
  523. <button class="btn btn-default" id="show-loading" data-method="showLoading">
  524. Show Loading
  525. </button>
  526. <button class="btn btn-default" id="hide-loading" data-method="hideLoading">
  527. Hide Loading
  528. </button>
  529. <button class="btn btn-default" id="refresh" data-method="refresh">
  530. Refresh
  531. </button>
  532. </div>
  533. <table id="table-methods-table" data-height="246" data-url="data1.json">
  534. <thead>
  535. <tr>
  536. <th data-field="state" data-checkbox="true"></th>
  537. <th data-field="id">Item ID</th>
  538. <th data-field="name">Item Name</th>
  539. <th data-field="price">Item Price</th>
  540. </tr>
  541. </thead>
  542. </table>
  543. <script>
  544. $(function() {
  545. var id = 0,
  546. getRows = function() {
  547. var rows = [];
  548. for (var i = 0; i < 5; i++) {
  549. rows.push({
  550. id: id,
  551. name: 'test' + id,
  552. price: '$' + id
  553. });
  554. id++;
  555. }
  556. return rows;
  557. },
  558. // init table use data
  559. $table = $('#table-methods-table').bootstrapTable();
  560. $('#get-selections').click(function() {
  561. alert('Selected values: ' + JSON.stringify($table.bootstrapTable('getSelections')));
  562. });
  563. $('#load-data, #append-data, #check-all, #uncheck-all, ' +
  564. '#show-loading, #hide-loading, #refresh').click(function() {
  565. $table.bootstrapTable($(this).data('method'), getRows());
  566. });
  567. $('#merge-cells').click(function() {
  568. $table.bootstrapTable('mergeCells', {
  569. index: 1,
  570. field: 'name',
  571. colspan: 2,
  572. rowspan: 3
  573. })
  574. });
  575. });
  576. </script>
  577. </div>
  578. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  579. </div>
  580. <div>
  581. <div class="page-header">
  582. <h1 id="via-javascript-table">Via JavaScript</h1>
  583. </div>
  584. <div class="bs-example">
  585. <table id="table-javascript"></table>
  586. <script>
  587. $(function() {
  588. $('#table-javascript').bootstrapTable({
  589. method: 'get',
  590. url: 'data2.json',
  591. height: 400,
  592. striped: true,
  593. pagination: true,
  594. pageSize: 50,
  595. pageList: [10, 25, 50, 100, 200],
  596. search: true,
  597. showColumns: true,
  598. columns: [{
  599. field: 'state',
  600. checkbox: true
  601. }, {
  602. field: 'id',
  603. title: 'Item ID',
  604. align: 'right',
  605. valign: 'bottom',
  606. sortable: true
  607. }, {
  608. field: 'name',
  609. title: 'Item Name',
  610. align: 'center',
  611. valign: 'middle',
  612. sortable: true,
  613. formatter: nameFormatter
  614. }, {
  615. field: 'price',
  616. title: 'Item Price',
  617. align: 'left',
  618. valign: 'top',
  619. sortable: true,
  620. formatter: priceFormatter,
  621. sorter: priceSorter
  622. }]
  623. });
  624. });
  625. </script>
  626. </div>
  627. <div class="highlight"><pre><code class="language-html"></code></pre></div>
  628. </div>
  629. <hr>
  630. <a href="https://github.com/wenzhixin/bootstrap-table/blob/master/docs/docs.js">More examples via JavaScript</a>
  631. </div>
  632. </div>
  633. </div>
  634. <!--<a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>-->
  635. <footer class="bs-footer" role="contentinfo">
  636. <div class="container">
  637. <p>Copyright © 2012-2014, Bootstrap Table is licensed under the The MIT License. Coded by wenzhixin. </p>
  638. <ul class="footer-links">
  639. <li>Currently: v1.0.5</li>
  640. <li class="muted">·</li>
  641. <li><a href="http://wenzhixin.net.cn">My website</a></li>
  642. <li class="muted">·</li>
  643. <li><a href="http://repos.wenzhixin.net.cn">My repos</a></li>
  644. <li class="muted">·</li>
  645. <li><a href="https://github.com/wenzhixin">Github (@wenzhixin)</a></li>
  646. <li class="muted">·</li>
  647. <li><a href="https://github.com/wenzhixin/bootstrap-table/issues?state=open">Issues</a></li>
  648. <li class="muted">·</li>
  649. <li><a href="mailto:wenzhixin2010@gmail.com">Email</a></li>
  650. </ul>
  651. </div>
  652. </footer>
  653. <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/default.min.css">
  654. <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
  655. <script>hljs.initHighlightingOnLoad();</script>
  656. </body>
  657. </html>