最近做项目的时候发现了一个很好的JQuery插件DataTable但是网上相关的资料好像很少,本人英文不咋滴在官网上除了知道点哪能下载外其它就都不知道鸟。后来用了个把小时写了个小demo,分享给大家,希望对大家有用。因为刚用不太熟悉写滴不好请大家多多指教,一起进步。
demo结构如下图
Images目录下是DataTable用到的皮肤图片。
Models 目录存放的是实体类。
Scripts 目录存放的是脚本文件。
Scripts/Plug-in目录下存放的是DataTable的语言文件和插件的脚本文件。
Style 目录存放的是DataTable用到的css文件。
页面文件如下,脚本部分bProcessing、bServerSide 、sAjaxSource 是必要滴,aoColumns属性如果你对呈现的表格需要做处理的话比如增加个“操作”列什么的可以在这个属性中进行定制。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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中的内容
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{
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>。嘿嘿!
最终滴效果图:
不好意思,刚才忘了加下载连接,点击下载