码迷,mamicode.com
首页 > 其他好文 > 详细

dataTables 使用小细节

时间:2016-06-03 21:09:55      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:

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"]]
} );
} );

 

dataTables 使用小细节

标签:

原文地址:http://www.cnblogs.com/hjsblogs/p/5557315.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!