jQuery - dataTable实现＜table＞初始化及首列固定

需要用到的脚本文件和样式：jquery.dataTables.js、dataTables.fixedColumns.js、dataTables.bootstrap.css等。

举例，以下是一个冻结列的方法：

    /**
    * 初始化表格
    * @param tableId
    * @param iLeftColumns是否需要冻结
    * @param fixParam 冻结列数，默认1列
    */
    function initialSort(tableId, iLeftColumns, fixParam) {
        var datatable = $(tableId).dataTable();
        if (datatable) {
            datatable.fnDestroy();  //销毁datatable，可以重置table显示格式，清除中间操作导致的显示变更
        }
        var renderedTable = initDataTableForOrder(tableId);
        if (iLeftColumns){
            //参数是DataTable实例和FixedColumns设置项
            new $.fn.dataTable.FixedColumns(renderedTable, {"leftColumns":fixParam==null?1:fixParam});
        }
    }

 FixedColumns的设置项：

setting	desc	type || default	example
iLeftColumns	Number of left hand columnd to fix in podition	int || 1	new $.fn.dataTable.fixedColumns( table, {"leftColumns": 2} );
iRightColumns	Number of right hand columns to fix in position	int || 0	new $.fn.dataTable.fixedColumns( table, {"rightColumns": 1} );
fnDrawCallback	Draw callback function which is called when FixedColumns has redrawn the fixed assets	function(object, object):void || null	new $.fn.dataTable.fixedColumns( table, {"drawCallback": function () {     alert( "FixedColumns redraw" );} } );
sHeightMatch	Height matching algorthim to use. This can be "none" which will result in no height matching being applied by FixedColumns (height matching could be forced by CSS in this case), "semiauto" whereby the height calculation will be performed once, and the result cached to be used again (fnRecalculateHeight can be used to force recalculation), or "auto" when height matching is performed on every draw (slowest but must accurate)	string || semiauto	new $.fn.dataTable.fixedColumns( table, {"heightMatch": "auto"} );

其实fixedColumns是通过获取datatable的对应数据进行复制并在原表上覆盖了一层重写的固定列。

不想看代码，直接调用浏览器调试模式就可以看出来：

 

暂时写到这里，后续再补充。