dataTables 使用小细节

1.dataTables 日期查询

 var row_content = []; //暂存表格的行内容
         var rows=[];    //暂存表格行索引

/*
*将日期缓存添加，清除上一次日期搜索的缓存
*/

　　if(row_content.length>0){      
　　　　table.rows.add(row_content).draw();
　　　　row_content=[];
　　　　rows=[];
　　}

　　/*第六列按日期排序*/
　　table.column(5).data().each(function (value, index) {
　　　　var date = new Date(value.substring(0,10));    //获得每列的日期
　　　　if(date<beginHour||date>endHour){　　　　　　　　//日期与开始日期和结束日期比较
　　　　row_content.push(table.rows().data()[index]);　　 //不合适的日期数据加入缓存
　　　　table.rows().nodes().to$().eq(index).addClass("del_row"); //不合适的添加标记
　　　　rows.push(index);
　　}

});
　　table.rows('.del_row').remove().draw();　　//清除不合适的日期

　　核心思想：先用table.column().data()取出对应列的信息进行遍历；

　　　　　　　遍历时转化为date对象进行比较，不符合的分别记录index和值；

　　　　　　　遍历完成用 table.rows().remove()移除，进行重绘，

　　　　　　　再次查询时 使用table.rows.add()添加并重绘。

2.对搜索后的结果进行统计

table1.on('draw.dt',function (e,setting) {

                //获取查询结果显示的行 的数组
        var tableTr = setting.aiDisplay;

                //获取3,4,6列的数据 
        var column2 = table1.column(2).data();
        var column3 = table1.column(3).data();
        var column5 = table1.column(5).data();
        
        var total_show = 0,total_click=0,total_profit=0; 

        //计算总数 （先检测是否有数据）
        if($(".table1 .dataTables_empty").length ==0){                                                      
            for(var i=0,len=tableTr.length;i<len;i++){
                total_show += column2[tableTr[i]] ;
                total_click += column3[tableTr[i]] ;
                total_profit += column5[tableTr[i]] ;
            }
        }        
        $('.total_show').html(total_show);
        $('.total_click').html(total_click);
        $('.total_profit').html(total_profit);
            
});                    

 

2.改变语言

(document).ready(function() {  
$('#example').dataTable( {  
"oLanguage": {  
"sLengthMenu": "每页显示 _MENU_ 条记录",  
"sZeroRecords": "抱歉， 没有找到",  
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",  
"sInfoEmpty": "没有数据",  
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",  
"oPaginate": {  
"sFirst": "首页",  
"sPrevious": "前一页",  
"sNext": "后一页",  
"sLast": "尾页"  
},  
"sZeroRecords": "没有检索到数据",  
"sProcessing": "<img src='./loading.gif' />"  
}  
} );  
} );  

3.自定义各种属性

----------也可以自己定义各属性：
<script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#example").dataTable({
//                "bPaginate": true, //开关，是否显示分页器
//                "bInfo": true, //开关，是否显示表格的一些信息
//                "bFilter": true, //开关，是否启用客户端过滤器
//                "sDom": "<>lfrtip<>",
//                "bAutoWith": false,
//                "bDeferRender": false,
//                "bJQueryUI": false, //开关，是否启用JQueryUI风格
//                "bLengthChange": true, //开关，是否显示每页大小的下拉框
//                "bProcessing": true,
//                "bScrollInfinite": false,
//                "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'
//                "bSort": true, //开关，是否启用各列具有按列排序的功能
//                "bSortClasses": true,
//                "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列
//                "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
//                "aaSorting": [[0, "asc"]],
//                "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列
//                "sDom": '<"H"if>t<"F"if>',
                "bAutoWidth": false, //自适应宽度
                "aaSorting": [[1, "asc"]],
                "sPaginationType": "full_numbers",
                

            });
        });
    </script>

4.定义每页显示数量

$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );

 5.禁用某列

$('#data-list').dataTable({
             columnDefs:[{
                 orderable:false,//禁用排序
                 targets:[0,4]   //指定的列
             }]
         });