Question

我使用JSON值绑定动态引导表。此表包含“开始日期”和“结束日期”列。所以我必须在昨天和今天之间过滤Bootstrap表。如果我将日期更改为“月”，我将单独下拉列表称为日期过滤器。它将过滤引导表中的当前月份数据。所以请找到下面的代码，

HTML：

<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>



<div class="pull-left tableAction hide" onchange="filtersByDate()">
                <select class="form-control" id="date">
                    <option value="<any date>">Any date</option>
                    <option value="Today">Today</option>
                    <option value="Current Week">CurrentWeek</option>
               </select>
 </div>

JS：

$.ajax({
            type: "POST",
            url: "apilist",
            data: "",
            success: function (response) {
                        if (response != null) {
                            var data = [];
                            $.each(response.Slip, function (index) {
                                var obj = {};
                                obj.SlipID = response.Slip[index].SlipID;
                                obj.Client = response.Slip[index].Client;
                                obj.Start = response.Slip[index].StartDate;
                                obj.End = (response.Slip[index].EndDate;
                                data.push(obj);
                            });
                            $('#eventsTable').bootstrapTable({
                                columns: [
                                    { field: "state", checkbox: true },
                                    { field: "SlipID", title: 'SlipID', sortable: true, class : "hide" },
                                    { field: "Client", title: 'Client', sortable: true },
                                    { field: "Start", title: "Start", sortable: true },
                                    { field: "End", title: "End", sortable: true },
                                ],
                                data: data,
                            });
                        }
              }
});

function filtersByDate()
{
    startDate= $("#startDate").val();
    endDate = $("#startDate").val();
    searchFunction(startDate,endDate);
}
function searchFunction(startDate, endDate) {
var table, tr, td, td2, i;
    table = document.getElementById("eventsTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[13];
        td2 = tr[i].getElementsByTagName("td")[14];
        if (td) {
            if (td.innerHTML != "-") {
                var dateFormat = new Date(parseInt(td.innerHTML.split('-')[0]), parseInt(td.innerHTML.split('-')[1]), parseInt(td.innerHTML.split('-')[2]));
                var startdateFormat = new Date(parseInt(startDate.split('-')[0]), parseInt(startDate.split('-')[1]), parseInt(startDate.split('-')[2]));
                if (dateFormat >= startdateFormat) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
       }
        if (td2) {
            if (td2.innerHTML != "-") {
                var dateFormat = new Date(parseInt(td2.innerHTML.split('-')[0]), parseInt(td2.innerHTML.split('-')[1]), parseInt(td2.innerHTML.split('-')[2]));
                var enddateFormat = new Date(parseInt(endDate.split('-')[0]), parseInt(endDate.split('-')[1]), parseInt(endDate.split('-')[2]));
                if (dateFormat <= enddateFormat) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
}

请告诉我你的建议，

Answer 1

最后我找到了解决方案，

tr [i] .getElementsByTagName（“td”）[13]是引导程序表中的开始日期

tr [i] .getElementsByTagName（“td”）[14]是引导程序表中的结束日期

<强> JS

 function searchFunction(startDate, endDate) {
        var table, tr, td, td2, i;
        table = document.getElementById("eventsTable");
        var startValue = false;
        var endValue = false;
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[13];
            td2 = tr[i].getElementsByTagName("td")[14];
            if (td) {
                if (td.innerHTML != "-") {
                    if ((new Date(td.innerHTML)).getTime() >= (new Date(startDate)).getTime()) {
                        startValue = true;
                    } else {
                        startValue = false;
                    }
                }
           }
            if (td2) {
                if (td2.innerHTML != "-") {
                    if ((new Date(td2.innerHTML)).getTime() <= (new Date(endDate)).getTime()) {
                        endValue = true;
                    } else {
                        endValue = false;
                    }
                }
            }
            if (i != 0) {
                if (startValue == true && endValue == true) {
                    tr[i].style.display = "";
                }
                else {
                    tr[i].style.display = "none";
                }
            }
        }

由于

使用Jquery过滤启动和结束日期的Bootstrap表

1 个答案: