1. Models

 public class Citys

    {

        public int Id { get; set; }

        public string CityName { get; set; }

        public int ZipCode { get; set; }

    }

2. Controller

 public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult GetJsonCitys(int? secho)

        {

            var cityList = new List<Citys>();

            for (int i = ; i < ; 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;

        }

    }

3. Views

@{

    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..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..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[] + '\">查看详情</a>  <input tag=\"' + obj.aData[] + '\" 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>

例子下载:

http://down.51cto.com/data/892223

在ASP.NET MVC中使用JQ插件datatable的更多相关文章

  1. ASP.NET MVC 中使用 AjaxFileUpload 插件时，上传图片后不能显示（预览）

    AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...

  2. 在Asp.Net MVC中使用NPOI插件实现对Excel的操作（导入，导出，合并单元格，设置样式，输入公式）

    前言 NPOI 是 POI 项目的.NET版本,它不使用 Office COM 组件,不需要安装 Microsoft Office,目前支持 Office 2003 和 2007 版本. 1.整个Ex ...

  3. [Asp.net mvc]Asp.net mvc 中使用LocalStorage

    目前使用比较多的本地存储方案有比如Flash SharedObject.Google Gears.Cookie.LocalStorage.User Data.Open Database等方案.综合比较 ...

  4. 如何在 ASP.NET MVC 中集成 AngularJS（2）

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  5. 如何在 ASP.NET MVC 中集成 AngularJS（1）

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  6. Asp.net mvc 中View 的呈现(二)

    [toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...

  7. Vue在ASP.NET MVC中的进行前后端的交互

    Vue在ASP.NET MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下 ...

  8. 在ASP.NET MVC中实现区域或城市选择

    每次在"万达影城"网上购票总会用到左上角选择城市的功能.如下: 今天就在ASP.NET MVC中实现一下.我想最好的方式应该是写一个插件,但自己在这方面的功力尚欠缺,如果大家在这方 ...

  9. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

随机推荐

  1. 配置cinder使用NFS后端

    首先先使用“cinder delete”命令删除所有实例,释放磁盘空间. 停止cinder服务:service openstack-cinder-api stopservice openstack-c ...

  2. 深入浅出Ajax（五）

    function initPage() { alert("3+3");//3+3 alert(eval("3+3")); //6 //eval()函数可以解析. ...

  3. web beacon

    网络臭虫又叫 网络信标(Web beacon), 是可以暗藏在任何网页元素或邮件内的1像素大小的透明GIF或PNG图片 可以理解为<img src="http://www.webbea ...

  4. （五）Jquery Mobile列表

    Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset=& ...

  5. 7 -- Spring的基本用法 -- 11...

    7.11 基于XML Schema的简化配置方式 Spring允许使用基于XML Schema的配置方式来简化Spring配置文件. 7.11.1 使用p:命名空间简化配置 p:命名空间不需要特定的S ...

  6. Jboss 集群配置

    环境配置:CentOS 7 x64 * 3 IP:  172.24.0.100        172.24.0.101        172.24.0.102 服务器配置: 172.24.0.100 ...

  7. (简单) POJ 3321 Apple Tree，树链剖分+树状数组。

    Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow ...

  8. kafka第四篇--快速入门（如何使用kafka）

    Quick Start Step 1: Download the code Download the 0.8 release. > tar xzf kafka-<VERSION>.t ...

  9. RestTemplate 发送Post 多个参数请求

    MultiValueMap<String, String> requestEntity = new LinkedMultiValueMap<>(); requestEntity ...

  10. DateTime.CompareTo方法

    DateTime.CompareTo(value)方法,与一个时间比较,返回整数,含义如下: 值 说明 小于零 此实例早于 value. 零 此实例与 value 相同. 大于零 此实例晚于 valu ...