DataTable案例

DataTable的全局设置
$.extend( $.fn.dataTable.defaults, {
    searching: false,
    ordering:  false,
    paging: false,
    info: false,
    autoWidth: false,
    select: true //默认是不支持单击事件的，需要用到dataTables.select.js插件，然后设置select
} );
        var descTable = tableconfig.tc_destColumns.DataTable({
            scrollY: $(".portlet-body").height(),
            // 隐藏表标题
            "fnDrawCallback": function ( oSettings ) {
                $(oSettings.nTHead).hide();
            },
            aoColumns: [{
                mData: "title",
                sWidth: '100%'
            }]
        });
        // 点击行事件
        descTable.on( 'select', function ( e, dt, type, indexes ) {
            if ( type === 'row' ) {
                var row = descTable.row( indexes ).data();
                if (row == null || row == undefined) {
                    return;
                }
                var body = getBody(target, row.id);
                if (body != null) {
                    configColumnsChange(target, body)
                }
            }
        } );

//表格初始化之后，需要手动为表格添加数据
var destTable = tableconfig.tc_destColumns.DataTable();
destTable.rows.add(hideBodys).draw();
// 数据初始化之后默认选择第一行
destTable.row(':eq(0)').select();

// 对表格中的某一列手动设置数据
configTable.rows().every( function () {
      var data = this.data();
      data.value = body.showInfo[data.tag];
      tableconfig.tc_configGrid.dataTable().fnUpdate(data, this.index());
});