[MVC]bootstrap-table表格ajax获取json数据并分页(付源码)
json
适用于现代 C++ 的 JSON。
项目地址：https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
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;" οnclick="edit(' + row.id + ')">编辑</a>|',
'<a href="#" style="color:red;" οnclick="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"
}]
}效果预览：
源码下载：https://download.csdn.net/download/djk8888/10295919
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e
3 个月前
8c391e04
6 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)