bootstrap Table 的使用方法

然后添加css  找到bootstrap-table.min.css 添加进去

再添加JS

Js添加时  按照顺序添加

然后初始化bootstrap-table

<script type="text/javascript">
$(
function () {
//AJAX向后台请求
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
}

）；

然后用bootstrap-table

var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#Table1').bootstrapTable({
url: 'User.ashx?action=GetUserList', //请求后台的URL（*）
method: 'POST', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 2, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "no", //每一行的唯一标识，一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
field: 'FAccount',
title: '账号'
}, {
field: 'FName',
title: '名字'
},
{
field: 'FId',
title: '操作',
formatter: operateFormatter //自定义方法，添加操作按钮
},
],
rowStyle: function (row, index) {
var classesArr = ['success', 'info'];
var strclass = "";
if (index % 2 === 0) {//偶数行
strclass = classesArr[0];
} else {//奇数行
strclass = classesArr[1];
}
return { classes: strclass };
},//隔行变色
});

};

//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset
};
return temp;
};
return oTableInit;
};

function operateFormatter(value, row, index) {//赋予的参数
return [
'<a class="btn active disabled" href="#">添加用户</a>',
'<a class="btn active" href="#">删除用户</a>',
].join('');
}

后台不使用CS页面

再创建一个一般处理文件

ashx。cs页面  编辑后台

编辑你想要的表格就行了

跟上一个随笔连贯这用