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. Python3基础 函数 默认值参数示例

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  2. 破解JS加密：url unicode加密而已

    加密所在的地方:http://tool.chinaz.com/Tools/UrlCrypt.aspx?url=www.baidu.com 结果: http://%77%77%77%2E%62%61%6 ...

  3. centos常用配置收集

    配置ntp服务器: # vi /etc/ntp.conf driftfile /var/lib/ntp/driftrestrict -4 default kod notrap nomodifyrest ...

  4. PAT (Advanced Level) 1025. PAT Ranking (25)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  5. Memcached缓存系统介绍及安装

    1.什么是Memcached 1.1.Memcached概述 Memcached是一个免费的开源的.高性能的.具有又分布式内存对象的缓存系统,它通过减轻数据库负载加速动态WEB应用, 1.2.Memc ...

  6. Keepalived详细介绍简介

    1.1.Keepalived简介 Keepalived是Linux下一个轻量级别的高可用解决方案.高可用(High Avalilability,HA),其实两种不同的含义:广义来讲,是指整个系统的高可 ...

  7. js 如何动态添加数组_百度知道

    1.数组的创建var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长 ...

  8. Django 缓存系统

    Django 是动态网站,一般来说需要实时地生成访问的网页,展示给访问者,这样,内容可以随时变化,但是从数据库读多次把所需要的数据取出来,要比从内存或者硬盘等一次读出来 付出的成本大很多. 缓存系统工 ...

  9. 企业证书APP发布流程 分类： ios相关 app相关 2015-06-10 11:01 212人阅读 评论(0) 收藏

    企业发布app的 过程比app store 发布的简单多了,没那么多的要求,哈 但是整个工程的要求还是一样,比如各种像素的icon啊 命名规范啊等等. 下面是具体的流程 1.修改你的 bundle i ...

  10. RFID射频卡超市购物结算系统

    RFID射频卡超市购物结算系统 这段时间在做RFID射频卡超市购物结算系统,这个系统的设想来自于大学研究课题,但是我们在淘宝网上购买设备的时候淘宝店主都认为RF射频技术不好应用在超市购物结算系统,原因 ...