<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>完整性不足详情信息列表</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .tr {
            text-align: center;
        }
        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }
        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        body {
            overflow: hidden;
        }
        .pagination > li > a, .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            text-decoration: none;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="form-inline header mt10">
        <div class="form-group fr mr10" id="fliteData">
            <label>筛选数据：</label>
            <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
        </div>
    </div>
    <div class="row">
        <%--用采数据列表--%>
        <div class="col-sm-12">
            <table id="lackList" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th>用采数据名</th>
                    <th>用户名</th>
                    <th>测量点局号</th>
                    <th>日期</th>
                    <th>完整性(%)</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
<input type="hidden" value="${excelIndex}" id="excelIndex">
</div>
</body>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    var dataTable=null;
    var resultData=null;
    var $lackList=$("#lackList").eq(0);
    $(function () {
        refresh();
    })

    //点击确定，去后台请求参数
    $("#query").click(function() {
        refresh();
    });
    //获取表格数据
    function refresh(){
        var i ;
        var excelIndex=$("#excelIndex").val();
        $.ajax({
            type : "POST",
            url : "/pqs9000/responsibility/getLackIntergrityList",
            data:{
                excelIndex:excelIndex
            },
            dataType : "json",
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success : function(data) {
                if (data.body === null) {
                    resultData=null;
                } else {
                    resultData=data.body;
                }
                startQuery();
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

    //实例化表格
    function initTable(data){
        var height=$(window).height()-140;
        dataTable=$lackList.DataTable();
        dataTable.clear().draw();
        dataTable=$lackList.DataTable({
            order:[[1,'asc'],[3,'asc']],
            columns: [
                {data:"excelIndex"},
                {data:"userName"},
                {data:"lineNo"},
                {data:"lackDate"},
                {data:"intergrity",
                    render: function (data, type, full, meta) {
                        return (data*100.0).toFixed(2);
                    }
                }
            ],
            autoWidth:false,
            serverSide : false,
            destroy : true,
            data : data,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            scrollX: true,
            lengthMenu : [ 20 ],
            language : {
                url:'/pqs9000/json/chine.json'
            },
            fnDrawCallback: function(oTable) {
                $("#lackList_info").addClass("fl");
                $("#lackList_paginate").addClass("fr");
                $("#lackList_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $lackList.dataTable();
                $('#dataTable-btn').click(function(e) {
                    if($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
    }


    //搜索表中的数据
    function searchResult(value) {
        dataTable.search(value).draw();
    }

    //特殊处理，表头紧缩问题--start
    var it=null;
    function startQuery() {
        //实时刷新时间单位为毫秒
        it= setInterval('refreshQuery()',100);

    }
    /* 刷新查询 */
    function refreshQuery(){
        var width=$("#lackList").width();
        if(width>100){
            initTable(resultData);
            window.clearInterval(it)
        }
    }
    //特殊处理，表头紧缩问题--end
</script>
</html>
