JavaScript - 2分钟后动态删除行

时间:2018-01-06 17:30:54

标签: javascript jquery html

我使用get方法调用webapi,它将提供json数据,并显示为该数据的表格。我在下面给出的代码工作正常。我得到了大约25行(当我适应服务时动态地和#34;数据。这个网页将使用signalR刷新。当数据库中的任何更改立即反映在网页中时。

我的问题是"" + item.TakeupType + ""值是否为"已完成"或"取消"此行背景应更改为灰色,并且应在网页中删除2分钟后的行。

注意:
1)按日期时间顺序,网页上只能显示22行 2)来自DB的已完成/取消的项目应在网页上显示2分钟并放下。

我的代码:

Hide   Expand    Copy Code
//Webapi call - To load info status.
function LoadinfoStatus() {
    $.ajaxSetup({
        beforeSend: function (xhr) {
            xhr.setRequestHeader('x-api-key', '9024024A-024-485C024-6BC2024DA');
        }
    });

    $.ajax({
        type: "GET",
        url: "https://mywebsites.net/version1/info/494",

        contentType: "application/json; charset=utf-8",

        dataType: "json",
        success: function (data) {
            // alert(JSON.stringify(data));
            $("#DIV").html('');
            var DIV = '';

            //Function to get DateFormat
            function getFormattedDate(date) {
                // debugger;
                var inputdate = new Date(date);
                var currentdate = new Date();

                var strTime = getFormattedTime(inputdate);
                var rngStrTime = getFormattedTime(add_minutes(inputdate, 5));

                if (inputdate > currentdate) {
                    return inputdate.getDate() + '/' + (inputdate.getMonth() == 0 ? 12 : inputdate.getMonth()) + " " + strTime + " - " + rngStrTime;
                }
                else {
                    return strTime + " - " + rngStrTime;
                    //return day + "/" + month + " - " + strTime;
                }
            }

            var add_minutes = function (dt, minutes) {
                return new Date(dt.getTime() + minutes * 60000);
            }

            function getFormattedTime(inputdate) {
                var day = inputdate.getDate();
                var month = inputdate.getMonth() + 1;
                var hours = inputdate.getHours();
                var minutes = inputdate.getMinutes();
                var ampm = hours >= 12 ? 'pm' : 'am';
                hours = hours % 12;
                hours = hours ? hours : 12;
                minutes = minutes < 10 ? '0' + minutes : minutes;

                return hours + ':' + minutes + ampm;
            }


            $.each(data, function (i, item) {

                var rows = "<tr ' " + (item.Count > 100 ? "data-id='" + item.orderId + "'" : "") + (item.TakeupType == "Cancelled" ? "style='background-color: gray; color: white'" : "") + " align= 'center' > " +
                    "" + "" + "" + "" +
                    "" + item.user.firstName + " " + item.user.lastName.charAt(0) + "." + "" +
                    "" + item.TakeupType + "" +
                    "" + (item.Count == undefined ? "$" + " " + 0 : "$" + " " + item.Count) + "" +
                    "" + getFormattedDate(item.TakeupTimeUtc) + "" +
                    "= 100 ? "style='background-color: darkorange; color: white'>***" : ">") + "" +
                    "";

                var $tbody = $('tblOrders tbody');

                $('#tblOrders').append(rows);
            }); //End of foreach Loop


            registerEvents();
            // console.log(data);
        }, //End of AJAX Success function

        failure: function (data) {
            alert(data.responseText);
        }, //End of AJAX failure function
        error: function (data) {
            alert(data.responseText);
        } //End of AJAX error function

    });
}

0 个答案:

没有答案