BootStrap数据表格实例代码

BootStrap数据表格实例代码

首先初始化页面

$(function(){

$('#archives-table').bootstrapTable({

url: "/coinSend/list",//数据源

dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total

search: true,//是否搜索

cache: false,

striped: true,

pagination: true,//是否分页

sortable: true, //是否启用排序

sortOrder: "asc", //排序方式

//pageNumber:1,

pageSize: 10,//单页记录数

pageList: [5, 10, 20, 50],//分页步进值

sidePagination: "server",//服务端分页

contentType: "application/json",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理

dataType: "json",//期待返回数据类型

method: "post",//请求方式

searchAlign: "left",//查询框对齐方式

silent: true,

queryParamsType: "limit",//查询参数组织方式

queryParams: function getParams(params) {

var param = {

pageNum: params.pageNumber,

pageSize: params.pageSize,

realName : params.search

};

return param;

},

responseHandler: function(res) {

return {

"total": res.total,//总页数

"rows": res.rows //数据

};

},

searchOnEnterKey: false,//回车搜索

showRefresh: true,//刷新按钮

showColumns: true,//列选择按钮

buttonsAlign: "left",//按钮对齐方式

toolbar: "#userToolbarsendCoin",//指定工具栏

toolbarAlign: "right",//工具栏对齐方式

columns: [

/*{

title: "全选",

field: "select",

checkbox: true,

width: 20,//宽度

align: "center",//水平

valign: "middle"//垂直

},*/

{

title: "ID",//标题

field: "id",//键名

sortable: true,//是否可排序

order: "desc"//默认排序方式

},

{

field: "userInfo.userName",

title: "用户名",

sortable: true,

titleTooltip: "this is name"

}/*,

{

field: "userInfo.id",

title: "userInfo.id",

}*/,

{

field: "userInfo.realName",

title: "真实姓名",

sortable: true,

},

{

field: "userInfo.department",

title: "所属部门",

sortable: true,

},{

field: "coinName",

title: "类型",

sortable: true,

},

{

field: "amount",

title: "数量",

sortable: true,

sorter:numSort

},

{

field: "validDateStart",

title: "有效期起",

sortable: true,

//——修改——获取日期列的值进行转换

formatter: function (value, row, index) {

var time = new Date(value);

var y = time.getFullYear();//年

var m = time.getMonth() + 1;//月

var d = time.getDate();//日

return y+"-"+m+"-"+d

}

},

{

field: "validDateEnd",

title: "有效期止",

sortable: true,

//——修改——获取日期列的值进行转换

formatter: function (value, row, index) {

var time = new Date(value);

var y = time.getFullYear();//年

var m = time.getMonth() + 1;//月

var d = time.getDate();//日

return y+"-"+m+"-"+d}

}

,

{

field: "userInfo.id",

title: "操作列",

formatter:function(value, row, rowIndex){

var userId =row.userInfo.id;

var amount =row.CbROukamount;

var validDateStart =row.validDateStart;

var validDateEnd =row.validDateEnd;

var realName =row.userInfo.realName;

console.log(userId);

console.log(realName);

console.log(amount);console.log(validDateStart);console.log(validDateEnd);

if(userId!=null){

return'      '+' 分配' +'      '/*+

' 编辑'*/;

}else{

return ' 分配';

}

}

}

],

onClickRow: function(row, $element) {

//$element是当前tr的jquery对象

$element.css("background-color", "white");

/*alert(row.id);

id = row.id;*/

},//单击row事件

locale: "zh-CN",//中文支持,

detailView: false, //是否显示详情折叠

detailFormatter: function(index, row, element) {

var html = '';

$.each(row, function(key, val){

html += "

" + key + ":" + val + "

});

return html;

}

})

/*$('#archives-table').bootstrapTable('hideColumn', 'userInfo.id');*/

/*$("#searchBtn").click(function() {

var realName = $("#realName").val();

$.ajax({

type: "post",

url: "/coinSend/list",

data: {param : param},

dataType:"json",

success : function(json) {

$("#archives-table").bootstrapTable('load', json);//主要是要这种写法

}

});

});*/

})

请求后台controller，动态获取数据

表格可以加一个手风琴样式

总结

以上所述是给大家介绍的BootStrap数据表格实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。