前不久在网络上看见一个很不错的
JQUERY的DATATABLE表格插件。后来发现在MVC中使用该插件的文章并不多。本文将介绍在MVC3.0如何使用该插件。在介绍该插件之前先简单介绍一下,推荐该插件的原因。在项目中我使用J
QGRID比较多。但是发现当进行样式调整时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>
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; 三、 MVC 服务端AJAX相关代码
&NBSP;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);
}
&NBSP;&NBSP;&NBSP; 四、程序截图
生成HTML代码如下
生成 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 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>公司信息</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></TBODY></TABLE>
分享到:
相关推荐
vue3.0+typescript通过npm管理包,然后导入ts中进行集成jquery、bootstrap、jquery.dataTable插件、echart,具体界面请看:https://blog.csdn.net/sunxiaoju/article/details/109401288
Jquery dataTable API 中文文档 word版 好用实在
JQuery DataTable 插件 V2.0,网上看到的,觉得不错就上传上来,供大家一起共同分享学习。
JQuery DataTable中文文档API.chm中文API,版本:JQuery DataTable中文文档API.chm,解压即食,
jquery datatable api chm 中文
jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!,希望对大家有用。
在.Net下如何使用Jquery DataTable,案例中有很多技巧和演示,是了解DataTable较好的学习案例。
主要介绍了Vue CLI3.0中使用jQuery和Bootstrap的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jquery datatable
该demo的最终实现效果是:有一个选择弹框,在弹框中选择想要显示的列,最后使用Jquery dataTable插件显示出用户想要显示的列
MVC3之JQuery高级过滤数据源码 功能描述: 此源码将展示如何实现在ASP.NET MVC3.0利用ajax,jquery插件来快速高效过滤DataTable的一些数据。
分两个部分,第一个部分前台分页、排序、检索等。 第二个部分,我实现了后台分页,排序,但是检索没能实现。
jQuery datatable1.10.5 api 有demo可以查看
jquery 插件DataTable 最新版本下载
Jquery DataTable是一个很不错的表格插件。 1、功能强大,支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源; 4、众多使用者的实例代码
基于jQuery的强大的表格插件 dataTable 压缩文件 是dataTable的官方文件 详细资料是我找的一些第三方说明资料
jquery datatable 大数据分页面的解决方案
BaseNopModel: 在nopCommerce定义中当前纪录定义是需要继承... 但在nopCommerce中通过默认的MVC模板绑定,都能够实现对指定指定模型纪录的绑定,因此nopCommerce中也没有任何1个指定模型纪录对BaseNopModel.BindMode