在web开发中，经常会遇到使用table用于展示数据。今天就记录一下基于Bootstrap的插件bootstrap DataTables的使用,共三篇，包含基本使用，服务端分页，编辑功能。
官方网址：https://www.datatables.net/
1 开发环境
windows 10
MVC4
Bootstrap
2 Datatables 基本使用
官方网址上给定了两个功能版本，一个是蓝色的 DataTables，免费使用，自带前段分页和搜索，十分好用，但是无编辑功能。另一个红色的Editor是收费项目，其实就是多提供了一个dataTables.editor.min.js，
包含编辑等多种操作功能，以及对多种web编程的支持。这里直接以最近项目使用为例，实现 ajax后台传送json到前台展示。
效果展示（数据涉及隐私已打码）
最终效果
前端代码
在HTML页面中引入相关js和css，我的已经下载到本地
<link href="@Url.Content("~/ADminLETUI/plugins/datatables/jquery.dataTables.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/ADminLETUI/plugins/jQuery/jquery-1.12.3.js")"></script>
<script src="@Url.Content("~/ADminLETUI/plugins/datatables/jquery.dataTables.min.js")"></script>
<script src="@Url.Content("~/ADminLETUI/plugins/datatables/dataTables.buttons.min.js")"></script>
HTML 代码
<table id="example" class="display" cellpadding="0" width="100%">
<thead>
<tr>
<th>公司别</th>
<th>工号</th>
<th>姓名</th>
<th>卡号</th>
<th>Cost Center</th>
<th>权限</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
</table>
js方法
function ShowTables() {
var actionurl;
actionurl = '@Url.Action("GetEmployeeAuthList", "Employee")';
$('#example tbody').off('click');
$('#example').DataTable().destroy();//每次加载前必须销毁一下，不然会有异常
var dt = $('#example').DataTable({
ajax: {
type: 'post',
url: actionurl,//调用地址
dataSrc: 'data',
data: { //需要传入后代的数据
Site: $('#Site').val(),
Emplid: $('#Emplid').val(),
Chinam: $('#Chinam').val(),
Neweid: $('#Neweid').val(),
Depcod: $('#Depcod').val(),
DoorGroupID: $('#uDoorGroupID').val(),
},
error: function (xhr, status, error) {
alert(xhr)
}
},
columns: [//绑定数据到html页面中的栏位，th个数必须与data传递值保持一致
{ "data": "Site" },
{ "data": "Emplid" },
{ "data": "Chinam" },
{ "data": "Neweid" },
{ "data": "Depcod" },
{ "data": "DoorGroupName" },
{ "data": "Status" },
{
data: null,//自定义返回数据，这里添加一个编辑按钮，并指定其id为后面做编辑功能准备
className: "center",
render: function (data, type, row) {
return '<a href="" id="' + data.Neweid + '" class="fa fa-fw fa-lg fa-edit editor_edit"></a>';
}
}
],
select: true,//可选中显示
processing: true//显示loading
});
}
还可以在tr上添加选中事件
$('#example tbody').on('click', 'tr', function () {
......
});
}
后端代码
Datatables能够处理的jaso格式为如下，要实现一个实体类，方便转换为json，供Datatables进行解析处理。
{
"data": [
[数据]，[数据]
]
}
在models中添加一个 TEmployeeAuth.cs
public class TEmployeeAuth
{
public string DT_RowId { get { return Emplid.ToString() + "_" + DoorGroupID.ToString() + "_" + Neweid.ToString(); } }//此项必须实现，会在tr上自动添加id，为后面处理数据提供很多便捷
public string Site { get; set; }
public string Emplid { get; set; }
public string Chinam { get; set; }
public string Neweid { get; set; }
public string Depcod { get; set; }
public string DoorGroupID { get; set; }
public string Status { get; set; }
public string DoorGroupName { get; set; }
}
在实现一个TEmployeeAuthList.cs
public class TEmployeeAuthList
{
public List<TEmployeeAuth> data { get; set; }
}
然后在EmployeeController中实现GetEmployeeAuthList 的post方法传递数据到前段。整个简单应用完成。
下一篇 服务器分页
