bootstrap datatable
<table id="screenTable" data-toggle="table">
<thead>
...
</thead>
</table>
$(function () {
$('#screenTable').bootstrapTable({
url: "/screen/list",
dataField: "rows",
cache: false, //是否使用缓存,默认为true
striped: true, //是否显示行间隔色
pagination: true, //是否显示分页
pageSize: 10, //每页的记录行数
pageNumber: 1, //初始化加载第一页,默认第一页
pageList: [10, 20, 50], //可供选择的每页的行数
search: true, //是否显示表格搜索
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
toolbar: "#toolbar_screen", //工具按钮用哪个容器
sidePagination: "server", //分页方式:client客户端分页,server服务端分页
queryParamsType: "limit", //查询参数组织方式
columns: [{
field: "id",
title: "ID",
align: "center",
valign: "middle"
}, {
field: "name",
title: "定制名称",
align: "center",
valign: "middle",
formatter: 'infoFormatter'
}, {
field: "time",
title: "定制时间",
align: "center",
valign: "middle"
},
{
title: '操作',
field: 'operation',
align: 'middle',
formatter:function(value,row){
alluserLisr.push(row);
return '<div class="ui-pg-div">'+
'<a href="javascript:void(0)" title="编辑" class="ui-icon icon-pencil grey" onclick="popedit('+row.id+');">编辑</a> '+
'<a href="javascript:void(0)" title="删除" class="ui-icon icon-remove grey" onclick="popalert('+row.id+');">删除</a> '+
'</div>';
}
}
],
formatNoMatches: function () {
return '无符合条件的记录';
}
});
$(window).resize(function () {
$('#screenTable').bootstrapTable('resetView');//当页面缩放时 将表格缩放 响应式
});
});
function infoFormatter(value, row, index) {
return '<a href=/screen/' + row.id + ' target="_blank">' + row.name + '</a>';
}
2.事件
$(function(){
/*初始化表格*/
$("#screenTable").bootstrapTable({
data: data
});
/*加载事件*/
$("#screenTable")
.on('click-row.bs.table', function (e, row, ele,field) {
$("#eventInfo").text('点击行事件 当前商品名:'+ row.goodsName
+ ',价格:' + row.price
+ ',效期:' + row.date
+ '当前点击单元格field值为:' + field);
})
.on('dbl-click-row.bs.table', function (e, row, ele,field) {
$("#eventInfo").text('双击行事件');
})
.on('check.bs.table', function (e, row,ele) {
$("#eventInfo").text('checkbox选中事件');
})
.on('uncheck.bs.table', function (e, row,ele) {
$("#eventInfo").text('checkbox取消选中事件');
})
.on('sort.bs.table', function (e, field, order) {
var o;
switch(order){
case "desc":
o = "降序";
break;
case "asc":
o = "升序";
break;
}
$("#eventInfo").text('排序事件 当前' + name + '列,以' + o + "排列");
})
.on('check-all.bs.table', function (e,dataArr) {
$("#eventInfo").text('全选事件');
})
.on('uncheck-all.bs.table', function (e,dataArr) {
$("#eventInfo").text('取消全选事件');
})
.on('load-success.bs.table', function (e, data) {
$("#eventInfo").text('加载成功事件');
})
.on('load-error.bs.table', function (e, status) {
$("#eventInfo").text('加载错误事件');
})
.on('column-switch.bs.table', function (e, field, checked) {
var colName;
switch(field){
case "goodsName":
colName = "商品名称";
break;
case "price":
colName = "价格";
break;
case "date":
colName = "日期";
break;
}
if(checked){
$("#eventInfo").text('筛选列事件 ' + colName + '列显示');
}else{
$("#eventInfo").text('筛选列事件 ' + colName + '列隐藏');
}
})
.on('page-change.bs.table', function (e, number, size) {
$("#eventInfo").text('切换页事件 当前页数:第' + number + "页,每页显示数量" + size + "条");
})
.on('search.bs.table', function (e, text) {
$("#eventInfo").text('搜索事件');
});
}); 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
复选框事件
$('#').bootstrapTable('destroy').bootstrapTable({
method: 'get',
url:',
cache: false,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
//singleSelect: true,
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
pageSize: current_page_checkline,
pageNumber:1,
pageList: [10,20,50,100,1000],
sidePagination: "server",
height: 280,
formatLoadingMessage: function () {
return "请稍等,正在加载中...";
},
queryParams: function (params) {
return {
rows: params.limit, //页大小
page: params.offset==0 ? 1 : params.offset/params.limit+1,
barTypes:'guanxian,taoguan',
namelike:encodeURI( )
}
},
columns: [
{checkbox : true,align: 'center',valign: 'middle',formatter:function(value,row) {}
},
{ title: '管点类型', field: 'barType',align: 'center',valign: 'middle',formatter:function(value,row){
if(value=="guanxian")
{
return "管线";
}
else if(value=="otherguanxian")
{
return "其他管线";
}
else if(value=="taoguan")
{
return "套管";
}
}},
{ title: '名称',field: 'name',align: 'center',valign: 'middle'},
],
onCheck:function (row, elm, field) { //选中某一个
},
onCheckAll:function (row, elm, field) { //全部选中
}/*,
onUncheck:function (row, elm, field) {
},
onUncheckAll:function (row, elm, field) {
}*/
});
3.复选框默认选中
if (row.isSelect == 1){
return {
checked : true//设置选中
};
}else{
return {
checked : false//设置不选中
};
}
4. 获取数据
var selectObjs=$('#deviceManageTable').bootstrapTable('getData');
bootstrap datatable的更多相关文章
- 利用表格分页显示数据的js组件bootstrap datatable的使用
前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...
- asp.net mvc bootstrap datatable 服务端分页
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...
- asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载 密码:0ea1 先上图[ jqueryui风格] ...
- bootstrap DataTable绑定数据带服务器分页
<!-- DataTables --> 这两个文件在我的文件夹里面<script src="~/bower_components/datatables.net/js/jq ...
- bootstrap datatable项目封装
(function($) { $.fn.formJSON = function() { var serializeObj = {}; var array = t ...
- bootstrap datatable项目封装支持单选多选
自己在开发项目是根据自己的项目后台框架封装的jquery datatable插件基本上能集成到任何项目中使用,当然封装的还不够完美,给大家学习 调侃 使用介绍:query_dataTable({tab ...
- bootstrap datatable 数据刷新问题
在项目中,页面初始化的时候,通过通过向后台请求数据,页面初始化完之后,datatable是有数据的,当我点击页面的搜索按钮(按照时间过滤数据),datatable的数据要能重新刷新或者重载:这一点,我 ...
- Bootstrap Datatable 简单的基本配置
$(document).ready(function() { $('#example').dataTable({ "sScrollX": "100%", ...
- bootstrap datatable editor 扩展
需求: a. 表单样式更改. b. 表单大小更改. 思路: a. 通过设置modal css更改样式和大小.缺点,全局性的更改. b. 更改bootstrap-editor,可以通过某种方式将参数传入 ...
随机推荐
- python学习之----导航树
findAll 函数通过标签的名称和属性来查找标签 .但是如果你需要通过标签在文档中的位 置来查找标签,该怎么办?这就是导航树(Navigating Trees)的作用.在第1 章里,我们 看过用单一 ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
- (转)日期类型的input元素设置默认值为当天
原文地址 html5的form元素对日期时间有丰富的支持 <input type="date"> <input type="time"> ...
- [Android]Android布局优化之 ViewStub
转载请标注:转载于http://www.cnblogs.com/Liuyt-61/p/6602926.html -------------------------------------------- ...
- Jnlp
java web start解析jnlp文件,从网络宿主中,下载应用程序jar包,并运行. xxx.jnlp <?xml version="1.0" encoding=&qu ...
- 浏览器Hack演示
<!doctype html> <html> <head> <title></title> <meta http-equiv=&quo ...
- 4. mysql 1449 : The user specified as a definer ('test'@'%') does not exist 解决方法
权限问题,授权 给 root 所有sql 权限 mysql> grant all privileges on *.* to test@"%" identified by & ...
- 解决idea启动项目报错:Unable to open debugger port(127.0.0.1:60157):java.net.SocketException"socket closed
原因分析: 1.可能是端口被占用导致,其他软件占用了tomcat的端口. 2.可能是在打开Tomcat的情况下关闭了Eclipse.idea等开发工具,或是Eclipse.idea非正常关闭(如电脑. ...
- 机器学习入门-数值特征-进行多项式变化(将特征投影到高维度上) 1.PolynomialFeatures(将数据变化为多项式特征)
函数说明: 1. PolynomialFeatures(degree=2, interaction_only=False, include_bias=False) 参数说明:degree=2,表示多项 ...
- TWebBrowser控件彻底防止弹出新窗口
最近在编写一个使用到TWebBrowser控件的软件,浏览网页时经常会弹出各种各样的窗口,尤其是广告,让人烦不胜烦,参考网上的一些资料,针对不同的弹窗方式采取相应的措施就能禁止各种弹窗. 1. 将TW ...