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

来源：互联网发布：武汉seo公司jw100 编辑：程序博客网时间：2024/06/01 18:56

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

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_ 条   共 _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：

                <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值就好传给后台，后台判断是否是搜索传递过来的值再进行操作。

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

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

1 0