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

Я хочу обновить значение таблицы, выбрав другое значение в поле «Выбор». Моя проблема заключается в том, что при выборе значения поля выбора таблица загружает данные идеально, тогда я выбираю другую таблицу значений, загруженную без обновления существующего значения.

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». как я могу получить это. пожалуйста, приведите пример jsfiddle.


person Bala    schedule 21.03.2014    source источник
comment
В вашем HTML нет элемента select.   -  person Mosho    schedule 21.03.2014
comment
@Mosho извините, я скучаю по нему   -  person Bala    schedule 21.03.2014


Ответы (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

person vbn    schedule 21.03.2014
comment
Большое спасибо @vbn, все работает ... У меня есть еще одно сомнение, как автоматически связать первое значение в поле выбора после загрузки веб-страницы. - person Bala; 21.03.2014
comment
У меня есть еще один вопрос Пожалуйста, проверьте данную ссылку сделай необходимое... Спасибо @vbn - person Bala; 21.03.2014
comment
привет @vbn, у меня есть еще одно сомнение ... в этом коде статически установлены 'start_date' и 'end_date'. теперь я собираюсь использовать загрузчик datepicker с этим кодом. я сомневаюсь, что когда я выбираю диапазон дат (например, с 1-1-1014 по 1-3-2014), таблица также показывает дату в пределах диапазона дат. Как это получить. - person Bala; 26.03.2014
comment
Вы имеете в виду, как получить значение в средстве выбора даты? $('#datepicker').val() - person vbn; 27.03.2014
comment
Привет @vbn, я обновил приведенный выше код, пожалуйста, проверьте его ... спасибо - person Bala; 27.03.2014
comment
О, ты имел в виду daterangepicker, а не datepicker. Это звучит как еще один вопрос :) но в любом случае, посмотрите на мой отредактированный ответ и дайте мне знать, если это то, что вам нужно. - person vbn; 28.03.2014
comment
Да, это хорошо работает @vbn ... но я хочу добавить еще одну ссылку API и попытаться отобразить данные в теге div, но данные таблицы были объединены с данными div при изменении значения поля выбора. пытаюсь исправить ошибку. можете ли вы помочь мне исправить это. я обновляю ваш код и выделяю его с помощью /* Обновить код */, пожалуйста, проверьте ваш ответ и помогите мне... спасибо - person Bala; 30.03.2014
comment
Я действительно не понимаю, как данные в таблице объединились с div, поскольку я не видел вашего HTML-кода. Однако, глядя на обновленный код, вы видите, что вы используете функцию getData неправильно. Объект, вызывающий функцию, должен быть table, поскольку внутри него создаются <tr> и <td>. Еще одна точка в вашем коде — $('#label_CarsParked').getData($('#label_CarsParked').val(). Это сбивает меня с толку относительно того, является ли label_CarsParked div, select или input. Потому что, если это div, вы не должны называть $('#label_CarsParked').val() - person vbn; 31.03.2014
comment
Чтобы добавить еще один URL-адрес, вы можете просто сделать его параметром функции $.fn.getData = function (valet, start, end, url), а затем вызвать $.getJSON(url, str, function (data) { .... - person vbn; 31.03.2014
comment
Привет @vbn, я много пробовал, но данные таблицы были объединены с элементом Div. Я обновил свой HTML-код, а ваш $.fn.getData, пожалуйста, проверьте обновление. Моя проблема заключается в том, что при выборе таблицы значений dateragepicker отлично отображаются данные, но блок div показывает как данные div, так и данные таблицы. Я думаю, что проблема в var tbody = $(this); не уверен в этом. Пожалуйста, проверьте это... спасибо - person Bala; 02.04.2014
comment
Я не знаю, как это выглядит с вашей стороны, но, как я уже говорил, $('#label_CarsParked').getData($(this).val(), не имело смысла. Это может быть причиной слияния. Пожалуйста, внимательно прочитайте мой предыдущий комментарий! Тот, кто вызывает getData, будет this в этой функции. - person vbn; 03.04.2014