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,可以通过某种方式将参数传入 ...
随机推荐
- JSP 静态文件路径配置
在JSP中,往往需要引入一些静态文件. 例如这样引用. 往往因为目录结构的问题,不知道是用点还是 .../ ./ ../表示相对当前路径的上一级目录:./表示相对当前的路径: 这里有个快捷的办法. l ...
- Install Python on Mac (Anaconda)
Install Python on Mac (Anaconda) 标签(空格分隔): 运维 This blog is copy from the link: https://medium.com/@G ...
- kubernetes发布tomcat服务,通过deployment,service布署
1.制作tomcat镜像 参考docker tomcat镜像制作 此处直接拉取 查看已有可镜像 先设置docker阿里源,即添加 "registry-mirrors": [&quo ...
- PHP中的 抽象类(abstract class)和 接口(interface)
抽象类abstract class 1 .抽象类是指在 class 前加了 abstract 关键字且存在抽象方法(在类方法 function 关键字前加了 abstract 关键字)的类. 2 .抽 ...
- Django中MEDIA_ROOT和MEDIA_URL
在django上传图片前端使用动态的配置方法 MEDIA_ROOT 代表着 要上传的路径会和你在models中写的上传的路径进行拼节形成最终文件上传的路径 MEDIA_URL主要就是映射了 在前端使用 ...
- Oracle表复杂查询
转自:https://www.cnblogs.com/w-gao/p/7288293.html Oracle表复杂查询 聚合函数 max(字段值) -- 求最大值 min(字段值) -- 求最小值 ...
- java 常用第3方工具
https://www.cnblogs.com/chenpi/p/5608628.html#_label4
- Django基础介绍
1.web应用 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. 应用程序有两种模式C/S.B/S.C/S是客户 ...
- 利用目录函数(opendir,readdir,closedir)查找文件个数
如何知道一个目录下的所有文件个数呢?或许可以用tree来学(zhuang)习(bi)的同时知道文件个数.Linux系统io函数为我们提供了目录操作函数,其中有一个比较重要(实际上有三个,因为它们经常配 ...
- es查询时报 Data too large
报错如下: 原因: https://www.cnblogs.com/jiu0821/p/6526930.html 参数 indices.fielddata.cache.size 控制有多少堆内存是分配 ...