Question

我想在选择框中选择不同的值时刷新表值。我的问题是当选择选择框值表完全加载数据然后我选择另一个值表加载而不刷新现有值。

HTML代码

<select id="destinations">
   <option value=""></option>
</select>

<table class="table table-hover" id="class">
<thead>
<tr>
<th>S.No</th>
<th>Date &amp; Time</th>
<th>Status</th>
<th>Served Business</th>
<th>Total Amount</th>
<th>Parking Rate</th>
<th>Tip</th>
<th>Promo Code</th>
<th>Promo Discount</th>
</tr>
</thead>
</table>
<div id="label_CarsParked" class="number"></div>
<div id="label_RevenueWithTip" class="number"></div>
<div id="label_Revenue" class="number"></div>

脚本

$(document).ready(function() {
$.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_locations.php?callback=?', 'valetgroup_id=valetgroup_52c36a450a002', function(data) {
$.each(data, function(i, v) {
$('#destinations').append('<option value="' + v.ValetLotId + '">' + v.BusinessName + ', ' + v.Address + '</option>');
});
});
});
$('select').change(function() {
var params = {
valetlot_id: this.value,
start_date: '2014-01-01',
end_date: '2014-02-28'
};
var str = jQuery.param(params);
        $.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_transactions.php?callback=?', str, function(data) {
$.each(data, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.Date + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.BusinessName + "</td>" + "<td>" + f.TotalAmount + "</td>" + "<td>" + f.ParkingRate + "</td>" + "<td>" + f.Tip + "</td>" + "<td>" + f.PromoCode + "</td>" + "<td>" + f.PromoDiscount + "</td>" + "</tr>"
$(tblRow).appendTo("#class tbody");
});
});
});

这是我的bootstrap-datepicker脚本

function () {
$('#dashboard-report-range').daterangepicker({
opens: (App.isRTL() ? 'right' : 'left'),
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: {
days: 60
},
showDropdowns: false,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
buttonClasses: ['btn'],
applyClass: 'blue',
cancelClass: 'default',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Apply',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function (start, end) {
console.log("Callback has been called!");
$('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
$('#dashboard-report-range span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#dashboard-report-range').show();
}

在上面的getJson方法中，使用静态值设置“start_date”“end_date”。我的问题是如何动态地在“start_date”“end_date”中设置datepicker值。我怎么能得到这个。请任何人给jsfiddle例子。

Answer 1

首先，每当您发出ajax数据请求时，都必须清除表格。

$.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_transactions.php?callback=?', str, function(data) {

     $("#class tbody").html(''); /*Clearing the table*/

     /*Populating the table*/
     $.each(data, function(i, f) {
         var tblRow = "<tr>" + "<td>" + f.Date + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.BusinessName + "</td>" + "<td>" + f.TotalAmount + "</td>" + "<td>" + f.ParkingRate + "</td>" + "<td>" + f.Tip + "</td>" + "<td>" + f.PromoCode + "</td>" + "<td>" + f.PromoDiscount + "</td>" + "</tr>";
         $(tblRow).appendTo("#class tbody");
     });
 });

这就是为什么表没有刷新的原因，因为只有select中的最后3个选项将返回请求中的数据，并且它们具有相同的valetlot_id值valetlot_52c3e6c52dd6f！前2 valetlot_id返回一个空数组。

要检查返回数据是否为空，请在清除表格后进行检查。

console.log(data.length);

使用daterangepicker

进行更新

daterangepicker

的HTML

<input id="dashboard-report-range" type="text" />

要使用范围选择器获取日期值：

$('#dashboard-report-range').data('daterangepicker').startDate
$('#dashboard-report-range').data('daterangepicker').endDate

为了使代码更易于维护，您应该定义一个函数来获取数据并填充表格，以便select和#dashboard-report-range可以共享它。

$(function () {
        $('#dashboard-report-range').daterangepicker({

            startDate: moment().subtract('days', 29),
            endDate: moment(),
            minDate: '01/01/2012',
            maxDate: '12/31/2014',
            dateLimit: {
                days: 60
            },
            showDropdowns: false,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment().subtract('days', 6), moment()],
                'Last 30 Days': [moment().subtract('days', 29), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            buttonClasses: ['btn'],
            applyClass: 'blue',
            cancelClass: 'default',
            format: 'MM/DD/YYYY',
            separator: ' to ',
            locale: {
                applyLabel: 'Apply',
                fromLabel: 'From',
                toLabel: 'To',
                customRangeLabel: 'Custom Range',
                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                firstDay: 1
            }
        },
        function (start, end) {
            /*$('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));*/
            $("#class tbody").getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
            /*Update code */  
        $('#label_CarsParked').getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        $('#label_RevenueWithTip').getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        $('#label_Revenue').getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        });

        $.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_locations.php?callback=?', 'valetgroup_id=valetgroup_52c36a450a002', function (data) {
            $.each(data, function (i, v) {
                $('#destinations').append('<option value="' + v.ValetLotId + '">' + v.BusinessName + ', ' + v.Address + '</option>');
            });
        });

        $('select').change(function () {
            $("#class tbody").getData($(this).val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));
            /* Update Code */
            $('#label_CarsParked').getData($('#label_CarsParked').val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));
            $('#label_RevenueWithTip').getData($('#label_RevenueWithTip').val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));
            $('#label_Revenue').getData($('#label_Revenue').val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));            
        });
        $('#dashboard-report-range span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
        $('#dashboard-report-range').show();
});

/*Defining getData*/
$.fn.getData = function (valet, start, end) {
        var tbody = $(this);
        var params = {
            valetlot_id: valet,
            start_date: start,
            end_date: end
        };
        var str = jQuery.param(params);
        $.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_transactions.php?callback=?', str, function (data) {
            tbody.html(''); /*Clearing the table*/
            /*Populating the table*/
            $.each(data, function (i, f) {
                var tblRow = "<tr>" + "<td>" + f.Date + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.BusinessName + "</td>" + "<td>" + f.TotalAmount + "</td>" + "<td>" + f.ParkingRate + "</td>" + "<td>" + f.Tip + "</td>" + "<td>" + f.PromoCode + "</td>" + "<td>" + f.PromoDiscount + "</td>" + "</tr>";
                tbody.append(tblRow);
            });
        });
};

要了解有关引导日期范围选择器的更多信息，请查看此https://github.com/dangrossman/bootstrap-daterangepicker

如何在选择框中选择不同的值时刷新表数据

1 个答案: