bootstrap 分页表格插件

找了两个table的插件，一个是bootstraptable，另一个是bootstrap-paginator

这里只介绍bootstraptable插件使用及简单案例

文档介绍：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

使用方法详解：

其他案例解析：http://www.jb51.net/article/79033.htm

简单的html案例（使用data-*来获取数据）：http://www.jq22.com/yanshi467

1.引入js、css文件

<linkhref="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"rel="stylesheet">
<linkhref="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css">

<scriptsrc="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<scriptsrc="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<scriptsrc="http://cdn.bootcss.com/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>

2.table数据填充

bootStraptable获取数据有两种方式，一是通过table的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据*

注意：使用data-toggle="table"的话，js操作就会失效，反之生效

<tabledata-toggle="table">
<thead>
...
</thead>
</table>

$('#table').bootstrapTable({
url:'data.json'
});

3.js获取数据的案例及释义

<divclass="panelpanel-default">
<divclass="panel-bodytable-responsive">
　　　　　　　　　
<divclass="query-div"id="toolbar">
<formclass="form-inline"role="form"id="query_form">
<divclass="form-groupquery-form-group">
<labelfor="status">状态</label>
<selectclass="form-control"id="with_appr_status"
<optionvalue="">全部</option>
<optionvalue="S1">待处理</option>
<optionvalue="S2">已处理</option>
</select>
</div>
<divclass="form-groupquery-form-group">
<buttontype="button"class="btnbtn-default"id="with_query">查询</button>
</div>
</form>
</div>

<tableid="query_results"class="tabletable-hover">
<thead>
<tr>
<thdata-field="code">编号</th>
<thdata-field="time">申请时间</th>
<thdata-field="status"data-formatter="formatStatus">提现状态</th>
<thdata-field="remark">备注</th>
</tr>
</thead>
</table>
</div>
</div>

//注意
//1.contentType:"application/x-www-form-urlencoded"想要后台使用struts来接受数据，或者使用对象.属性的方法获取，需要配置这个form，默认是“json”
//2.pageNo第几页，需要使用“Math.ceil(params.offset/params.limit)+1”来计算，params.pageNumber一直获取的是第一页

loadData();//默认查询

functionloadData(){

//表格id
$('#query_results').bootstrapTable({
url:'/test',//请求后台的URL（*）
method:'post',//请求方式（*）
contentType:"application/x-www-form-urlencoded",//需要设置为这个参数，后台才能通过对象获取值,这里要注意
dataType:"json",//期待返回数据类型
toolbar:'#toolbar',//工具按钮用哪个容器
toolbarAlign:"left",//工具栏对齐方式
striped:true,//是否显示行间隔色
cache:false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination:true,//是否显示分页（*）
//sortable:false,//是否启用排序
sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize:5,//每页的记录行数（*）
pageList:[5,10,25,50,100],//可供选择的每页的行数（*）
sortOrder:"asc",//排序方式
search:false,//搜索功能
buttonsAlign:"left",//按钮对齐方式
//showColumns:true,//列选择按钮
strictSearch:true,
clickToSelect:true,//是否启用点击选中行
//height:460,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId:"id",//每一行的唯一标识，一般为主键列
cardView:false,//是否显示详细视图
detailView:false,//是否显示父子表
queryParamsType:'limit',
queryParams:queryParams
});

//默认加载时携带参数
functionqueryParams(params){
varparams={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNo:Math.ceil(params.offset/params.limit)+1,//页码
pageSize:params.limit,//页面大小
"status":$("#status").val()
};
returnparams;
}

}

//点击“查询”按钮
$("#query").bind("click",function(){
　　//两种方式：
　　//1.直接刷新$('#query_results').bootstrapTable("refresh",{});
　　//2.先销毁数据，再次查询，如下
$("#query_results").bootstrapTable('destroy');
loadPageData();
});

//表格列的格式化翻译，对应data-formatter="formatStatus"
functionformatStatus(value,row,index){
　　if(value=='S1'){
　　　　return"待处理";
　　}else{
　　　　return"已处理"
　　}
}