分享在MVC3.0中使用jQue“.NET研究”ry DataTable 插件

　　前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下，推荐该插件的原因。在项目中我使用jqgrid比较多。但是发现当进行样式调整时jqgrid的样式常常会让美工头疼。而datatable插件却是一个轻量级的jQuery插件。当我通过浏览器查看该js插件rander后的源码。发现只是一个简单的html table，非常简洁。那么在没有特殊要求的情况下使用这个插件，开发人员js脚本的可维护性将得到简化，美工的样式调整也会变得更轻松！下面介绍如何在MVC3.0中使用DataTable jQuery插件。

　　一、DataTable JS 核心脚本文件、 CSS文件及图片

　　请到这里下载最新的版本的DataTable插件。该插件内附上了具体的官方DEMO。读者可自行阅读，这里只介绍这个插件的核心文件

　　1.jquery.dataTables.min.js

　　压缩后的核心js文件

　　2.官方提供的CSS文件

　　demo_page.css 、demo_table.css、 demo_table_jui.css

　　可以自定义CSS样式来满足客户需求。

　　3.图片文件

　　包含一个Images文件夹，请将该文件请全部拷贝到MVC工程的指定目录，截图如下：                  

　　二、DataTable 客户端HTML及JS代码

　　html代码：



<table id="myDataTable" class="display">
<thead>
<tr>
<th>
                标识
</th>
<th>
                公司名称
</th>
<th>
                地址
</th>
<th>
                城市
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" id="btnTest" value="根据条件重新响应后台Ajax" />


　　js代：




<script type="text/javascript">
        var tbl;
        $(function () {
            tbl = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/AjaxHandler",      //mvc后台ajax调用接口。
                'bPaginate': true,                      //是否分页。
                "bProcessing": true,                    //当datatable获取数据时候是否显示正在处理提示信息。
                'bFilter': false,                       //是否使用内置的过滤功能。
                'bLengthChange': true,                  //是否允许用户自定义每页显示条数。
                'sPaginationType': 'full_numbers',      //分页样式
                "aoColumns": [
                        { "sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return '<a href=\"Details/' + oObj.aData[0] + '\">View</a>';
                            }                           //自定义列的样式
                        },
                        { "sName": "COMPANY_NAME" },
                        { "sName": "ADDRESS" },
                        { "sName": "TOWN" }
                    ]
            });


//Ajax重新load控件数据。（server端）
            $("#btnTest").click(function () {
                var oSettings = tbl.fnSettings();
                oSettings.sAjaxSource = "Home/AjaxHandler2";
                alert(oSettings.sAjaxSource);
                tbl.fnClearTable(0);
                tbl.fnDraw();


});
        });
</script>


　　三、 MVC 服务端AJAX相关代码


　　DataTable Ajax响应参数类：




public class DataTableParameter
    {
/// <summary>
/// DataTable请求服务器端次数
/// </summary>       
        public string sEcho { get; set; }


/// <summary>
/// 过滤文本
/// </summary>
        public string sSearch { get; set; }


/// <summary>
/// 每页显示的数量
/// </summary>
        public int iDisplayLength { get; set; }


/// <summary>
/// 分页时每页跨度数量
/// </summary>
        public int iDisplayStart { get; set; }


/// <summary>
/// 列数
/// </summary>
        public int iColumns { get; set; }


/// <summary>
/// 排序列的数量
/// </summary>
        public int iSortingCols { get; set; }


/// <summary>
/// 逗号分割所有的列
/// </summary>
        public string sColumns { get; set; }
    }


　　接着使用MVC的 ModelBinder将Action参数实体化：




public JsonResult AjaxHandler(DataTableParameter param)
{
return Json(new
                {
                    sEcho = param.sEcho,
                    iTotalRecords = 50,
                    iTotalDisplayRecords = 50,
                    aaData = new List<object> {
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[] {"1","公司信息","地址信息","城市信息"},
new string[]{"1","公司信息","地址信息","城市信息"}
                                   }
                }, JsonRequestBehavior.AllowGet);
}


　　四、程序截图




　　生成html代码如下：




<table id="myDataTable" class="display">
<thead>
<tr>
<th style="width: 239px;" class="sorting_disabled">
                标识
</th>
<th style="width: 366px;" class="sorting">
                公司名称
</th>
<th style="width: 239px;" class="上海闵行企业网站制作sorting">


地址
</th>
<th style="width: 239px;" class="sorting">
                城市
</th>
</tr>
</thead>
<tbody><tr class="odd"><td 上海企业网站制作 style="color: #0000ff;">class=" sorting_1"><a href="上海徐汇企业网站设计与制作n style="color: #800000;">Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr><tr class="odd"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息上海徐汇企业网站制作an style="color: #000000;"></td><td>地址信息</td><td>城市信息</td></tr><tr class="even"><td class=" sorting_1"><a href="Details/1">View</a></td><td>公司信息</td><td>地址信息</td><td>城市信息</td></tr></tbody></table>
				


				
时间： 2024-09-08 15:11:01

		
		


		


	

	
	

		


		
分享在MVC3.0中使用jQue“.NET研究”ry DataTable 插件的相关文章


								

		

			

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

		

		

									

				前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发			

		

	

				

		

			

                一起谈.NET技术，分享在MVC3.0中使用jQuery DataTable 插件
			

		

		

									

				前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发			

		

	

				

		

			

                [分享]eclipse 3.0 中jre设置的小错误导致在java文件中连接数据库失败
			

		

		

									

				错误|连接数据库 java.lang.ClassNotFoundException: org.gjt.mm.mysq.Driver这也许是最普遍的错误了,一般解决方法就是检查数据库驱动是否安装到jdk目录下 (如:将mysql-connector-1-3-1.jar文件copy到jdk目录下的lib文件夹中) classpath是否设置了驱动的目录 (CLASSPATH=.;D:\j2sdk\lib\dt.jar;D:\j2sdk\lib\tools.jar;D:\j2sdk\lib\mysql			

		

	

				

		

			

                第四章 在MVC4.0中对脚本以及样式表的引用变化
			

		

		

									

				原文:http://www.cnblogs.com/xdotnet/archive/2012/07/21/aspnet40_webpage20.html 一.可以直接使用"~",而无需使用Href对象实例 这个是一大变化,给我们ASP.NET MVC开发人员带来了很便捷的代码书写方式,提高不少效率.在MVC3.0中加入我们需要加入一张图片时,需要在IMG标签的SRC属性加上 Url.Content或Href对象方法等来对路径进行解析.在WebPage 2.0中Razor模板引擎能够自动			

		

	

				

		

			

                走进ASP.NET MVC 3.0中的Razor模板引擎
			

		

		

									

				随着MVC3.0RTM版本的发布,最近将公司的项目从MVC2.0升级到MVC3.0.同时打算在MVC3中全面使用Razor模板引擎.现将Razor学习拿出来和大家分享,如果存在不足的地方欢迎您指出. 其实在使用<%= %>在html中调用C#代码时,内心总在埋怨.这个写法非常麻烦.麻烦在哪呢?其实就是闭合.比如: Asp.net: <script src="<%=Url.Content("~/Scripts/jquery-1.4.4.min.js")%			

		

	

				

		

			

                Android中EditText光标在4.0中的bug及解决方法_Android
			

		

		

									

				本文分析了Android中EditText光标在4.0中的bug及解决方法.分享给大家供大家参考,具体如下: 一.问题: 不知道为什么,我的EditText的在我自己的手机中出现的时候,他的光标就变得没有了,我开始还以为是光标不见了,后面我修改了一下EditText的背景颜色,才发现是因为光标的颜色变成了白色,所以没有看见. 二.解决办法 : 复制代码 代码如下: android:textCursorDrawable 设置值为"@null",但是我觉得那个不怎么好看,那个地方也可以替换			

		

	

				

		

			

                MVC3.0 采用Jquery实现局部刷新
			

		

		

									

				转自 http://www.cnblogs.com/qidian10/archive/2011/07/27/2118021.html   MVC3.0刚入门,所有的都在摸索中,官方的MUSIC也无心看,只能做一个功能海搜一下.最近做了一个局部刷新的功能,功能大致是根据页面左侧的内容,刷新右侧的Grid信息 效果图片: 单击左侧后:(单击时候右侧将会出现加载效果) 这里是实现逻辑,代码 1.首先主页面 ////////////////////////////////////////////////			

		

	

				

		

			

                我的Android进阶之旅------&amp;gt;如何解决Android 5.0中出现的警告： Service Intent must be explicit:
			

		

		

									

				我的Android进阶之旅-->如何解决Android 5.0中出现的警告: java.lang.IllegalArgumentException: Service Intent must be explicit: Intent { act=com.xtc.kuwo.watch.MUSIC_PLAY_SERVICE (has extras) } 1.错误描述 今天在Android4.4 的小米4手机上运行我的程序的时候没有报错,而在Android 5.1的华为P7上运行我的程序的时候报了以下的错			

		

	

				

		

			

                腾讯野心在微信 5.0中的显现
			

		

		

									

				    微信 5.0的发布,从2月5日到8月5日,整整六个月,足足刷新了一款热门应用的更新周期. 微信 5.0 作为一个"大"版本,但是新版本却迟至今天才发布,其中内外部权益梳理.产品打磨.腾讯中长期规划都是影响因素.六个月的时间里,马化腾定性微信为"腾讯国际化的机会",并对微信提出商业化的要求,前者我们确实能从微信疯涨的海外用户看出,而后者我们在今天的微信 5.0 中终于看到了框架. 大家都知道,刚刚发布的微信5.0,加入调整了多项功能,其实都围绕着一个中心点--