bootstrap-table获取表格数据的多种方式
作者：程序修理员
这篇文章主要介绍了bootstrap-table获取表格数据的多种方式,bootstrap-table获取值得两种方式,一种是通过data获取,一种是通过url获取,需要的朋友可以参考下
分享一下这两天的研究结果，超级有用
bootstrap-table获取值得两种方式，一种是通过data获取，一种是通过url获取。
data：适用于客户端分页；
url：适用于服务端分页；
*注：上面两个的区别主要在于参数sidePagination。
1、通过data获取后台数据
var result="通过el表达式获取json值"; //后台传过来的json值
$(function () {
load();
});
function load() {
$("#table").bootstrapTable({
data:result,
//totalRows: 10,
height:600,
undefinedText:"_", //当数据为 undefined 时显示的字符。
sidePagination: 'client',
pagination: true, //是否显示分页（*）
/* 右上角工具条 */
showRefresh: true, //显示刷新按钮
showToggle:true, //是否显示详细视图和列表视图的切换按钮
showColumns: true, //显示下拉框勾选要显示的列
pagination: true, //在表格底部显示分页工具栏
striped: true, //是否显示行间隔色
pageNumber:1, //当前第几页
pageSize: 5, //每页显示的记录数
pageList: [5, 10, 15, 20, 25], //记录数可选列表
toolbar: "#toolbar", //设置工具栏的Id或者class
paginationPreText:"<<",
paginationNextText:">>",
//clickToSelect: true, //点击行即可选中单选/复选框
//iconSize: "outline",
//cardView: false,//设置为True时显示名片（card）布局
// singleSelect: true,//复选框只能选择一条记录
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获取数据
function load() {
$("#table").bootstrapTable({
url: "${ctx}/userController/showlist",
dataType:"json",
method:"post",
//totalRows: 10, //记录右下角的总条数
height:600,
undefinedText:"_", //当数据为 undefined 时显示的字符。
sidePagination: 'client',
pagination: true, //是否显示分页（*）
/* 右上角工具条 */
showRefresh: true, //显示刷新按钮
showToggle:true, //是否显示详细视图和列表视图的切换按钮
showColumns: true, //显示下拉框勾选要显示的列
pagination: true, //在表格底部显示分页工具栏
striped: true, //是否显示行间隔色
pageNumber:1, //当前第几页
pageSize: 5, //每页显示的记录数
pageList: [5, 10, 15, 20, 25], //记录数可选列表
toolbar: "#toolbar", //设置工具栏的Id或者class
paginationPreText:"<<",
paginationNextText:">>",
//clickToSelect: true, //点击行即可选中单选/复选框
//iconSize: "outline",
//cardView: false,//设置为True时显示名片（card）布局
// singleSelect: true,//复选框只能选择一条记录
search: true, //是否显示右上角的搜索框
formatLoadingMessage: function () {
return "请稍等，正在加载中...";
},
queryParams: function (params) { //向后台传递的参数
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>
到此这篇关于bootstrap-table获取表格数据的两种方式的文章就介绍到这了,更多相关bootstrap-table获取表格数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！