1. 引入CSS及js文件
其中包含bootstrap样式文件，bootstrap-table 样式文件，jquery文件，及bootstrap-table EXCEL导出所用到的汉化文件。
2.在视图页面中添加table标签，并给定一个id,如：
<table id="data"></table> 然后新建js文件，在js文件中初始化bootstrap-table,table的配置项很丰富，这里列举几项常用的。在初始化时我们可以采用正在body标签添加onload()函数的方法。
<body onload="init()">然后新建js,并在自己的jsp或HTML页中引入该js,在js中初始化table
function init(){
//1.初始化Table
inittitle();
var oTable = new modelinit();
oTable.Init();
var oTable2 = new modelfininit();
oTable2.Init();
}
/**
* 模型清单
*/
var modelinit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#data').bootstrapTable({
url: '/AMS/model/getmarketdetail?modelid='+$("#modelid").text(), //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
showExport:true,//是否显示导出按钮
exportDataType:"all", //basic,all,selected 导出的形式basic为本页，selected为选择项，all为全部，注意这里为all时只支持client端分页的全部导出
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，即client分页时搜索任意一列
strictSearch: true,
showColumns: true, //是否显示所有的列
checkboxHeader: false,//表头的全选按钮
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: false, //是否启用点击选中行
//height: 400, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: false
},{
field: 'username',
title: '姓名'
}
, {
field: 'phone',
title: '联系方式'
}
,
{
field: 'dos',
title: '操作',
formatter:function(value,row,index){
var a = '<button type="button" onclick="javascript:phone(\''+row.modelid+'\',\''+row.userid+'\');" class="btn btn-primary">电话营销</button>';
a+=" ";
a+= '<button type="button" onclick="javascript:msg(\''+row.modelid+'\',\''+row.userid+'\');" class="btn btn-primary">短信营销</button>';
return a;
}
}]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
//这里输入页面分页参数，搜索的关键字key或者自定义的其他搜索参数，如果是get方式发送也可以直接写在上面的url中
};
return temp;
};
return oTableInit;
};在后台上通过返回json数据进行显示，如果是Client显示分页，那么返回的json数据为一个jsonarray，如果是server分页返回的是一个jsonobject，格式为
{
“total”:3,
“rows”:[
{“username“”:”姓名1”,”phone”:”电话1”},
{“username“”:”姓名2”,”phone”:”电话2”},
{“username“”:”姓名3”,”phone”:”电话3”}
]
}
注意，这里的total表示共有几条数据，rows是内容，rows里的名称要和上面配置的data内容里的名称一样。
好了 ，这部分就是bootstrap-table前段页面上的写法，下一篇介绍后台的写法。
3599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
