bootstrap table實例詳解
更新時間:2017年01月06日 09:08:03 作者:F_GSong
本文通過實例代碼給大家介紹了bootstrap table樣式,非常不錯,具有參考借鑒價值,需要的的朋友參考下
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
<script type="text/javascript"> var $table = $('#table'); var columns = []; //獲取表頭信息 function buildColumnsStyle(url, align, valign, ignore) { $.ajax({ 'method': 'GET', 'url': url, 'async': false, 'success': function (data, status) { //此處設(shè)置columns } }); } buildColumnsStyle('/api/v1/ArticleItem/info', 'center', null, []); //動態(tài)表格渲染 $(function () { $table.bootstrapTable({ columns: columns, //表格的列,取決于后臺獲取的數(shù)據(jù) pageList: [10, 20, 50], //表格每頁數(shù)據(jù)條數(shù)控制 onClickCell: function (row, field, value, $element) { //單元格事件 }, onPageChange: function (number, size) { //表格頁面切換事件 } }); //搜索按鈕事件,用于bootstrap table 數(shù)據(jù)加載 $('#searchArticle').click(function () { $.get(generateSearchArticleUrl(true), function (data, status) { //創(chuàng)建bootstrap模態(tài)對話框 createBootstrapModal(data.result, 100); createLabels(data.result); //數(shù)據(jù)加載 if (data.success && data.result.length != 0) { $table.bootstrapTable('load', {data: data.result}); } else { $table.bootstrapTable('load', {data: []}); } renderLabels(); }); }); }); </script>
以上所述是小編給大家介紹的bootstrap table實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Js表格萬條數(shù)據(jù)瞬間加載實現(xiàn)代碼
一條數(shù)據(jù)創(chuàng)建一行,如果數(shù)量大的時候,一次性要加載完數(shù)據(jù)的話,瀏覽器就會卡上半天,下面有個不錯的方法,大家可以參考下2014-02-02ES6 系列之 Generator 的自動執(zhí)行的方法示例
這篇文章主要介紹了ES6 系列之 Generator 的自動執(zhí)行的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10PHPMyAdmin導入時提示文件大小超出PHP限制的解決方法
這篇文章主要介紹了PHPMyAdmin導入時提示文件大小超出PHP限制的解決方法,造成這個問題的原因是PHP上傳大小限制為2MB,修改PHP.ini配置即可解決這問題,需要的朋友可以參考下2015-03-03JavaScript中雙等號(==)和三等號(===)有何不同以及何時使用它們詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中雙等號(==)和三等號(===)有何不同以及何時使用它們的相關(guān)資料,在JavaScript中"=="和"==="都是比較運算符,用于比較兩個值是否相等,需要的朋友可以參考下2024-01-01