bootstrap table实例详解
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<scripttype="text/javascript">
var$table=$('#table');
varcolumns=[];
//获取表头信息
functionbuildColumnsStyle(url,align,valign,ignore){
$.ajax({
'method':'GET',
'url':url,
'async':false,
'success':function(data,status){
//此处设置columns
}
});
}
buildColumnsStyle('/api/v1/ArticleItem/info','center',null,[]);
//动态表格渲染
$(function(){
$table.bootstrapTable({
columns:columns,//表格的列,取决于后台获取的数据
pageList:[10,20,50],//表格每页数据条数控制
onClickCell:function(row,field,value,$element){
//单元格事件
},
onPageChange:function(number,size){
//表格页面切换事件
}
});
//搜索按钮事件,用于bootstraptable数据加载
$('#searchArticle').click(function(){
$.get(generateSearchArticleUrl(true),function(data,status){
//创建bootstrap模态对话框
createBootstrapModal(data.result,100);
createLabels(data.result);
//数据加载
if(data.success&&data.result.length!=0){
$table.bootstrapTable('load',{data:data.result});
}else{
$table.bootstrapTable('load',{data:[]});
}
renderLabels();
});
});
});
</script>
以上所述是小编给大家介绍的bootstraptable实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!