Как обновить данные таблицы при выборе другого значения в поле выбора

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");
});
});
});

Это мой скрипт начальной загрузки

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" со статическим значением. У меня вопрос, как динамически установить значение datepicker в "start_date" "end_date". как я могу получить это. пожалуйста, кто-нибудь привести пример 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");
     });
 });

Это причина того, что таблица не обновляется, потому что только последние 3 параметра в выборке будут возвращать данные из запроса, и они имеют одинаковые valetlot_id значение, которое valetlot_52c3e6c52dd6f! И первые 2 valetlot_id возвращает пустой массив

Чтобы проверить, являются ли возвращаемые данные пустыми, выполните проверку после очистки таблицы.

console.log(data.length);

ОБНОВЛЕНИЕ С ИСПОЛЬЗОВАНИЕМdaterangepicker

HTML для daterangepicker

<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