关于JQUERY的DataTable插件的使用过程笔记【持续更新中……】

推荐学习站点：http://datatables.club/

1、Ajax与远程服务器

因为一般我们的数据都是实时从远程服务器中获取，所以我们需要使用Ajax方式来获取发起请求，需要设置的参数：

"processing": true,
"serverSide": true,
"ajax": "action/Handler.ashx?mode=x",

又因为返回的JSON数据有特定的格式要求，所以服务器端先自定义一个类来构建数据对象，然后序列化为符合要求的JSON

#region 日志数据类logObj
public class logObj
{
    public int draw;
    public long recordsTotal;
    public int recordsFiltered;
    public List<logObjItem> data=new List<logObjItem>();
    public class logObjItem
    {
        public long logID;
        public string logTime;
        public string logOperator;
        public string logTitle;
        public string logInfo;
        public string logType;
    }
}
#endregion

在这里的data成员，按照默认的规则应该是一个List<string[]>类型的，但是这样不大好处理，就将字符串数组也改为一个类来处理了。

2、混合列数据

远程服务器返回数据到客户端后，需要将数据绑定到DataTable上，但是有时候并不是所有的列都是现实数据的，有些可能会现实一些操作按钮或复选框什么的，这样就需要用到自定义每列的数据显示了。

"aoColumns": [{ "mDataProp": null, "sClass": "center" },
                              { "mDataProp": "logType" },
                              { "mDataProp": "logTime"},
                              { "mDataProp": "logOperator" },
                              { "mDataProp": "logTitle" },
                              { "mDataProp": null, "sClass": "center" }
                    ],//这个用来设置每列对应的数据字段（data成员中的各个属性名）
"aoColumnDefs": [
                      {
                          "bSortable": false,
                          sClass: "center",
                          "render": function (data, type, full) {
                              return "<label class=\"pos-rel\"><input type=\"checkbox\" class=\"ace\" /><span class=\"lbl\"></span></label>";
                          },
                          "targets": 0
                      },
                      {
                          "bSortable": false,
                          sClass:"center",
                          "render": function (data, type, full) {
                              return "<div class=\"hidden-sm hidden-xs action-buttons\"><a class=\"blue logShow\" href=\"#\" rel=\"" + full.logID + "\"><i class=\"ace-icon fa fa-search-plus bigger-130\"></i></a><a class=\"red logDel\" href=\"#\" rel=\"" + full.logID + "\"><i class=\"ace-icon fa fa-trash-o bigger-130\"></i></a></div>";
                          },
                          "targets":5
                      }
                    ],//自定义的列中所需要显示的内容

3、自定义类中的事件监听

因为自定义列中需要添加事件监听的对象都是后期动态添加上去的，所以按照一般写法直接在document.ready中用ID或者CLASS的方式来获取对象貌似无效，需要利用DataTable中的tbody来find该对象，并绑定事件监听

$('#dynamic-table tbody').on('click', 'a.logShow', function () {
                    var data = oTable1.row($(this).parents('tr')).data();
                    alert(data[0] + "'s salary is: " + data.logTime);
                });//获取当前操作对象所在行的数据源对象，然后根据数据源对应的各个属性来获取想要的值

4、分页和搜索

DataTable的分页和搜索可以合并在一起分析，因为涉及到两个数据值：总记录数和筛选记录数。如果本身禁用了DataTable的searching功能，那么两者是一样，如果没有禁用那么需要传递相应参数到服务器端。通过查看页面的网络传递参数值，我们发现DataTable在开启远程服务器功能后会默默地传递很多数据到远程服务器，包括一些全局的和一些对应每列的数据，我们这里主要需要几个全局的参数：draw（还没看文档，个人认为是重画次数，远程服务器Request后直接拿来用，不用做任何处理）、start（每页的开始序号）、length（每页的条数）、search[value]（这个参数名的写法要注意，用来传递搜索关键词）。

然后为了实现获取当前页的那些数据，所以需要定义一个存储过程（貌似MySQL数据库直接可以用LIMIT关键字，MsSQL不行）

CREATE PROCEDURE [dbo].[P_GetLog_Paging]
    @pageIndex int,  --页索引
    @pageSize int,    --每页记录数
    @searchWord nvarchar(100)    --搜索关键字
AS
BEGIN
    set nocount on;
    declare @sql nvarchar(500)
    set @sql='SELECT logID,logTime,logOperator,logTitle,logInfo,logType
            FROM (
            SELECT t.*,ROW_NUMBER()OVER(ORDER BY t.logID) AS rownum
            FROM   logList t where logType like ''%'+@searchWord+'%'' or logTime like ''%'+@searchWord+'%'' or logInfo like ''%'+@searchWord+'%''
            ) AS a
            WHERE rownum BETWEEN ('+str(@pageSize)+' * ('+str(@pageIndex)+' - 1)) + 1 AND '+str(@pageSize)+' * '+str(@pageIndex)+''

    execute(@sql)  
    set nocount off;
END

然后就可以用代码来获取以下几个内容了：draw、总记录数（直接一句SQL语句获取所有记录个数）、筛选后的记录数（调用存储过程后得到的记录数）、data（每条记录的数据绑定到这个List<>上去），最后JSON序列化输出到客户端即可。

5、DataTable的重绘

$("#objID").dataTable().fnDraw(false)

6、【待续】