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

http://www.cnblogs.com/ryanding/archive/2011/02/18/1957318.html

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