美文网首页
dataTbase初始化配置

dataTbase初始化配置

作者: raopanfeng | 来源:发表于2018-09-18 10:40 被阅读0次
            $('#dataTable').dataTable({
                "jQueryUI": false, // 控制是否使用jquerui的样式(需要引入jqueryui的css),默认值false
                "autoWidth": true, // 控制Datatables是否自适应宽度,默认值true
                "info": true, // 控制是否显示表格左下角的信息,默认值true
                "lengthChange": true, // 是否允许最终用户改变表格每页显示的记录数,默认值true
                "ordering": true, // 是否允许Datatables开启排序,默认值true
                "paging": true, // 是否允许表格分页,默认true
                "processing": true, // 是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)默认值false
                "scrollX": true, // 是否允许水平滚动,默认值false
                "scrollY": "200px", // 控制表格的垂直滚动。 Vertical scrolling 强制DataTable为指定的高度,并且会允许任何超出当前视口的数据进行滚动
                "scrollCollapse": true, //当显示更少的记录时,是否允许表格减少高度, 默认值false
                "searching": true, // 此选项用来开启、关闭Datatables的搜索功能,默认值true
                "serverSide": true, // 是否开启服务器模式,默认值false , DataTables有两种基本的工作模式可供选择:
                                    //客户端处理模式——此模式下如:过滤、分页、排序的处理都在浏览器中进行。
                                    //服务器端处理模式——此模式下如:过滤、分页、排序的处理都放在服务器端进行。
                "stateSave": true,  // 保存状态 - 在页面重新加载的时候恢复状态(页码等内容),默认值false
                "deferRender": true, // 控制表格的延迟渲染,可以提高初始化的速度。默认值false
                
                
                
                "processing" : true, //DataTables载入数据时,是否显示‘进度’提示
                "searching": false, // 关闭Datatables的搜索功能
                "aLengthMenu" : [ 10, 20, 40 ], //更改显示记录数选项
                "lengthChange": false,//禁用调整显示记录数选项
                "iDisplayLength" : 10, //默认显示的记录数
                "bAutoWidth" : true, //是否自适应宽度
                "bScrollCollapse" : true, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变  
                "bPaginate" : true, //是否显示(应用)分页器  
                "bInfo" : true, //是否显示页脚信息,DataTables插件左下角显示记录数  
                "pagingType" : "full_numbers", //详细分页组,可以支持直接跳转到某页  
                "bSort" : true, //是否启动各个字段的排序功能  
                "order" : [ [4, "desc" ] ], //默认的排序方式,第2列,升序排列  
                columnDefs:[{
                     orderable:false,//禁用排序
                     targets:[0,7]   //指定的列
                 }],
                "bFilter" : true, //是否启动过滤、搜索功能  
                "language" : { //国际化配置  
                    "sProcessing" : "正在获取数据,请稍后...",
                    "lengthMenu" : "显示 _MENU_ 条",
                    "zeroRecords" : "没有您要搜索的内容",
                    "info" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                    "infoEmpty" : "记录数为0",
                    "infoFiltered" : "(全部记录数 _MAX_ 条)",
                    "sInfoPostFix" : "",
                    "sSearch" : "搜索  ",
                    "sUrl" : "",
                    "oPaginate" : {
                        "sFirst" : "第一页",
                        "sPrevious" : "上一页",
                        "sNext" : "下一页",
                        "sLast" : "最后一页"
                    }
                }
    
            });
    

        var allColumns = [
                {
                    "title" : "告警ID",
                    "data" : "alarmId",
                    "render" : function(data, type, row, meta) {
                        if(row && row.alarmId){
                            return row.alarmId;
                        }
                        return "";
                    }
                },
                {
                    "title" : "会员姓名",
                    "data" : "realName",
                    "render" : function(data, type, row, meta) {
                        if(row && row.realName){
                            return row.realName;
                        }
                        return "";
                    }
                },
                {
                    "title" : "告警类型",
                    "data" : "alarmTypeView",
                    "render" : function(data, type, row, meta) {
                        if(row && row.alarmTypeView){
                            return row.alarmTypeView;
                        }
                        return "";
                    }
                },
                {
                    "title" : "是否已读",
                    "data" : "isReadView",
                    "render" : function(data, type, row, meta) {
                        if(row && row.isReadView){
                            return row.isReadView;
                        }
                        return "";
                    }
                },
                {
                    "title" : "告警时间",
                    "data" : "alarmTime",
                    "render" : function(data, type, row, meta) {
                        if(row && row.alarmTime){
                            return row.alarmTime;
                        }
                        return "";
                    }
                },
                {
                    "title" : "设备IMEI",
                    "data" : "imei",
                    "render" : function(data, type, row, meta) {
                        if(row && row.imei){
                            return row.imei;
                        }
                        return "";
                    }
                },
                {
                    "title" : "联系电话",
                    "data" : "phoneNum",
                    "render" : function(data, type, row, meta) {
                        if(row && row.phoneNum){
                            return row.phoneNum;
                        }
                        return "";
                    }
                },
                {
                    "title" : "操作",
                    "data" : "",
                    "render" : function(data, type, row, meta) {
                        var htmlStr1 = '<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" href="viewAlarmDetail?alarmId=' + row.alarmId + '" data-target="#viewAlarmDetail">查看</button>';
                        var htmlStr2 = '<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" href="viewSOSLinkMan?imei=' + row.imei + '" data-target="#viewSOSLinkMan">紧急联系人</button>';
                        return htmlStr1 + "&nbsp;" + htmlStr2;
                    }
                } ]
    
        $(document).ready(function() {
            $('#dataTable').dataTable({
                // DataTables - Features
                "autoWidth" : true, // 控制Datatables是否自适应宽度,默认值true
                "deferRender" : false, // 控制表格的延迟渲染,可以提高初始化的速度。默认值false
                "info" : true, // 控制是否显示表格左下角的信息,默认值true
                "lengthChange" : false, // 是否允许最终用户改变表格每页显示的记录数,默认值true
                "ordering" : false, // 是否允许Datatables开启排序,默认值true
                "paging" : true, // 是否允许表格分页,默认true
                "processing" : true, // 是否显示处理状态(排序的时候,数据很多耗费时间长的话,也会显示这个)默认值false
                "scrollX" : false, // 是否允许水平滚动,默认值false
                //"scrollY": "200px", // 控制表格的垂直滚动。 Vertical scrolling 强制DataTable为指定的高度,并且会允许任何超出当前视口的数据进行滚动
                "scrollCollapse" : false, //当显示更少的记录时,是否允许表格减少高度, 默认值false
                "searching" : false, // 此选项用来开启、关闭Datatables的搜索功能,默认值true
                "serverSide" : true, // 是否开启服务器模式,默认值false 
                "stateSave" : false, // 保存状态 - 在页面重新加载的时候恢复状态(页码等内容),默认值false
    
                // DataTables - Data
                "ajax" : {
                    "url" : "<%=contextPath%>/alarm/list",
                    "type" : "POST",
                    "data" : {
                        "memberName" : $('#memberName').val(),
                        "imei" : $('#imei').val(),
                        "alarmType" : $('#alarmType').val(),
                        "alarmTime" : $('#alarmTime').val(),
                        "isRead" : $('#isRead').val()
                    },
                    "dataSrc" : "data"
                },
    
                // DataTables - Callbacks
    
                // DataTables - Options
                "destroy" : false, //销毁已经存在的Datatables实例并替换新的选项默认值false
                "displayStart" : 0, //初始化显示的时候从第几条数据开始显示(一开始显示第几页)
                "lengthMenu" : [ 10, 20, 40 ], // 定义在每页显示记录数的select中显示的选项
                "orderClasses" : true, //高亮显示表格中排序的列,默认值: true
                "orderMulti" : true, // 多列排序控制,默认值: true,用户按住shift点击表头,多列排序
                "order" : [ [ 4, "desc" ] ], //表格在初始化的时候的排序,第2列,升序排列  
                "pageLength" : 10, // 改变初始化页长度(每页多少条数据),默认值:10
                "pagingType" : "full_numbers", // 分页按钮显示选项,full_numbers 首页,尾页,上一页和下一页四个按钮,加上数字按钮
                "renderer" : "bootstrap", // 显示组件渲染器类型
                "search" : {
                    "caseInsensitive" : false, //在搜索或者过滤时,是否大小写敏感,默认值true
                    "regex" : false, // 允许或者禁止对在搜索字符串中出现的正则表达式字符强制编码, 默认值false
                    "smart" : true, // 允许或者禁止DataTables的只能过滤(搜索)功能, 默认值true
                },
                "columnDefs" : [ {
                    "orderable" : false,//禁用排序
                    "targets" : [ 0, 7 ] //指定的列
                } ],
                "columns" : allColumns,
    
                "language" : { //国际化配置  
                    "processing" : "正在获取数据,请稍后...",
                    "lengthMenu" : "显示 _MENU_ 条",
                    "zeroRecords" : "没有您要搜索的内容",
                    "info" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                    "infoEmpty" : "记录数为0",
                    "infoFiltered" : "(全部记录数 _MAX_ 条)",
                    "loadingRecords" : "数据正在加载中,请稍后...",
                    "emptyTable" : "没有搜索到相关内容",
                    "search" : "搜索&nbsp;&nbsp;",
                    "url" : "",
                    "paginate" : {
                        "first" : "第一页",
                        "previous" : "上一页",
                        "next" : "下一页",
                        "last" : "最后一页"
                    },
                    "aria" : {
                        "sortAscending" : ": 以升序排列此列",
                        "sortDescending" : ": 以降序排列此列"
                    }
                }
    
            });
    
        });         
    

    相关文章

      网友评论

          本文标题:dataTbase初始化配置

          本文链接:https://www.haomeiwen.com/subject/shiynftx.html