MVC3.0中使用JQuery.DataTable插件
http://biancheng.dnbcw.info/net/350648.html
官方网站
http://datatables.net/
HomeController
public 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;
}<span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"><table class="display" id="DataTable"></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> <thead></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> <tr></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> <th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> Id</span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> <th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> CityName</span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> <th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> ZipCode</span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> <th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> 操作</span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </th></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </tr></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </thead></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> <tbody></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </tbody></span><br style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);" /><span style="font-family: Simsun; font-size: 14px; line-height: 25px; background-color: rgb(244, 251, 244);"> </table></span>
<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" />';
}
}
]
});
});