datatables样式详解,[基于thinkPHP]多条件按钮搜索及行样式

时间:2022-01-12 08:08:10

在整合了网上一些大家的代码以及官网的代码后,终于实现了我的程序:


js 代码:

  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_ 条 &nbsp;&nbsp;共 _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>&nbsp;&nbsp;类型</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值就好传给后台,后台判断是否是搜索传递过来的值再进行操作。


----------------------------------------------------------

++搜索结果跳转页面的解决方案:建对应查询条件的隐藏标签,点击搜索将条件输入到隐藏标签里,跳转页面仍调用隐藏标签里的值,外部条件更改只要不点击搜索不生效!