bootstrap datatable

时间:2022-02-24 10:25:36
<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的更多相关文章

  1. 利用表格分页显示数据的js组件bootstrap datatable的使用

    前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...

  2. asp&period;net mvc bootstrap datatable 服务端分页

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...

  3. asp&period;net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载  密码:0ea1 先上图[ jqueryui风格] ...

  4. bootstrap DataTable绑定数据带服务器分页

    <!-- DataTables -->  这两个文件在我的文件夹里面<script src="~/bower_components/datatables.net/js/jq ...

  5. bootstrap datatable项目封装

    (function($) {     $.fn.formJSON = function() {         var serializeObj = {};         var array = t ...

  6. bootstrap datatable项目封装支持单选多选

    自己在开发项目是根据自己的项目后台框架封装的jquery datatable插件基本上能集成到任何项目中使用,当然封装的还不够完美,给大家学习 调侃 使用介绍:query_dataTable({tab ...

  7. bootstrap datatable 数据刷新问题

    在项目中,页面初始化的时候,通过通过向后台请求数据,页面初始化完之后,datatable是有数据的,当我点击页面的搜索按钮(按照时间过滤数据),datatable的数据要能重新刷新或者重载:这一点,我 ...

  8. Bootstrap Datatable 简单的基本配置

    $(document).ready(function() {     $('#example').dataTable({ "sScrollX": "100%", ...

  9. bootstrap datatable editor 扩展

    需求: a. 表单样式更改. b. 表单大小更改. 思路: a. 通过设置modal css更改样式和大小.缺点,全局性的更改. b. 更改bootstrap-editor,可以通过某种方式将参数传入 ...

随机推荐

  1. 将webservice封装成dll

    生成dll文件的步骤如下:1.发布完成后,在浏览器中打开WebService文件,如:http://localhost/WebSer/WebService1.asmx,可以看到WebService1. ...

  2. Linux进程状态 &lpar; Linux Process State Codes&rpar;

    进程状态代码及说明: STATE代码 说明 D 不可中断的睡眠. 通常是处于I/O之中. R 运行中/可运行. 正处于运行队列中. S 可中断的睡眠. 等待某事件发生. T 已停止. 可能是因为she ...

  3. 解决Xamarin 生成时出现 &OpenCurlyDoubleQuote;aapt&period;exe”已退出,代码为 1。错误问题

    项目中添加的资源或项目文件的名称不能包含 空格 横线 特殊符号 或者 Android关键字 等

  4. LintCode &quot&semi;Coins in a Line III&quot&semi; &excl;&excl;

    https://codesolutiony.wordpress.com/2015/05/24/lintcode-coins-in-a-line-iii/ A very juicy one! Deser ...

  5. &lbrack;置顶&rsqb; 两台一级域名相同二级域名不同的服务器,怎么共享session

    比如www.hongchangfirst.com和video.hongchangfirst.com两个域名,一级域名相同,二级域名不同.每个服务器运行着不同的功能模块或者不同的子系统,他们使用不同的二 ...

  6. 详细的DedeCMS&lpar;织梦&rpar;目录权限安全设置教程

    一.目录权限根据统计,绝大部分网站的攻击都在根目录开始的,因此,栏目目录不能设置在根目录.DEDECMS部署完成后,重点目录设置如下:1)将install删除.2) data.templets.upl ...

  7. 如何在linux下录制terminal操作?

    相关包: ttyrec: ttyrec is a tty recorder. Recorded data can be played back with the included ttyplay co ...

  8. 给定n,求1&sol;x &plus; 1&sol;y &equals; 1&sol;n (x&lt&semi;&equals;y)的解数~hdu-1299~&lpar;分解素因子详解)

    链接:https://www.nowcoder.com/acm/contest/90/F来源:牛客网 题目描述 给定n,求1/x + 1/y = 1/n (x<=y)的解数.(x.y.n均为正整 ...

  9. DevOps最佳工具集实践

    在列出DevOps 工具链之前,介绍一下什么是DevOps,虽然DevOps这个概念现在还没有标准的定义,但我们可以追溯一下其过去九年的历史发展过程(从2009年-2017年),列出几个相对明确又有所 ...

  10. GZip使用

    class Program { static void Main(string[] args) { //Trace.Listeners.Clear(); //Trace.Listeners.Add(n ...