MVC3.0中使用JQuery.DataTable插件。

    最近做项目的时候发现了一个很好的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