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. Swift 开发中Alamofire的使用

    Swift 开发中Alamofire的使用 Alamofire需要解决的6个问题 1.Json解析 2.下载和上传 4.全局401错误 5.网络图片

  2. UVa 816 Abbott的复仇（BFS）

    寒假的第一道题目,在放假回家颓废了两天后,今天终于开始刷题了.希望以后每天也能多刷几道题. 题意:这道BFS题还是有点复杂的,给一个最多9*9的迷宫,但是每个点都有不同的方向,每次进入该点的方向不同, ...

  3. 一道js题

    <script> var a = 5; function test(){ this.a = 10; a = 15 this.func = function(){ var a = 20 ; ...

  4. JS的事件动态绑定机制

    动态添加标签+动态添加事件 window.onload=function(){ (已存在元素节点)事件绑定: (未来元素节点)事件绑定: } 它会扫描元素节点,如果元素节点存在(静态写好的),就可以绑 ...

  5. JS——基础知识（三）

    1.select (1)它的选择事件是onchange (2)他的选项索引可以通过value获取,比tab选项卡要方便一点. 2.数组常用方法 (1)添加元素 push():可以向一个数组末尾添加一个 ...

  6. 漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

    一个像素边框的表格: Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Text 2B Text 2C ...

  7. [iOS Animation]-CALayer 专用图层

    专用图层 复杂的组织都是专门化的 Catharine R. Stimpson 到目前为止,我们已经探讨过CALayer类了,同时我们也了解到了一些非常有用的绘图和动画功能.但是Core Animati ...

  8. 《数据结构与算法分析：C语言描述》读书笔记------List的C语言实现

    List的简单实现.在GCC下测试通过. list.h #ifndef _List_H /*List数据结构的简单实现*/ struct Node; typedef struct Node Node; ...

  9. FMDB事务的使用

    http://blog.csdn.net/qq_29892943/article/details/50541439 首先,说一下事务是什么,比如说我们有一个学生表和一个学生成绩表,而且一个学生对应一个 ...

  10. iOS子线程更新UI的两种方法

    http://blog.csdn.net/libaineu2004/article/details/45368427 方法1:performSelectorOnMainThread[self perf ...