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" οnclick="popedit('+row.id+');">编辑</a> '+
'<a href="javascript:void(0)" title="删除" class="ui-icon icon-remove grey" οnclick="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');

转载于:https://www.cnblogs.com/lgjc/p/6402353.html