最近做项目的时候发现了一个很好的JQuery插件DataTable但是网上相关的资料好像很少，本人英文不咋滴在官网上除了知道点哪能下载外其它就都不知道鸟。后来用了个把小时写了个小demo，分享给大家，希望对大家有用。因为刚用不太熟悉写滴不好请大家多多指教，一起进步。

demo结构如下图

Images目录下是DataTable用到的皮肤图片。

Models 目录存放的是实体类。

Scripts 目录存放的是脚本文件。

Scripts/Plug-in目录下存放的是DataTable的语言文件和插件的脚本文件。

Style   目录存放的是DataTable用到的css文件。

页面文件如下，脚本部分bProcessing、bServerSide 、sAjaxSource 是必要滴，aoColumns属性如果你对呈现的表格需要做处理的话比如增加个“操作”列什么的可以在这个属性中进行定制。

Index.cshtml

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

为了方便大家使用我把DataTable的一些属性做了整理，在Demo中可以找到完整版。 如下图

以下是HomeController中的代码，由于是Demo，代码写滴有点恶，请大家原谅^^。DataTable插件要求的数据格式是以逗号进行分隔的数组或字符串，

如["column1value","column2value","column3value"]，

在服务器返回的数据格式要求与下示例相同，属性的含义请参考Demo中的Excel，在此就不多写了。我会把需要注意或容易写错的地方写上注释。

{    
"sEcho": 3,    
"iTotalRecords": 57,    
"iTotalDisplayRecords": 57,    
"aaData": [  //aaData此属性不能改名，DataTable插件使用就是使用这个属性进行数据表的填充，丫这个属性坑了爹好长时间。
            [            
                "Gecko",            
                "Firefox 1.0",            
                "Win 98+ / OSX.2+",            
                "1.7",            
                "A"        
            ],        
            [           
                "Gecko",            
                "Firefox 1.5",            
                "Win 98+ / OSX.2+",            
                "1.8",            
                "A"        
            ]
        ] }

controller中的内容

HomeController

public ActionResult GetJsonCitys(int? secho)
        {
            var cityList = new List<Citys>();
            for (int i = 0; i < 100; 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;
        }

ps:呈现图表的容器你最好还是用<table>。嘿嘿！

最终滴效果图：

不好意思，刚才忘了加下载连接，点击下载

转载于:https://www.cnblogs.com/homezzm/archive/2011/09/09/2172517.html

MVC3.0中使用JQuery.DataTable插件。相关推荐

  1. 分享在MVC3.0中使用jQuery DataTable 插件

    http://www.cnblogs.com/ryanding/archive/2011/02/18/1957318.html MVC3.0中使用JQuery.DataTable插件 http://b ...

  2. Vue CLI3.0 中使用jQuery 和 Bootstrap

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...

  3. MVC3.0 中Razor 学习

    为什么80%的码农都做不了架构师?>>>    随着MVC3.0RTM版本的发布,最近将公司的项目从MVC2.0升级到MVC3.0.同时打算在MVC3中全面使用Razor模板引擎.现 ...

  4. MVC3.0 中Razor 学习 cshtml文件

     随着MVC3.0RTM版本的发布,最近将公司的项目从MVC2.0升级到MVC3.0.同时打算在MVC3中全面使用Razor模板引擎.现将Razor学习拿出来和大家分享,如果存在不足的地方欢迎您指 ...

  5. CentOS 6.3 64bit上测试ATS 5.3.0中的正则刷新插件regex_revalidate

    注意到ATS源码目录plugin/experimental/下面有regex_revalidate插件目录,我们在编译时添加--enable-experimental-plugins配置项就可以将其编 ...

  6. 关于Vue2.0中引入jQuery

    1.npm i jquery -S 2.在vue.config.js(无该文件的在根目录创建该文件)中配置 添加configureWebpack中的内容 var webpack = require(& ...

  7. MVC3.0中直接在VS中浏览cshtml页面

    第一步:一般找到MVC中的项目,然后找到Views文件夹,一般中在其中有一个Login文件夹,找到index.cshtml文件. 如下图所示: 第二步:打开属性后,可以看到如下的图示: 特殊注意用红色 ...

  8. 前端表格插件Jquery DataTable简单汉化

    前端表格插件Jquery DataTable简单汉化 项目需要求,需要用到Jquery DataTable插件,功能强大,可以实现前端数据分页和页面检索,数据10000条类可以考虑.但由于国外插件,页 ...

  9. ajax会占用服务器端内存吗,javascript - 为什么不允许在jquery datatable服务器端处理ajax成功使用？ - 堆栈内存溢出...

    我正在使用asp.net mvc5并尝试使用jquery datatable插件服务器端处理. 服务器端处理的教程显示了从服务器返回结果的格式.但是我的项目的不同之处在于我无法从服务器发送" ...

最新文章

  1. BZOJ4327 : JSOI2012 玄武密码
  2. 行业观察｜智慧屏集中爆发，大屏市场能否迎来破局者？
  3. 一定要多读多记FreeEIM
  4. 悬镜服务器系统,悬镜服务器卫士V3.3.0.3961更新通知
  5. 微软宣布 SQL Server 2019 免费支持 Java
  6. 随想录（jtag知识点小结）
  7. hbase入门综合概要介绍
  8. 【bzoj1999】[Noip2007]Core树网的核 树的直径+双指针法+单调队列
  9. C++ —— 句柄类的实现方式 —— 类实现的隐藏
  10. 本博客专门用于存放素材的
  11. 打印机打印中文，截取字符时出现乱码问题
  12. 7-38 寻找大富翁 (25 分)
  13. Eclipse使用Log4j2的详细教程
  14. 美团一面（时间1.10h）
  15. css 侧栏跟随_简单代码实现智能侧边栏跟随固定浮动的效果
  16. 大数据流处理的一致性问题与lambda架构优缺点
  17. matlab自带的音乐,MATLAB乐器（如何用matlab演奏音乐）
  18. 3.3.4 Memcached分布式算法
  19. 类的继承层次结构的宽度和深度
  20. 软件开发人员的作战手册 - 让程序员活的久一点

热门文章

  1. 实现与优化深度神经网络
  2. python读取doc文件_Linux 下Python 读取Word文档内容的方法
  3. c语言存储学生信息并显示,C语言实现学生信息管理程序
  4. linux里面vim自动显示行号,linux中vim永久显示行号、开启语法高亮
  5. git lib 创建新的项目在某个路径下_版本控制管理工具git的使用
  6. 聊天机器人-ChatterBot初试
  7. centos6.x 安装php5.6 tar,CentOs6.x安装php5.6.x Web程序 - 贪吃蛇学院-专业IT技术平台
  8. esp32查询剩余内存_SQL 查询语句先执行 SELECT？兄弟你认真的么？
  9. BUAA_OO_博客作业3——规格
  10. Pyplot绘图的格式