jquery datatable

<div class="box-body box-body-nopadding">
                <table  cellpading="0" cellspacing="0" border="0" class="table table-nomargin table-bordered table-striped table-hover logDetail">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>模块</th>
                            <th>详细信息</th>
                            <th>操作时间</th>
                        </tr>
                    </thead>
                </table>
            </div>

<script type="text/javascript">
$(function() {
    var oTable = $('.logDetail').dataTable(
            {
                "sPaginationType": "full_numbers", //分页风格，full_number会把所有页码显示出来（大概是，自己尝试）
                "sDom": "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待补充
                "iDisplayLength": 10, //每页显示10条数据
                "bAutoWidth": false, //宽度是否自动，感觉不好使的时候关掉试试
                "bLengthChange": false,
                "bFilter": false,
                "oLanguage": {//下面是一些汉语翻译
                    "sSearch": "搜索",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "没有检索到数据",
                    "sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条",
                    "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
                    "sInfoEmtpy": "没有数据",
                    "sProcessing": "正在加载数据...",
                    "sProcessing": "<img src='{{rootUrl}}global/img/loader01.gif' />", //这里是给服务器发请求后到等待时间显示的 加载gif
                            "oPaginate":
                            {
                                "sFirst": "首页",
                                "sPrevious": "前一页",
                                "sNext": "后一页",
                                "sLast": "末页"
                            }
                },
                "bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
                "bServerSide": true, //开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。 
                "sAjaxSource": "{{rootUrl}}system_settings/log_list", //给服务器发请求的url
                "aoColumns": [//这个属性下的设置会应用到所有列，按顺序没有是空
                    {"mData": 'username'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                    {"mData": 'module_name'},
                    {"mData": 'opeation'},
                    {"mData": 'create_time'},
                ],
                "aoColumnDefs": [//和aoColums类似，但他可以给指定列附近爱属性
                    {"bSearchable": false, "aTargets": [0, 1, 2, 3]}, //bSearchable 这个属性表示是否可以全局搜索，其实在服务器端分页中是没用的
                ],
                "fnRowCallback": function(nRow, aData, iDisplayIndex) {// 当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的class风格 
                },
            }
    );
});
</script>

$sEcho = XUtil::xget('sEcho'); // DataTables 用来生成的信息
        $start = XUtil::xget('iDisplayStart'); //显示的起始索引
        $length = XUtil::xget('iDisplayLength'); //显示的行数
        $sort_th = XUtil::xget('iSortCol_0'); //被排序的列
        $sort_type = XUtil::xget('sSortDir_0'); //排序的方向 "desc" 或者 "asc".
        $search = XUtil::xget('sSearch'); //全局搜索字段
foreach($res as $k => $v){
            $obj=json_decode($v['opeation']);
            $ojb_pro=get_object_vars($obj);
            $str='';
            foreach($ojb_pro as $i => $j){
                $str.=urldecode($i);
                $str.='=';
                if(is_array($j)){
                    $j=  implode(',', $j);
                }else{
                    $j=urldecode($j);
                }
                $str.=$j.' ';
            }
            $res[$k]['opeation']= $str;
        }
        $output['sEcho'] = $sEcho;
        $output['iTotalDisplayRecords'] = $total['total'];
        $output['iTotalRecords'] = $total['total'];
        $output['aaData'] = $res;
        echo json_encode($output);
        exit(1);

查询更新

$('#serach_form').validate({
        submitHandler: function(form){
            var username = $("input[name='username']").val();
            var module_name = $("input[name='module_name']").val();
            var filter_url = '{{filterurl}}?sSearch=1&username=' + encodeURI(username) + '&module_name=' + encodeURI(module_name);
            var oSettings = oTable.fnSettings();
            oSettings.sAjaxSource = filter_url;
            oTable.fnDraw();
        }
    });

隐藏某个column，只需要 在字段设置"bVisible":false即可，例如隐藏id，{"mData": 'id',"bVisible":false}