快捷導(dǎo)航

bootstrap-table獲取表格數(shù)據(jù)的多種方式

更新時間：2023年10月10日 09:03:36 作者：程序修理員

這篇文章主要介紹了bootstrap-table獲取表格數(shù)據(jù)的多種方式,bootstrap-table獲取值得兩種方式,一種是通過data獲取,一種是通過url獲取,需要的朋友可以參考下

1、通過data獲取后臺數(shù)據(jù)

 var result="通過el表達式獲取json值";    //后臺傳過來的json值
 $(function () {
load();
}); 
function load() {
$("#table").bootstrapTable({
    data:result,
    //totalRows: 10,
    height:600,
    undefinedText:"_",           //當數(shù)據(jù)為 undefined 時顯示的字符。
    sidePagination: 'client',
    pagination: true,             //是否顯示分頁（*）
/* 右上角工具條 */
    showRefresh: true, //顯示刷新按鈕
    showToggle:true,        //是否顯示詳細視圖和列表視圖的切換按鈕
    showColumns: true, //顯示下拉框勾選要顯示的列 
   pagination: true,   //在表格底部顯示分頁工具欄  
   striped: true,        //是否顯示行間隔色
    pageNumber:1, //當前第幾頁 
    pageSize: 5, //每頁顯示的記錄數(shù) 
    pageList: [5, 10, 15, 20, 25], //記錄數(shù)可選列表 
    toolbar: "#toolbar",   //設(shè)置工具欄的Id或者class 
    paginationPreText:"<<",
    paginationNextText:">>",
   //clickToSelect: true,    //點擊行即可選中單選/復(fù)選框 
    //iconSize: "outline", 
    //cardView: false,//設(shè)置為True時顯示名片（card）布局 
    // singleSelect: true,//復(fù)選框只能選擇一條記錄
    search: true,    //是否顯示右上角的搜索框  
    formatLoadingMessage: function () {  
        return "請稍等，正在加載中...";  
      }, 
    icons: {
        refresh: "glyphicon-repeat",
        toggle: "glyphicon-list-alt"
    },
    columns: [{
        field: 'id',
        visible: false   //不顯示
    }, {
        field: 'empname',
        title: '用戶名',
        align: 'left',
        //width: 230,
    } 
    , {
        field: 'empcode',
        title: '編碼',
        align: 'left',
        //width: 230,
    } 
    ] 
  })
}

2、通過url獲取數(shù)據(jù)

function load() {
$("#table").bootstrapTable({
    url: "${ctx}/userController/showlist",
    dataType:"json",
    method:"post",
 //totalRows: 10,   //記錄右下角的總條數(shù)
    height:600,
    undefinedText:"_",           //當數(shù)據(jù)為 undefined 時顯示的字符。
    sidePagination: 'client',
    pagination: true,             //是否顯示分頁（*）
  /* 右上角工具條 */
  showRefresh: true, //顯示刷新按鈕
 showToggle:true,        //是否顯示詳細視圖和列表視圖的切換按鈕
 showColumns: true, //顯示下拉框勾選要顯示的列 
   pagination: true,   //在表格底部顯示分頁工具欄  
    striped: true,        //是否顯示行間隔色
    pageNumber:1, //當前第幾頁 
    pageSize: 5, //每頁顯示的記錄數(shù) 
    pageList: [5, 10, 15, 20, 25], //記錄數(shù)可選列表 
    toolbar: "#toolbar",   //設(shè)置工具欄的Id或者class 
    paginationPreText:"<<",
    paginationNextText:">>",
   //clickToSelect: true,    //點擊行即可選中單選/復(fù)選框 
    //iconSize: "outline", 
    //cardView: false,//設(shè)置為True時顯示名片（card）布局 
    // singleSelect: true,//復(fù)選框只能選擇一條記錄
    search: true,    //是否顯示右上角的搜索框  
    formatLoadingMessage: function () {  
        return "請稍等，正在加載中...";  
      }, 
    queryParams: function (params) {   //向后臺傳遞的參數(shù)
        var p = {
            limit: params.limit,
            offset: params.offset,
            search: params.search,
            sort: params.sort,
            order: params.order
        };
        return p;
    }, 
    icons: {
        refresh: "glyphicon-repeat",
        toggle: "glyphicon-list-alt"
    },
    columns: [{
        field: 'id',
        visible: false   //不顯示
    }, {
        field: 'empname',
        title: '用戶名',
        align: 'left',
        //width: 230,
    } 
    , {
        field: 'empcode',
        title: '編碼',
        align: 'left',
        //width: 230,
    } 
    ] 
 })
}

3、html頁面部分代碼

< link href="...bootstrap-3.3.7/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet"   />
< link href="...bootstrap-table/bootstrap-table.min.css" rel="external nofollow"  rel="stylesheet"  />
< script src="...jquery-2.1.1/jquery.js" type="text/javascript" ></script>
< script src="...bootstrap-3.3.7/js/bootstrap.js" type="text/javascript" ></script>
< script src="...bootstrap-table/bootstrap-table.min.js" type="text/javascript" ></script>
< script src="...bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript" ></ script>
< body>
< div class="panel panel-default">
  < div class="panel-body">
< div id="toolbar" class="btn-group">
		< button id="btn_edit" type="button" class="btn btn-default">
			< span class="glyphicon glyphicon-pencil" aria-hidden="true"></ span>修改
		< /button>
		<  button id="btn_delete" type="button" class="btn btn-default">
			< span class="glyphicon glyphicon-remove" aria-hidden="true"></ span>刪除
		</ button>
	</ div>     
< table id="table"></table> 	
</ div>
</ div> 
</ body>

到此這篇關(guān)于bootstrap-table獲取表格數(shù)據(jù)的兩種方式的文章就介紹到這了,更多相關(guān)bootstrap-table獲取表格數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: