首先附上本人有道云笔记链接，内含插件下载以及详细解读
1、引用顺序
2、body部分
<div>
//这边是定义表格左上角的按钮
<div id="toolbar">
<button class="Export" title="Export Excel" type="button" style="width:40px; height:40px; float:left; margin-left:10px;" onclick="ExportExcel()">
<i class="fa fa-file-excel-o"></i>
</button>
</div>
<table id="XXX" class="table table-striped table-bordered table-hover dataTables-example" style=" table-layout:fixed ;"></table>
</div>table标签中的class是让表格可以自定义宽度；//可根据需求写或不写
3、js部分
//页面初始化
$(function(){
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
})
//表格
var TableInit=function(){
var oTableInit =new Object();
//初始化Table
oTableInit.Init = function () {
$('#xxx').bootstrapTable({
url: '../method/xxx.ashx',//请求数据的地址
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: function (param) {
return {
"limit": param.limit, //页面大小
"offset": param.offset, //页码"order": param.order,
"sort": param.sort,//排序的字段
"order": param.order,//排序规则
"search": param.search,//全局搜索框值
"action":'xxx'//一般处理程序中自定义的方法名
};
},
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 30, 50], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: h, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
rownumbers: true,//显示一个行号列
columns: [
{
field: 'ID',
align: "center",
width: 55,
title: 'ID',
sortable: true
}, {
field: 'Position',
align: "center",
width: 140,
sortable: true,
title: 'Position',
class: 'colStyle',
}, {
field: 'SubBU',
align: "center",
width: 160,
sortable: true,
title: 'Customer',
class: 'colStyle',
}, {
field: 'Priority',
align: "center",
width: 110,
sortable: true,
title: 'Priority',
class: 'colStyle',
}, {
field: 'Status',
align: "center",
width: 140,
title: 'Status',
class: 'colStyle',
}
]
})
}
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
};
return temp;
};
return oTableInit;
}
//表格按钮
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
};
return oInit;
};ashx实现分页，排序:
引用：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;一般处理程序
//初始加载
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"].ToString();
System.Reflection.MethodInfo methodinfo = this.GetType().GetMethod(action);
if (methodinfo != null)
{
methodinfo.Invoke(this, new object[] { context });
}
}
//自定义方法,xxx为js传过来的action方法名
public void xxx(HttpContext context)
{
int limit = Convert.ToInt32(context.Request["limit"]);//页面大小
string search = context.Request["search"];//搜索的条件
int offset = Convert.ToInt32(context.Request["offset"]);//页码
string sort = context.Request["sort"];
string order = context.Request["order"];
List<Model.View_Position> elist = new List<Model.View_Position>();
elist = BLL.select(userid,role, search,priority,status);
//给elist赋值；
try{
//如果此时用户点击某一列头，想进行排序，则sort值为列的field
if (sort != null)
{
//判断排序规则是升序还是降序
if (order == "asc")
{
elist = elist.OrderBy(p => GetPropertyValue(p, sort)).ToList();
}
else
{
elist = elist.OrderByDescending(p => GetPropertyValue(p, sort)).ToList();
}
}
//分页
List<Model.View_Position> pageData =
elist.Skip(offset).Take(limit).ToList();
int totalcount = elist.Count;
var data = new
{
rows = pageData,
total = totalcount
};
JavaScriptSerializer jj = new JavaScriptSerializer();
context.Response.Write(jj.Serialize(data));
}
catch{
}
}
//通过反射实现动态列名排序
private static object GetPropertyValue(object obj, string property)
{
System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);
return propertyInfo.GetValue(obj, null);
}其他详细教程请参考链接：
