最近做项目的时候发现了一个很好的JQuery插件DataTable但是网上相关的资料好像很少，本人英文不咋滴在官网上除了知道点哪能下载外其它就都不知道鸟。后来用了个把小时写了个小demo，分享给大家，希望对大家有用。因为刚用不太熟悉写滴不好请大家多多指教，一起进步。
demo结构如下图
Images目录下是DataTable用到的皮肤图片。
Models 目录存放的是实体类。
Scripts 目录存放的是脚本文件。
Scripts/Plug-in目录下存放的是DataTable的语言文件和插件的脚本文件。
Style 目录存放的是DataTable用到的css文件。
页面文件如下，脚本部分bProcessing、bServerSide 、sAjaxSource 是必要滴，aoColumns属性如果你对呈现的表格需要做处理的话比如增加个“操作”列什么的可以在这个属性中进行定制。
Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="@Url.Content("~/Style/demo_page.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Style/jquery-ui-1.8.4.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Style/demo_table_jui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Plug-in/jquery.dataTables.js")" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#DataTable').dataTable({
"oLanguage": {//语言国际化
"sUrl": "/Scripts/Plug-in/jquery.dataTable.cn.txt"
},
"bJQueryUI": true,
"sPaginationType": "full_numbers",
'bPaginate': true, //是否分页。
"bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。
"bServerSide": false,
"sAjaxSource": "Home/GetJsonCitys",
"aoColumns": [
{ "sTitle": "编号", "sClass": "center" },
{ "sTitle": "城市名称", "sClass": "center" },
{ "sTitle": "邮政编码", "sClass": "center" },
{
"sTitle": "操作",
"sClass": "center",
"fnRender": function (obj) {
return '<a href=\"Details/' + obj.aData[0] + '\">查看详情</a> <input tag=\"' + obj.aData[0] + '\" type=\"checkbox\" name=\"name\" />';
}
}
]
});
});
//aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。
//对于每一个列对象： sTitle 定义列的标题 sClass 定义列的样式
//fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。
//当然了，对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。
</script>
</head>
<body style="font-size: 12px;">
<table class="display" id="DataTable">
<thead>
<tr>
<th>
Id
</th>
<th>
CityName
</th>
<th>
ZipCode
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="@Url.Content("~/Style/demo_page.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Style/jquery-ui-1.8.4.custom.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Style/demo_table_jui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Plug-in/jquery.dataTables.js")" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#DataTable').dataTable({
"oLanguage": {//语言国际化
"sUrl": "/Scripts/Plug-in/jquery.dataTable.cn.txt"
},
"bJQueryUI": true,
"sPaginationType": "full_numbers",
'bPaginate': true, //是否分页。
"bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。
"bServerSide": false,
"sAjaxSource": "Home/GetJsonCitys",
"aoColumns": [
{ "sTitle": "编号", "sClass": "center" },
{ "sTitle": "城市名称", "sClass": "center" },
{ "sTitle": "邮政编码", "sClass": "center" },
{
"sTitle": "操作",
"sClass": "center",
"fnRender": function (obj) {
return '<a href=\"Details/' + obj.aData[0] + '\">查看详情</a> <input tag=\"' + obj.aData[0] + '\" type=\"checkbox\" name=\"name\" />';
}
}
]
});
});
//aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。
//对于每一个列对象： sTitle 定义列的标题 sClass 定义列的样式
//fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。
//当然了，对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。
</script>
</head>
<body style="font-size: 12px;">
<table class="display" id="DataTable">
<thead>
<tr>
<th>
Id
</th>
<th>
CityName
</th>
<th>
ZipCode
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
为了方便大家使用我把DataTable的一些属性做了整理，在Demo中可以找到完整版。 如下图
以下是HomeController中的代码，由于是Demo，代码写滴有点恶，请大家原谅^^。DataTable插件要求的数据格式是以逗号进行分隔的数组或字符串，
如["column1value","column2value","column3value"]，
在服务器返回的数据格式要求与下示例相同，属性的含义请参考Demo中的Excel，在此就不多写了。我会把需要注意或容易写错的地方写上注释。
{
"sEcho": 3,
"iTotalRecords": 57,
"iTotalDisplayRecords": 57,
"aaData": [ //aaData此属性不能改名，DataTable插件使用就是使用这个属性进行数据表的填充，丫这个属性坑了爹好长时间。
[
"Gecko",
"Firefox 1.0",
"Win 98+ / OSX.2+",
"1.7",
"A"
],
[
"Gecko",
"Firefox 1.5",
"Win 98+ / OSX.2+",
"1.8",
"A"
]
] }
"sEcho": 3,
"iTotalRecords": 57,
"iTotalDisplayRecords": 57,
"aaData": [ //aaData此属性不能改名，DataTable插件使用就是使用这个属性进行数据表的填充，丫这个属性坑了爹好长时间。
[
"Gecko",
"Firefox 1.0",
"Win 98+ / OSX.2+",
"1.7",
"A"
],
[
"Gecko",
"Firefox 1.5",
"Win 98+ / OSX.2+",
"1.8",
"A"
]
] }
controller中的内容
HomeControllerpublic ActionResult GetJsonCitys(int? secho)
{
var cityList = new List<Citys>();
for (int i = 0; i < 100; i++)
{
cityList.Add(new Citys
{
Id = i,
CityName = Guid.NewGuid().ToString(),
ZipCode = DateTime.Now.Millisecond
});
}
var objs = new List<object>();
foreach (var city in cityList)
{
objs.Add(GetPropertyList(city).ToArray());
}
return Json(new
{
sEcho = secho,
iTotalRecords = cityList.Count(),
aaData = objs
}, JsonRequestBehavior.AllowGet);
}
private List<string> GetPropertyList(object obj)
{
var propertyList = new List<string>();
var properties = obj.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public);
foreach (var property in properties)
{
object o = property.GetValue(obj, null);
propertyList.Add(o == null ? "" : o.ToString());
}
return propertyList;
}
{
var cityList = new List<Citys>();
for (int i = 0; i < 100; i++)
{
cityList.Add(new Citys
{
Id = i,
CityName = Guid.NewGuid().ToString(),
ZipCode = DateTime.Now.Millisecond
});
}
var objs = new List<object>();
foreach (var city in cityList)
{
objs.Add(GetPropertyList(city).ToArray());
}
return Json(new
{
sEcho = secho,
iTotalRecords = cityList.Count(),
aaData = objs
}, JsonRequestBehavior.AllowGet);
}
private List<string> GetPropertyList(object obj)
{
var propertyList = new List<string>();
var properties = obj.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public);
foreach (var property in properties)
{
object o = property.GetValue(obj, null);
propertyList.Add(o == null ? "" : o.ToString());
}
return propertyList;
}
ps:呈现图表的容器你最好还是用<table>。嘿嘿！
最终滴效果图：
不好意思，刚才忘了加下载连接，点击下载