数据表格

一般要实现增添，删减，查询以及修改数据，前提都要有一个数据表格来让我们使用。
创建数据表格其实很简单，只要在页面上放置一个table元素就行，具体的就这样

，其中demo是自己定义的类，
在页面上：var TabTitles;// layui表格
var layerIndex = 0;
var layer, layuiTable;// 保存layui模块以便全局使用
$(document).ready(function () {// table数据操作
layui.use([‘table’, ‘layer’], function () {
layer = layui.layer, layuiTable = layui.table;//绑定表格数据
TabTitles = layuiTable.render({
elem: ‘#tabTitles’,
data: [],
toolbar: ‘#toolBarBtn’,
cols: [[
{ title: ‘序号’, type: ‘numbers’ },//序号列，title设定标题名称
{ title: ‘选择’, type: ‘checkbox’ },
{ title: ‘A类用户’, field: ‘AclassUser’, align: ‘center’, width: ‘9%’ },
{ title: ‘B类用户’, field: ‘BclassUser’, align: ‘center’, width: ‘9%’ },
{ title: ‘C类用户’, field: ‘CclassUser’, align: ‘center’, width: ‘9%’ },
{ title: ‘宽带’, field: ‘Broadband’, align: ‘center’, width: ‘9%’ },
{ title: ‘固话’, field: ‘FixedLine’, align: ‘center’, width: ‘9%’ },
{ title: ‘小灵通’, field: ‘PHS’, align: ‘center’, width: ‘9%’ },
{ title: ‘其它’, field: ‘Other’, align: ‘center’, width: ‘9%’ },
{ title: ‘工作重点’, field: ‘KeyPointsWork’, align: ‘center’, width: ‘9%’ },
{ title: ‘挽回计划’, field: ‘RecoveryPlan’, align: ‘center’, width: ‘9%’ },
{ title: ‘状态’, templet: titleState, width: 100, align: ‘center’, fixed: ‘right’ }]],
page: { limit: 10, //每页显示的条数（默认：10）
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
}, //limits Array每页条数的选择项，默[10,20,30,40,50,60,70,80,90]
})}
function tabTitleInforSearch() {
var stem = $("#txtSearch").val();
if (stem == null || stem == undefined) {
stem == “”;}
TabTitles = layuiTable.reload(“tabTitles”, {
url: “/WoDeGoZuo/SelectWorkPlan”,
page: {
curr: 0},
where: {JobDiaryID: 0,
}
});
}});
在控制器上：
//审核月计划
public ActionResult SelectWorkPlan(LayuiTablePage layuiTablePage)//对应视图那边的url接口
{//workPla：要查的表
List list = (from tbWorkPlan in myModel.WorkPlan
select tbWorkPlan
).ToList();
int totals = list.Count();
list = list.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit).ToList();
LayuiTableData layuiTable = new LayuiTableData();
layuiTable.data = list;
layuiTable.count = totals;
return Json(layuiTable, JsonRequestBehavior.AllowGet);
}
在页面的效果：

在数据库中的数据：