分享在MVC3.0中使用jQuery DataTable 插件

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\" />';
}
}
]
});
});