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. JAVA基础-多态

    多态 polymophism: 动态绑定, 迟绑定, 指在执行期间(java), 而不是编译期间(javac), 判断所引用对象的实际类型, 根据实际类型调用响应的方法. 3个条件: 1. 继承 2. ...

  2. Android Guts: Intro to Loopers and Handlers

    One of the reasons I love Android API is because it contains so many useful little things. Many of t ...

  3. Ketama Consisent Hash

    问题描述 有一些目标节点 v1, v2...vn 需要一个算法,能够将任意key映射到目标节点中的一个vx 评价方式 1. 对于一个比较大的key集合,分布在各个目标节点的key的数量要尽可能均匀 2 ...

  4. k-means算法的Python实现

    #coding=utf-8 import codecs import numpy from numpy import * import pylab def loadDataSet(fileName): ...

  5. Oracle case 关键字的使用

    select e.salary, --case 语句开始 case then salary else salary end new_salary --case 语句结束,可见也和存储过程等结束方式一样 ...

  6. 使用SQLServer2005插入一条数据时返回当前插入数据的ID

    使用SQLServer2005插入一条数据时返回当前插入数据的ID 在执行完插入后 再执行 select @@identity from users 就OK 就是刚才插入的那行的 ID了 补充: @@ ...

  7. Cocos2dx 学习笔记整理----场景切换

    据说Cocos2dx场景切换的方法有32种:cocos2dx 常见的32种切换场景的动画 无需一一求证,只需要知道切换场景需要怎么做就行了. 作为导演CCDirector,切换场景的事情当然归它管了. ...

  8. iOS推送跳转AppDelegate跳转VC

    在开发项目中,会有这样变态的需求: 推送:根据服务端推送过来的数据规则,跳转到对应的控制器 feeds列表:不同类似的cell,可能跳转不同的控制器(嘘!产品经理是这样要求:我也不确定会跳转哪个界面哦 ...

  9. Mac下安装包管理平台Homebrew（Mac 10.12）

    在终端上输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/maste ...

  10. 170112、solr从服务器配置整合到项目实战

    整合网上资源后 100%可运行的配合步骤,部署在tomcat 为例. 一:下载solr,版本为5.2.1 地址:http://pan.baidu.com/s/1eRAdk3o 解压出来. 1.在解压的 ...