Datatables笔记

1.若对Datatables提供的css不够满意，可以自己修改page.css和table.css.

比如，单元格的内容过多会导致自动换行，我修改成了过多内容以省略号代替，同时增加了left类：

table.css

table.display td.center {
	text-align: center;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}

table.display td.left {
	text-align: left;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
}

2.Datatables原有的列属性无法满足我的要求，因此想自己修改jquery.dataTables.js达到自定义列属性的效果。

   尝试修改_fnAjaxParameters方法,尝试成功，分享如下：

"aoColumns": [{"sTitle": "任务编号","sWidth": "80px","dropName":"123"}]

如上所示，我想个列属性里增加 dropName属性.故修改_fnAjaxParameters方法如下：

 

for ( i=0 ; i<iColumns ; i++ )
	{
		mDataProp = oSettings.aoColumns[i].mDataProp;
		dropName  = oSettings.aoColumns[i].dropName;//新添加代码
			aoData.push( { "name": "mDataProp_"+i, "value": typeof(mDataProp)==="function" ? 'function' : mDataProp } );
			aoData.push( { "name": "dropName"+i, "value": dropName?dropName:"" } );//新添加代码
	}

然后，后台就可以接收dropName参数并解析了!

 3.无法拖拽调整列宽，这是一个要解决的问题。

 4.无法进行多条件查询，这个另一个要解决的问题！当然还有个多列过滤...

 5.表格中的超链接，单选框、下拉条等等也可以如此实现.

   

 {"sTitle": "任务编号","sWidth": "80px",

                "fnRender": function(obj) {

                  var s = obj.aData[obj.iDataColumn];

                         s="<a href='http://www.baidu.com' target='_blank'>"+s+"</a>";

                      return s;

                 }

      }

 

 6.单独给某列定制排序方法

  http://datatables.net/plug-ins/sorting#how_to_data_source