在整合了网上一些大家的代码以及官网的代码后,终于实现了我的程序:
table=$('.acelistTable').dataTable(
{
"ajax": { //类似jquery的ajax参数,基本都可以用。
"type": "post", //后台指定了方式,默认get,外加datatable默认构造的参数很长,有可能超过get的最大长度。
"url": '__URL__/serach_nasty',
"dataSrc": "data", //默认data,也可以写其他的,格式化table的时候取里面的数据
"data": function (d) { //d 是原始的发送给服务器的数据,默认很长。
d.extra_search = $('#reportrange span').html();
d.is_search = $('#is_search').val();
$('#is_search').val(0);
//获取是否是查询,然后置0,0为非搜索查询
}
},
"createdRow": function ( row, data, index ) { //定义行样式
var color;
if ( data.ThreatLV == 'hight' ) {
color="red";
}else if(data.ThreatLV == 'middle'){
color="#e58323";
}
$('td', row).eq(0).css('font-weight',"").css("color",color);
$('td', row).eq(1).css('font-weight',"").css("color",color);
$('td', row).eq(2).css('font-weight',"").css("color",color);
$('td', row).eq(3).css('font-weight',"").css("color",color);
$('td', row).eq(4).css('font-weight',"").css("color",color);
$('td', row).eq(6).css('font-weight',"").css("color",color);
$('td', row).eq(8).css('font-weight',"").css("color",color);
},
"pagingType": "full_numbers",
//"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": "正在加载数据...",
"oPaginate":
{
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "末页"
}
},
"bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好
"bServerSide": true, //开启服务器模式,使用服务器端处理配置datatable。注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后,你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序(表头)、搜索,这些都会传给服务器相应的值。
// "sAjaxSource": '__URL__/serach_nasty', //给服务器发请求的url
"aoColumns": [ //这个属性下的设置会应用到所有列,按顺序没有是空
{"mData": 'Status'}, //mData 表示发请求时候本列的列明,返回的数据中相同下标名字的数据会填充到这一列
{"mData": 'Time'},
{"mData": 'SampleSrc'},
{"mData": 'SampleName'},
{"mData": 'ContentResult'},
{"mData": function (mData) {
return '<img src="__PUBLIC__/images/warn'+mData.ActivityReuslt+'.png" />';
}
},
{"mData": 'ProtocolType'},
{"mData": function (mData) {
return '<img src="__PUBLIC__/images/'+mData.FileType+'.png" />';
}
},
{"mData": function (mData) { //列数据
var show;
switch(mData.ThreatLV){
case 'hight': show='高';
break;
case 'middle': show='中';
break;
case 'low': show='低';
break;
}
return show;
}
}
],
"aoColumnDefs": [//和aoColums类似,但他可以给指定列附近属性
{"bSortable": false, "aTargets": [1, 3, 6, 7, 8]}, //这句话意思是第1,3,6,7,8,9列(从0开始算) 不能排序
{"bSearchable": false, "aTargets": [1, 2, 3, 4, 5, 6, 7, 8]} //bSearchable 这个属性表示是否可以全局搜索,其实在服务器端分页中是没用的
],
"aaSorting": [[2, "desc"]], //默认排序
"fnInitComplete": function (oSettings, json) { //表格初始化完成后调用 在这里和服务器分页没关系可以忽略
$("input[aria-controls='DataTables_Table_0']").attr("placeHolder", "请输入高手用户名");
}
});
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
php后台模拟数据 :
function serach_nasty() {
$sEcho = $_REQUEST['sEcho']; // DataTables 用来生成的信息
$output['sEcho'] = $sEcho;
// $function= $_REQUEST['fun']; //默认拉取列表-漏洞样本
// $PageShow = $_REQUEST['iDisplayLength']; //每页显示10个
// $TimeStart = $_REQUEST['TimeStart']; //开始时间
// $TimeEnd = $_REQUEST['TimeEnd']; //结束时间
// $SampleSrc = $_REQUEST['SampleSrc']; //样本来源
// $ProtocolType=$_REQUEST['ProtocolType']; //协议类型
$Hash ='3213afd1b3151311313';
$out['Status'] = 0;
$out['Time'] = '2015-10-11 15:20:26';
$out['SampleSrc'] = 'FTP://199.0.3.64/work/path';
$out['SampleName'] = '360csvc_1321545462321546546.exe';
$out['ContentResult'] = 'Normal';
$out['ActivityReuslt']= 10;
$out['ProtocolType'] = 'http';
$out['FileType'] = 'cab';
$out['ThreatLV'] = 'hight';
for($i=1;$i<=10;$i++){
$aaData[]=$out;
$output['aaData'] = $aaData;
}
$output['iTotalDisplayRecords'] = 10; //如果有全局搜索,搜索出来的个数
$output['iTotalRecords'] = 10; //总共有几条数据
echo json_encode($output); //最后把数据以json格式返回
}
HTML:
<label> 类型</label><input type="text"/>
<input id="is_search" type="text" value=""/>
<button class="button button-primary button-rounded button-small" id="go_search">搜索</button>
<input id="is_search" type="hidden" value="0"/>
<table id="table_id" class="display acelistTable" cellspacing="0" width="100%">
<thead>
<tr class="lightgraybg">
<td>状态</td>
<td>事件产生时间</td>
<td style="width:2%;">来源</td>
<td>样本</td>
<td>内容结果</td>
<td>行为结果</td>
<td>协议类型</td>
<td>类型</td>
<td>威胁等级</td>
</tr>
</thead>
<tbody></tbody>
</table>
+++++++++++++++++++++++++++++++++++++++++++
搜索功能可实现,但这里并未做,看懂代码后只需在对应位置获取html里的input的val值就好传给后台,后台判断是否是搜索传递过来的值再进行操作。
++搜索结果跳转页面的解决方案:建对应查询条件的隐藏标签,点击搜索将条件输入到隐藏标签里,跳转页面仍调用隐藏标签里的值,外部条件更改只要不点击搜索不生效!