码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap datatable

时间:2017-02-15 19:02:40      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:sharp   ber   方式   push   gen   user   查询参数   fresh   ble   

<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>‘;
}

  

bootstrap datatable

标签:sharp   ber   方式   push   gen   user   查询参数   fresh   ble   

原文地址:http://www.cnblogs.com/lgjc/p/6402353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!