Всем добрый вечер. В настоящее время создаю веб-приложение, в котором необходимо выводить таблицу с данными из БД, в зависимости от выбранных фильтров, примерно, как здесь:
Много читал про QueryDSL, но совсем не понимаю, как вся информация будет передаваться с сервера на сайт. Пока что все, что у меня получилось:
index.jsp
$(document).ready(function(){
$('#comboboxCountry').on('change', function(){
var countryId = $(this).val();
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath }/demo/loadStatesByCountry/' + countryId,
success: function(result) {
var result = JSON.parse(result);
var s = '';
for(var i = 0; i < result.length; i++) {
s += '<option value="' + result[i].id + '">' + result[i].name + '</option>';
}
$('#comboboxState').html(s);
}
});
});
$('#comboboxState').on('change', function(){
var stateId = $(this).val();
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath }/demo/loadCitiesByState/' + stateId,
success: function(result) {
var result = JSON.parse(result);
var s = '';
for(var i = 0; i < result.length; i++) {
s += '<option value="' + result[i].id + '">' + result[i].name + '</option>';
}
$('#comboboxCity').html(s);
}
});
});
$('#comboboxCity').on('change', function(){
var cityId = $(this).val();
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath }/demo/loadPhenomenaByCity/' + cityId,
success: function(result) {
var result = JSON.parse(result);
var s = '';
for(var i = 0; i < result.length; i++) {
s += '<option value="' + result[i].id + '">' + result[i].years + '</option>';
}
$('#comboboxYears').html(s);
}
});
});
Для примера, код репозитория:
public interface PhenomenaRepository extends CrudRepository<Phenomena, Integer> {
@Query("select distinct new com.demo.entities.PhenomenaEntity(id, years) from Phenomena where cities.id = :id")
public List<PhenomenaEntity> findDistinctByCities(@Param("id") int id);
}
И контроллера:
@ResponseBody
@RequestMapping(value = "loadPhenomenaByCity/{id}", method = RequestMethod.GET)
public String loadPhenomenaByCity(@PathVariable("id") int id) {
Gson gson = new Gson();
return gson.toJson(phenomenaService.findDistinctByCities(id));
}
Вот, как это выглядит:
Все было неплохо, когда я делал Страну, регион, станцию, так как подтягивал одно из другого, но как только появилась необходимость связать год и месяц, находящиеся в одной таблице, я впал в ступор. В чем проблема: есть данные за 1970, 1974, 1984, 1984 года. События произошли в 8, 7, 8 и 8 месяцах соответственно. При всех моих попытках получалось так, что месяцы выводились только при выборе первого параметра combobox`a, а в остальных полях месяц был пустым. Так же не получается убрать повторение 1984 года (в базе хранится два происшествия, произошедших в этом году), но хотелось бы, чтобы при выборе одного просто в месяце был выбор из двух месяцев соответственно. Добавление distinct в тело запроса проблему не решило, и в checkbox`е все также выводится два поля. Для меня тяжело все это переварить, так как просто закинули в пучину и сказали сделать, ничего при этом не объяснив.
Подытоживая все, сказанное мной выше (надеюсь я хоть часть своих мыслей смог выразить внятно), мне нужно решить проблему добавления фильтров на сайт и их связывание (фильтров) между собой, а также из результата выбранных фильтров формировать таблицу с данными по полям этих фильтров. Все это должно выполняться асинхронно, поэтому, как я понимаю, без ajax`а не обойтись. JS знаю плохо от слова совсем, может поэтому возник такой вопрос. Увидел кучу примеров на JS, но не понимаю, как сделать это, подтягивая данные с сервера. Очень надеюсь на вашу помощь, так как поиск информации в течении 3ех дней ни к чему не привел. Всем спасибо.
Простой
