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. sqlite manager

    http://www.isummation.com/blog/how-to-use-sqlite-manager-extension-in-firefox/ 工具条上右键选定制

  2. [算法] trie树实现

    小写字母的字典树 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAXN 1 ...

  3. AOJ2249最短路＋最小费用

    题意:求出某个点到其他点的最短路,并求出在最短路情况下的最小费用 分析:用dijkstra求出最短路并同时更新最小费用即可,注意的是在最短路长度相同时费用取最小即可 #include <iost ...

  4. Frequent Distribution sorted by frequency

    import nltk def freq_sorted(text,ranklimit): fd=nltk.FreqDist(text) cumulative = 0.0 for rank, (word ...

  5. kafka第五篇

    架构设计:http://www.linuxeden.com/html/news/20130309/136716_2.html 代码实现consumer 和producer

  6. POJ3723最小生成树

    题意:从一个起点出发连接男孩子和女孩子,若是两者之间有连接的,则花费为10000-d,若是没有连接的则花费为10000 分析:很显然是一个最小生成树,但是我们希望的是d越大越好,因为d越大,10000 ...

  7. Android实时监听网络状态

    Android实时监听网络状态(1)   其实手机在网络方面的的监听也比较重要,有时候我们必须实时监控这个程序的实时网络状态,android在网络断开与连接的时候都会发出广播,我们通过接收系统的广播就 ...

  8. (中等) UESTC 360 Another LCIS ，线段树+区间更新。

    Description: For a sequence S1,S2,⋯,SN, and a pair of integers (i,j), if 1≤i≤j≤N and Si<Si+1<S ...

  9. mysql 数据库 切表的脚本

    #!/bin/sh host=$1 port=$2 host=${host:="localhost"}  #host没赋值,那么就赋值为localhost port=${port: ...

  10. 设计模式笔记之二：Android开发中的MVP架构（转）

    写在前面,本博客来源于公众号文章:http://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid=402435540&idx=1&sn ...