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().data();

        var column3 = table1.column().data();

        var column5 = table1.column().data();

        var total_show = ,total_click=,total_profit=; 

        //计算总数 （先检测是否有数据）

        if($(".table1 .dataTables_empty").length ==){

            for(var i=,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": [[, "asc"]],

                "sPaginationType": "full_numbers",

            });

        });

    </script>

4.定义每页显示数量

$(document).ready(function() {

$('#example').dataTable( {

"aLengthMenu": [[, , , -], [, , , "All"]]

} );

} );

5.禁用某列

$('#data-list').dataTable({

             columnDefs:[{

                 orderable:false,//禁用排序

                 targets:[,]   //指定的列

             }]

         });

秒客网

dataTables 使用小细节

相关文章