html:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <script src="~/js/jquery.min.js"></script> <script src="~/js/bootstrap.min.js"></script> <script src="~/js/bootstrap-table.js"></script> <link href="~/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/css/bootstrap-table.css" rel="stylesheet" /> <style> /*自定义行间色*/ .white { background-color: white; } .lightblue { background-color: lightblue; } </style> <script type="text/javascript"> $(function () { //初始化Table var oTable = new TableInit(); oTable.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#table').bootstrapTable({ url: '/Ajax/GetData',//请求后台的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: [10, 25, 50, 100],//可供选择的每页的行数(*) search: true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 contentType: "application/x-www-form-urlencoded", strictSearch: true, showColumns: true,//是否显示所有的列 showRefresh: true,//是否显示刷新按钮 minimumCountColumns: 2,//最少允许的列数 clickToSelect: true,//是否启用点击选中行 height: 700,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id",//每一行的唯一标识,一般为主键列 showToggle: true,//是否显示详细视图和列表视图的切换按钮 cardView: false,//是否显示详细视图 detailView: false,//是否显示父子表 columns: [ { field: 'id', title: '编号' }, { field: 'name', title: '名字' }, { field: 'price', title: '价格' }, { field: 'operate', title: '操作', formatter: operateFormatter //自定义方法,添加操作按钮 }, ], rowStyle: function (row, index) { var classesArr = ['white', 'lightblue']; 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,//页面大小 //pageNumber: params.pageNumber,//页码 offset: params.offset }; return temp; }; return oTableInit; }; function operateFormatter(value, row, index) {//赋予的参数 return [ '<a href="#" style="color:blue;" onclick="edit(' + row.id + ')">编辑</a>|', '<a href="#" style="color:red;" onclick="del(' + row.id + ')">删除</a>', ].join(''); } </script> <script type="text/javascript"> function edit(id) { alert("编辑:" + id);//弹出编辑窗体...用ajax...更新(略)... } function del(id) { confirm("删除:" + id);//用ajax...删除(略)... } </script> </head> <body> <div> <table id="table"></table> </div> </body> </html>
ajax:
using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace bootstrap_table_mvc.Controllers { public class AjaxController : Controller { // GET: Ajax public ActionResult GetData(int limit, int offset) { //此处应从数据库中取得数据: var data = new List<MyClass>(){ new MyClass{id=0, name="test0", price="$0"}, new MyClass{id=1, name="test1", price="$1"}, new MyClass{id=2, name="test2", price="$2"}, new MyClass{id=3, name="test3",price="$3" }, new MyClass{id=4, name="test5",price="$4" }, new MyClass{id=5, name="test5",price="$5" }, new MyClass{id=6, name="test6",price="$6" }, new MyClass{id=7, name="test7",price="$7" }, new MyClass{id=8, name="test8",price="$8" }, new MyClass{id=9, name="test9",price="$9" }, new MyClass{id=10, name="test10",price="$10" }, new MyClass{id=11, name="test11",price="$11" }, new MyClass{id=12, name="test12",price="$12" }, new MyClass{id=13, name="test13",price="$13" }, new MyClass{id=14, name="test14",price="$14" }, new MyClass{id=15, name="test15",price="$15" }, new MyClass{id=16, name="test16",price="$16" }, new MyClass{id=17, name="test17",price="$17" }, new MyClass{id=18, name="test18",price="$18" }, new MyClass{id=19, name="test19",price="$19" }, new MyClass{id=20, name="test20",price="$20" }, new MyClass{id=21, name="test21",price="$21" }, }; var total = data.Count; var rows = data.Skip(offset).Take(limit).ToList(); return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet); } public class MyClass { public int id { get; set; } public string name { get; set; } public string price { get; set; } } } }
json:
{ "total": "16", "rows": [{ "id": 0, "name": "test0", "price": "$0" }, { "id": 1, "name": "test1", "price": "$1" }, { "id": 2, "name": "test2", "price": "$2" }, { "id": 3, "name": "test3", "price": "$3" }, { "id": 4, "name": "test5", "price": "$4" }, { "id": 5, "name": "test5", "price": "$5" }, { "id": 6, "name": "test6", "price": "$6" }, { "id": 7, "name": "test7", "price": "$7" }, { "id": 8, "name": "test8", "price": "$8" }, { "id": 9, "name": "test9", "price": "$9" }] }
效果预览: