Можно ли фильтровать уже полученные данные с помощью jQuery? - PullRequest
Новая
       5

Можно ли фильтровать уже полученные данные с помощью jQuery?

0 голосов
/ 23 января 2019

Я использую фреймворк Laravel и получаю данные.Сейчас я пытаюсь отфильтровать данные с помощью Ajax и jQuery.Но проблема с парой, с которой я сталкиваюсь ...

ОБНОВЛЕНО 4

Когда я запускаю фильтр, возникает эта ошибка:

"/ var / www/html/laravel/vendor/laravel/framework/src/Illuminate/Routing/RouteCollection.php "," line ": 255," trace ": [{" file ":" / var / www / html / laravel / vendor /laravel / framework / src / Illuminate / Routing / RouteCollection.php "," line ": 242," function ":" methodNotAllowed "," class ":" Illuminate \ Routing \ RouteCollection "," type ":" -> "},

Есть ли что-то, что мне не хватает в контроллере?или пойдут?Спасибо за помощь!

Контроллер Laravel: 

public function search(Request $request)
{
  $q = $request->q;
  $sortbyprice = $request->sortbyprice;
  $region = $request->region;
  $rooms = $request->rooms;
  $price = $request->price;
  $max = $request->input('max');
  $min = $request->input('min');

  $paginationData = [
      'q' => $q
  ];

  $estates = \DB::table('allestates')
      ->where('lat', '!=', '')
      ->where('lng', '!=', '')
      ->where('price', '!=', '')
      ->when($q, function($query, $q) use ($paginationData) {
          $paginationData['q'] = $q;
          return $query->where(function($query) use ($q) {
                      $query->where("building_name", "LIKE", "%" . $q . "%")
                          ->orWhere("address", "LIKE", "%" . $q . "%")
                          ->orWhere("company_name", "LIKE", "%" . $q . "%")
                          ->orWhere("region", "LIKE", "%" . $q . "%")
                          ->orWhere("rooms", "LIKE", "%" . $q . "%");
                  });
      })
      ->when($sortbyprice, function($query, $order) use ($paginationData) {
          if(!in_array($order, ['asc','desc'])) {
              $order = 'asc';
          }
          $paginationData['sortbyprice'] = $order;
          return $query->orderBy('price', $order);

      }, function($query) {
          return $query->orderBy('price');
      })
      ->when($region, function($query, $regionId) use ($paginationData) {
          $paginationData['region'] = $regionId;
          return $query->where('region', $regionId);
      })
      ->when($rooms, function($query, $roomsId) use ($paginationData) {
          $paginationData['rooms'] = $roomsId;
          return $query->where('rooms', "LIKE", "%" . $roomsId . "%");
      })
      ->when($max, function($query, $max) use ($min, $paginationData) {
          $paginationData['min'] = $min;
          $paginationData['max'] = $max;
          return $query->whereBetween('price', [$min, $max]);
      })
      // ->toSql()
      ->paginate(100);

  $paginationData = array_filter($paginationData);

  return view("home", compact('estates', 'q','paginationData'));
}


var displayList = $('#display-wrapper ol');
var selectedOptions = {
    sortbyprice: '',
    rooms: '',
    region: ''
};


$('html').click(function () {
    console.log(selectedOptions);
});

$('a.region').on('click', function () {

    var selectValue = $(this).data('value');

    $('#region').text(selectValue);
    selectedOptions.region = selectValue;
    fetchDataFromServer(selectedOptions);
});

$('a.rooms').on('click', function () {
    var selectValue = $(this).data('value');

    $('#rooms').text(selectValue);
    selectedOptions.rooms = selectValue;
    fetchDataFromServer(selectedOptions);
});

$('a.sortbyprice').on('click', function () {
    var selectValue = $(this).text();

    selectedOptions.sortbyprice = selectValue;
    fetchDataFromServer(selectedOptions);
});

function serialize(options) {
    var arr = [];

    for (var key in options) {
        arr.push(key + '=' + options[key]);
    }

    return encodeURI(arr.join('&'));
}

function fetchDataFromServer(options) {
    $.ajax({
        type: 'POST',
        url: '/home',
        data: serialize(options),
        success: function (response) {
            if (response.error) {
                console.error(response.error);
            } else {
                console.log(response);
               
                updateDisplay(displayList);
            }
        },
        error: function (html, status) {
            console.log(html.responseText);
            console.log(status);
        }
    });
}

function updateDisplay(node, data) {
    var template = data.reduce(function (acc, item) {
        return acc + '<li><p>Region: ' + item.region + '</p><p>Price: ' + item.price + '</p><p>Rooms: ' + item.rooms + '</p></li>';
    }, '');

    node.empty();
    node.append(template);
}
#filter-wrapper {
    margin-top: 15px
}

#filter-wrapper ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0
}

#filter-wrapper ul a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 32px;
    padding: 0 15px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#filter-wrapper ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0
}

#filter-wrapper ul li.current-menu-item {
    background: lightblue;
}

#filter-wrapper ul li:hover {
    background: #f6f6f6
}

#filter-wrapper ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0
}

#filter-wrapper ul ul li {
    float: none;
    width: 200px
}

#filter-wrapper ul ul a {
    line-height: 120%;
    padding: 10px 15px
}

#filter-wrapper ul ul ul {
    top: 0;
    left: 100%
}

#filter-wrapper ul li:hover>ul {
    display: block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter-wrapper">
              <ul>
                  <li><a class="sortbyprice" href="javascript:" data-value="sortbyprice">Cheapest</a></li>
                  <li class="dropdown">
                      <a href="#" id="rooms">間取り</a>
                      <ul class="init" name="rooms">
                          <li><a class="rooms" href="javascript:" data-value="1DK">1DK</a></li>
                          <li><a class="rooms" href="javascript:" data-value="2LDK">2LDK</a></li>
                          <li><a class="rooms" href="javascript:" data-value="3LDK">3LDK</a></li>
                      </ul>
                  </li>

                  <li class="dropdown">
                      <a href="#" id="region">エリア</a>
                      <ul class="init" name="region">
                          <li><a class="region" href="javascript:" data-value="関西">関西</a></li>
                          <li><a class="region" href="javascript:" data-value="関東">関東</a></li>
                          <li><a class="region" href="javascript:" data-value="北海道">北海道</a></li>
                      </ul>
                  </li>
              </ul>
          </div>

          <div id="display-wrapper">
              <ol></ol>
          </div>

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Основная идея заключается в создании переменной для хранения всех параметров, выбранных пользователем, и при каждом запросе ajax вы отправляете соответствующие данные на сервер для получения отфильтрованного результата.

Iудалил скрытую HTML-форму и решил использовать вместо нее объект.

Запрос ajax в этом фрагменте кода не работает, поскольку у меня нет конечной точки '/ home' для получения ресурсов, но ядумаю, что это будет работать на вашем компьютере.

В качестве примечания, атрибут id должен быть уникальным, иначе поведение может отличаться от ожидаемого.А для обработчиков onclick, если у вас много выпадающих списков, вы должны подумать о том, чтобы сгенерировать их с циклом, а не копировать и вставлять, как я, но для демонстрационных целей я оставлю это как есть. 

// a sample display
var displayList = $('#display-wrapper ol');
// create an object to store the selected options
var selectedOptions = {
    sortbyprice: '',
    rooms: '',
    region: ''
};

// this event handler is for logging out the selectedOptions
// so that you can see what happens to the variable
// you should remove this in production
$('html').click(function () {
    console.log(selectedOptions);
});

$('a.region').on('click', function () {
    // I guess what you're trying to do here is to update the dropdown
    // text into the selected value, e.g replace エリア with 関西
    var selectValue = $(this).data('value');

    $('#region').text(selectValue);
    selectedOptions.region = selectValue;
    fetchDataFromServer(selectedOptions);
});

$('a.rooms').on('click', function () {
    var selectValue = $(this).data('value');

    $('#rooms').text(selectValue);
    selectedOptions.rooms = selectValue;
    fetchDataFromServer(selectedOptions);
});

$('a.sortbyprice').on('click', function () {
    // var selectValue = $(this).text();
    // selectedOptions.sortbyprice = selectValue;
    selectedOptions.sortbyprice = 'asc';
    fetchDataFromServer(selectedOptions);
});

function fetchDataFromServer(options) {
    $.ajax({
        type: 'GET',
        url: '/home',
        data: options,
        success: function (response) {
            if (response.error) {
                // sweetAlert("Oops...", response.data, "error");
                console.error(response.error);
            } else {
                console.log(response);
                // I assume the data structure of the response is something like
                // var reponse = {
                //     data: [
                //         {
                //             price: 123,
                //             rooms: '1DK',
                //             region: '関西'
                //         },
                //         ......
                //     ]
                // }
                // This is an example function for updating the UI
                // You can replace this function according to your needs
                updateDisplay(displayList, response.data);
            }
        },
        error: function (html, status) {
            console.log(html.responseText);
            console.log(status);
        }
    });
}

function updateDisplay(node, data) {
    // build the html for the node(<ol> tag)
    var template = data.reduce(function (acc, item) {
        return acc + '<li><p>Region: ' + item.region + '</p><p>Price: ' + item.price + '</p><p>Rooms: ' + item.rooms + '</p></li>';
    }, '');

    // add the template to the node(<ol> tag)
    node.empty();
    node.append(template);
}
#filter-wrapper {
    margin-top: 15px
}

/*
 *  I added this line for demo purpose
 *  Not sure whether you'll need this in your app
 *  Feel free to remove this
 */
#filter-wrapper::after {
    content: '';
    clear: both;
    display: block;
}

#filter-wrapper ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0
}

#filter-wrapper ul a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 32px;
    padding: 0 15px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#filter-wrapper ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0
}

#filter-wrapper ul li.current-menu-item {
    background: lightblue;
}

#filter-wrapper ul li:hover {
    background: #f6f6f6
}

#filter-wrapper ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0
}

#filter-wrapper ul ul li {
    float: none;
    width: 200px
}

#filter-wrapper ul ul a {
    line-height: 120%;
    padding: 10px 15px
}

#filter-wrapper ul ul ul {
    top: 0;
    left: 100%
}

#filter-wrapper ul li:hover>ul {
    display: block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filter-wrapper">
    <ul>
        <li><a class="sortbyprice" href="javascript:" data-value="sortbyprice">Cheapest</a></li>
        <li class="dropdown">
            <a href="#" id="rooms">間取り</a>
            <ul class="init" name="rooms">
                <li><a class="rooms" href="javascript:" data-value="1DK">1DK</a></li>
                <li><a class="rooms" href="javascript:" data-value="2LDK">2LDK</a></li>
                <li><a class="rooms" href="javascript:" data-value="3LDK">3LDK</a></li>
            </ul>
        </li>

        <li class="dropdown">
            <a href="#" id="region">エリア</a>
            <ul class="init" name="region">
                <li><a class="region" href="javascript:" data-value="関西">関西</a></li>
                <li><a class="region" href="javascript:" data-value="関東">関東</a></li>
                <li><a class="region" href="javascript:" data-value="北海道">北海道</a></li>
            </ul>
        </li>
    </ul>
</div>

<div id="display-wrapper">
    <ol></ol>
</div>
0 голосов
/ 23 января 2019

Да, вы можете. Это часто делается на сервере, но если ваш набор данных достаточно мал, он может работать. Если вы установите фильтруемые точки данных в качестве элементов данных ваших элементов, вы можете просто сравнить выбранное значение из фильтра. Функция each в jQuery - это один из способов циклического перемещения по элементам, и затем вы можете использовать функцию data для доступа к соответствующему атрибуту данных. 

$('#room-filter').on('change', function() {
  const numRooms = $(this).val();
  $('.card').each(function() {
    if (numRooms && numRooms != $(this).data('rooms')) {
      $(this).slideUp();
    } else {
      $(this).slideDown();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Rooms:
<select id="room-filter">
  <option value="">Show All</option>
  <option value="1">1 Room</option>
  <option value="2">2 Rooms</option>
  <option value="3">3 Rooms</option>
</select>

<div class="card text-left" data-rooms="1">
  <div class="card-body d-flex" id="content-card">
    <h2>Shack</h2>
    <p class="main-text">1 room</p>
  </div>
</div>

<div class="card text-left" data-rooms="1">
  <div class="card-body d-flex" id="content-card">
    <h2>Second Shack</h2>
    <p class="main-text">1 room</p>
  </div>
</div>

<div class="card text-left" data-rooms="3">
  <div class="card-body d-flex" id="content-card">
    <h2>Bungalo</h2>
    <p class="main-text">3 rooms</p>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...