dataTables 使用小细节

Posted 2020-07-20 没事看看电影

1.dataTables 日期查询（假设第三列是日期）

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

if(row_content.length>0){    
                table.rows.add(row_content).draw();
                row_content=[];
                rows=[];
            }
            table.column(2).data().each(function (value, index) {
                var date = new Date(value.substring(0,10));
                if(date<beginHour||date>endHour){
                    row_content.push(table.row(index).data());
                    rows.push(index);
                }

            });
            table.rows(rows).remove().draw();

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

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

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

　　　　　　　再次查询时 使用table.rows.add()添加并重绘。
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"]]
} );
} );