jQuery插件DataTable使用方法详解(.Net平台)(jQuery插件能输出到控制台)

编辑：rootadmin

推荐整理分享jQuery插件DataTable使用方法详解(.Net平台)(jQuery插件能输出到控制台)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jQuery插件库,jQuery插件下载,jQuery插件下载,jQuery插件是什么,jQuery插件使用,jQuery插件安装教程,jQuery插件库,jQuery插件库,内容如对您有帮助，希望把文章链接给更多的朋友！

上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable（简称DT），很好用。

DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。

一.使用DT，需要以下支持

js:jq+jquery.dataTables.min.js

二、页面上进行引入js，直接使用DT功能

前端代码：

后端代码:

这样就搞定了。。。是不是很简单(●￣(&#;)￣●)

?(?_?)?好的，我来解释下。

前台：

jQuery插件DataTable使用方法详解(.Net平台)(jQuery插件能输出到控制台)

首先我们的table只是给出了thead部分，那么tbody部分呢？交给DT来完成，由DT来控制。那么我们先来初始化DT，js会调用initializeTable（）方法，方法里调用$("#table1").DataTable({各种配置}）；来配置DT。至于这些配置的作用，我代码里都做了注释，详细的配置解释，可以查看官网的文档。

配置里有一项很重要，就是ajax配置项，这里是数据源的配置项，数据源可以有多种，我这里选用了ajax异步请求数据源。

"url": "/UserInfo/Manager/Search"这个是配置了DT请求数据的url地址

"type": "post"指明了以post方式发送请求

"data":

这了由于我用到了搜索的功能，所以每次请求数据的时候，要把搜索的条件作为附加的数据传给服务器

最后，注意要加上"serverSide": true，因为我们的数据都是从后台过来的，不是前台的静态数据，要开启“服务器模式”，这样，你每次对表格的操作，都会变成一次次的请求发送给服务器。

后台：

后台负责提供数据源，使用自定义的DataTable类来作为格式化的数据进行交互。当然这里的DataTable类不是必须的，你只要满足前后数据交互的格式就可以，这里封装成一个类，是为了方便。

DT建议我们交互的数据格式，最起码要包含以下几项，我用匿名类来表示(区分大小写)：

其他项的话，你可以根据自己的实际情况自行添加。

准备好了数据之后呢，把数据Json序列化后，返回给前端，即可。

效果图：