效果:

html代码:

<!-- 工具容器 -->
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>选择修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>选择删除
</button>
<button id="btn_Import" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-import" aria-hidden="true"></span>导入
</button>
<button id="btn_export" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出
</button>
</div>
<!-- 表格容器 -->-->
<table id="tb_roles" data-filter-control="true" data-locale="zh-CN">
<thead>
<tr>
<th data-field="Name" data-filter-control="select">名称</th>
<th data-field="Age" data-filter-control="input">年龄</th>
<th data-field="Bir" data-filter-control="input">生日</th>
<th data-field="Photo" data-filter-control="input">图片地址</th>
<th data-field="Note" data-filter-control="input">简介</th>
<th data-field="CreateTime" data-filter-control="input">时间</th>
</tr>
</thead>
</table>

script代码:

<script type="text/javascript">
function InitTable() {

//销毁表格
$('#tb_roles').bootstrapTable('destroy');

$('#tb_roles').bootstrapTable({
url: '/SysSample/GetJsonList',//后台控制器
method: 'post',
toolbar: '#toolbar',//自定义工具栏
sidePagination: "server",//表示服务端请求
striped: true,
cache: false,//缓存
pagination: true,//分页栏
sortable: true,//排序
search: true,//启用查询
showColumns: true,
showRefresh: true,
minimumCountColumns: 2,
clickToSelect: true,
detailView: false,//父子表
queryParamsType: "undefined",
queryParams: function (params) {//设置查询数
return params;
},
onLoadSuccess: function () { //加载成功时执行
console.log("加载成功");
},
onLoadError: function () { //加载失败时执行
console.log("加载数据失败");
},
onClickRow: function (row, $element, idFeild) {

// idFeild指字段但是找不到
console.log(row);
},
responseHandler: function (res) {
//在ajax获取到数据,渲染表格之前,修改数据源
return res;
},
columns: [
{
field: 'state',
checkbox: true,
align: 'center',
valign: 'middle'
},{
title: '编号',
field: 'id'
}, {
title: '名字',
field: 'Name'
}, {
title: '年龄',
field: 'Age'
}, {
title: '生日',
field: 'Bir'
}, {
title: '图片',
field: 'Photo'
}, {
title: '介绍',
field: 'Note'
}, {
title: '创建时间',
field: 'CreateTime'
}],
toolbar: "#toolbar",
sortName: "CreateTime",//排序
sortOrder: "Asc",//排序方式
searchText: "Name",//查询字段
showColumns: true,
pagination: true, //启动分页
pageSize: 1, //每页显示的记录数
pageNumber: 1, //当前第几页
pageSize: 5,//页数量
pageList: [5, 10, 20, 30]
});
}

$(function () {

InitTable();

})

</script>

注:

有些问题还有待解决。。。例如:pageList没有起作用等等

推荐中文api:https://blog.csdn.net/Hu_Yanke/article/details/70670314

bootstrap table 学习记录的更多相关文章

  1. .Net MVC+bootstrap Table学习

    一.效果展示 二.使用方法 1).相关css和js的引用 <link href="~/Themes/Bootstrap/css/bootstrap.css" rel=&quo ...

  2. Bootstrap Metronic 学习记录(二)菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...

  3. Bootstrap Metronic 学习记录(一)简介

    1.简介 是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...

  4. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  5. Lua和C++交互 学习记录之四:全局table交互

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...

  6. 后台系统组件:一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  7. Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客

    ==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...

  8. Bootstrap table的基本使用总结

    最近在学习BootStrap构建页面,现记录BootStrap table 的一些基本使用如下: HTML文件: <!DOCTYPE html> <html> <meta ...

  9. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

随机推荐

  1. 在Windows下编译WebRTC

    前言 这篇文章的目的在于为你节省生命中宝贵的10小时(甚至更多),或者浪费你10分钟.作为Google更新频繁的大型跨平台基础库,WebRTC的编译一直被人称为噩梦.如果恰巧你偏要在Windows下编 ...

  2. BZOJ4695:最假女选手

    浅谈区间最值操作和历史最值问题:https://www.cnblogs.com/AKMer/p/10225100.html 题目传送门:https://lydsy.com/JudgeOnline/pr ...

  3. [转]unity3d中创建双面材质

    在其它三维软件中设置好的双面材质导入到unity3d中就失去了效果,不过我们可以通过自定义材质来在unity3d中实现双面材质的效果.步骤如下:1.在资源库中新建一新shader:代码如下: Shad ...

  4. 通过gitweb管理Puppet配置(nginx版本+lighttpd版)

    Puppet路径为:/etc/puppet 软件版本:gitweb-1.7.1-3.el6_4.1.noarch git-1.7.1-3.el6_4.1.x86_64 fcgi-2.4.0-12.el ...

  5. linux 时间处理 + 简单写log

    1s ==1000ms == 1,000,000us == 1,000,000,000 nanosecond uname -a Linux scott-Z170X 4.15.0-34-generic ...

  6. ES6学习之字符串的扩展

    字符的Unicode表示法 \uxxxx可以表示一个双字节的字符(xxxx表示字符编码,范围在0000---FFFF),超出此范围用两个双字节表示. console.log("\u0061& ...

  7. js提交数据时需判断是点击事件还是回车键

    使用回车键实质还是点击事件==回车时将焦点聚居在某个标签上. Html代码: <div id="btlogin" class="btlogin">& ...

  8. 解决启动SQL Server Management Studio 17时报Cannot find one of more components...的问题

    刚装好SSMS 17.1准备体验,弹出: 一番搜索,普遍办法都是安装VS2015独立shell.删除某个注册表项什么的,没用,首先这个shell我是装了的,然后也没有那个注册表项.我自己尝试过重装sh ...

  9. C语言学习笔记--接续符和转义符

    1.C语言中的接续符 (1)编译器将反斜杠剔除,跟在反斜杠后面的字符自动接续到前一行 (2)在接续单词时,反斜杠之后不能有空格,反斜杠下一行之前也不能有空格 (3)接续符适合在宏定义代码块时使用 #i ...

  10. 关于RTC的浅学

    最近公司业务主要是移动客户端,所以免不了客户端与服务端之间的通信.第一次接触通信,做点基本概念的笔记. 主要架构是:openfire+xmpp+play+移动客户端,下文理下这几个概念. OpenFi ...