表格插件JQuery.DataTable示例教程:示例结构如下图:

基本说明:

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

Models 目录存放的是实体类。

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

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

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

页面文件如下,脚本部分bProcessing、bServerSidesAjaxSource 是必要滴,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>。嘿嘿!

最终滴效果图:

 

希望本文对读者有点帮助。

推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架
新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"