bootstrap table實(shí)例詳解
廢話不多說(shuō)了,直接給大家貼代碼了,具體代碼如下所示:
<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, []); //動(dòng)態(tài)表格渲染 $(function () { $table.bootstrapTable({ columns: columns, //表格的列,取決于后臺(tái)獲取的數(shù)據(jù) pageList: [10, 20, 50], //表格每頁(yè)數(shù)據(jù)條數(shù)控制 onClickCell: function (row, field, value, $element) { //單元格事件 }, onPageChange: function (number, size) { //表格頁(yè)面切換事件 } }); //搜索按鈕事件,用于bootstrap table 數(shù)據(jù)加載 $('#searchArticle').click(function () { $.get(generateSearchArticleUrl(true), function (data, status) { //創(chuàng)建bootstrap模態(tài)對(duì)話框 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實(shí)例詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Js表格萬(wàn)條數(shù)據(jù)瞬間加載實(shí)現(xiàn)代碼
一條數(shù)據(jù)創(chuàng)建一行,如果數(shù)量大的時(shí)候,一次性要加載完數(shù)據(jù)的話,瀏覽器就會(huì)卡上半天,下面有個(gè)不錯(cuò)的方法,大家可以參考下2014-02-02ES6 系列之 Generator 的自動(dòng)執(zhí)行的方法示例
這篇文章主要介紹了ES6 系列之 Generator 的自動(dòng)執(zhí)行的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10JavaScript實(shí)現(xiàn)首頁(yè)圖片輪播圖效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)首頁(yè)圖片輪播圖效果,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-06-06PHPMyAdmin導(dǎo)入時(shí)提示文件大小超出PHP限制的解決方法
這篇文章主要介紹了PHPMyAdmin導(dǎo)入時(shí)提示文件大小超出PHP限制的解決方法,造成這個(gè)問題的原因是PHP上傳大小限制為2MB,修改PHP.ini配置即可解決這問題,需要的朋友可以參考下2015-03-03js實(shí)現(xiàn)密碼強(qiáng)度檢驗(yàn)
這篇文章主要為大家詳細(xì)介紹了js密碼強(qiáng)度檢驗(yàn)的實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01javascript勻速動(dòng)畫和緩沖動(dòng)畫詳解
這篇文章主要為大家詳細(xì)介紹了javascript勻速動(dòng)畫和緩沖動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10