BootStrap的表格加载json数据，并且可以搜索，选择
2018.4.11日更新，8号的时候我推荐去官网下载，但是那个版本不知道为什么我无法使用 $table.bootstrapTable('getSelections'); 无论如何。。。然后我尝试着更换了NuGet里面的bootstrap-table,然后就可以了.....需要一题的是，Nuget里面有两个bootstrap-table,只需要下载那个MVC的就可以了，第一个没卵用.....
2018.4.8日更新，NuGet里面的bootstrap-table插件版本太低了，所以可以去官网下载，但是下载好的里面有两个文件夹，一个是src,一个是dist,这两个里面都有js,都有css,但是这里需要注意的是，只能引用src文件夹下面的才可以用!
2018.3.30日更新，我使用我的这篇博客在我的笔记本上想实现这个功能，但是完全没有用，进不去bootstrapTable这个方法，而且完全不知道哪里错了，然后在我的乱搞之下。。。成功了。。。
注意
<script src="~/Scripts/bootstrap-table.js"></script> 错误 <script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script> 正确
这两个js是完全不一样的，上面那个没有用的，只有下面的那个才有用。。。。原因是因为我在NuGet里面下载了两个bootstrap-table,带MVC的那个可以用，第一个不能用，所以引用也是错误的。
我会了EasyUI的方法，但是这个Bootstrap的一直不会，看了下某个项目里的实现方式，居然是读出数据然后循环加<td>。。。。
我又在网上搜索其它的方法，毫无例外的提到了bootstrapTable这个方法，这个方法分为客户端和服务器两种方式，暂时我还不清楚两种方式之间的区别，待研究。
第一步：引用
@*1、Jquery组件引用*@ <script src="~/Scripts/jquery-3.0.0.js"></script> @*2、bootstrap组件引用*@ <script src="~/Scripts/bootstrap.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> @*3、bootstrap table组件以及中文包的引用*@ <script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script> <link href="~/Content/bootstrap-table.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
Bootstrap的表格是需要一个插件的！！！ 去NuGet下！
第二步：写js和html
@{ Layout = "~/Views/Shared/_Layout.cshtml"; } <div class="panel-body" style="padding-bottom:0px;"> <div id="toolbar" class="btn-group"> <button id="btn" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>选课 </button> </div> <table id="table"></table> </div> <script> $(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 () { $('#table').bootstrapTable({ url: '/SelectCourse/GetCourseTable', //请求后台的URL（*） method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） pageList: [5, 25, 50, 100], //可供选择的每页的行数（*） search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle: true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ fileid: 'state', checkbox: true, formatter: function (value, row, index) { //加复选框 //if (index === 2) { // return { // disabled: true, // checked: true // } //} console.info(value); return value; } }, { field: '课程编号', title: '课程编号', }, { field: '课程名', title: '课程名' }, { field: '授课老师', title: '授课老师' }, { field: '上课地点', title: '上课地点' }, { field: '上课时间', title: '上课时间' }, { field: '课程介绍', title: '课程介绍' }] }); }; oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 //limit: params.limit, //页面大小 //offset: params.offset, //页码 departmentname: $("#txt_search_Coursename").val(), statu: $("#txt_search_Teacher").val(), search: params.search //加了这个，就可以使用自带的搜索功能了 }; return temp; }; return oTableInit; }; var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { //初始化页面上面的按钮事件 }; return oInit; }; $('#table').on('click-row.bs.table', function (e, row, $element) { $('.success').removeClass('success'); $($element).addClass('success'); }); var $table = $('#table'), //可写可不写 $button = $('#btn'); $button.click(function () { //因为这个，你可以编辑表格了！ var result = $table.bootstrapTable('getSelections'); alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections'))); var ids = []; for (var i = 0; i < result.length; i++) { var item = result[i]; //ids.push(item.授课老师); } alert(ids); }) </script>
第三步：写ActionResult
方法1.写死json字符串，这个可以作为测试，实际项目都是从json文本或数据库取得数据
public ActionResult list() { string json = "{\"total\":2,\"rows\":[{\"id\":\"1\",\"name\":\"Vae\",\"time\":\"2017\",\"state\":\"0\"},{\"id\":\"2\",\"name\":\"蜀云泉\",\"time\":\"2017\",\"state\":\"很好\"}]}"; return Content(json); }
这里需要注意，要total和rows这两个东东，而且这个貌似是服务器端特有的，客户端没有total，具体的东西要去GitHub上找官方示例，我暂且搁置。
方法2.从数据库取数据
public ActionResult GetCourseTable(string departmentname, string statu, string search)
{
if (search !="")
{
sql = $"select* from Course where 课程名 like '%{search}%' or 授课老师 like '%{search}%'";
}
DataTable dt= sqlHelper.SqlConnectionInformation(sql);
var rows = JsonConvert.SerializeObject(dt);
string json = $"{{\"total\":{dt.Rows.Count},\"rows\":{rows}}}";
return Content(json);
}
参数那里，写了search，就可以用自带的功能了，你只需要写个sql就行了，然后取数据存入DataTable,然后JsonConvert序列化成json格式的，完事。
效果图：
