<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}