BootStrap数据表格实例代码
作者:Beauty_魅影 发布时间:2024-05-09 14:56:15
标签: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.amount;
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' '+'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\',\''+realName+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>分配</a>' +' '/*+
'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\''+userId+'\',\''+amount+'\',\''+realName+'\',\''+validDateEnd+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>编辑</a>'*/;
}else{
return '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\');"> <i class="icon-edit icon-white"></i>分配</a>';
}
}
}
],
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 += "<p>" + key + ":" + val + "</p>"
});
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,动态获取数据
表格可以加一个手风琴样式
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>员工列表</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="ibox float-e-margins">
<table id="archives-table" class="table table-hover">
</table>
</div>
</div>
</div>
总结
以上所述是小编给大家介绍的BootStrap数据表格实例代码网站的支持!
来源:http://blog.csdn.net/wo8451401/article/details/77964354


猜你喜欢
- 通常,为了安全性,数据库只允许通过ssh来访问。例如:mysql数据库放在服务器A上,只允许数据库B来访问,这时,我们需要用机器C去访问数据
- Vue.extend配置项data必须为function,否则配置无效。data的合并规则(可以看《Vue官方文档梳理-全局配置》)源码如下
- FileUpload上传图片(图片不变形) 的实现方法,需要的朋友可以参考下。<style type="text/css&q
- 思考一下下面的代码片段: def foo(numbers=[]): numbers.append(9) p
- 我们可用如下代码进行监控:函数中使用了fso对象来读取文件属性。Function File_GetLastModifi
- 直接执行这两个命令即可:sudo update-alternatives --install /usr/bin/python python
- pandas.DataFrame行名(index)和列名(columns)的修改方法如下。rename()任意的行名(index)和列名(c
- 1、什么是线性规划线性规划(Linear programming),在线性等式或不等式约束条件下求解线性目标函数的极值问题,常用于解决资源分
- 本文实例为大家分享了python实现库存商品管理系统的具体代码,供大家参考,具体内容如下题目要求:请设计一个商品管理系统,程序要求根据用户输
- 这篇文章主要介绍了Python list运算操作代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- 本文实例为大家分享了python遗传算法的具体代码,供大家参考,具体内容如下1、基本概念遗传算法(GA)是最早由美国Holland教授提出的
- 如下所示:Traceback (most recent call last):File "<stdin>",
- 代码如下:'============================== '格式化HTML,SDCMS加强版 '==
- 网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在上传后希望能预览一下看上传的对
- 在上一篇文章《Python教程—模拟网页点击爬虫定位系统》讲解怎么通过模拟点击方式爬取车辆定位数据,本次介绍怎么以模拟点击方式进入交管121
- 引言:刚学python好几天了,从java到python,基础学起来确实比较容易,语法掌握,基本概念上都比较容易入脑。唯一比较郁闷的是老想着
- 下面说说主要实现思路: 1、存取图片 (1)、将图片文件转换为二进制并直接存进sql server //UploadHelper.cs //
- SQL触发器实例1 定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序。触发器是一
- 一、Go语言实战——自定义集合Set在Go语言中有作为Hash Table实现的字典(Map)类型,但标准数据类型中并没有集合(Set)这种
- 数制转换即进制转换,指进制(二、八、十、十六进制)间的相互转换,计算机编程中较为常见。这里列举了python常见数制转换用法。1.进位制度P