Как сделать ajax выборку из БД по нескольким параметрам?

308

10 января 2017, 00:07

Как сделать такую ajax выборку?

Табы сделал, а вот как дальше по кнопке продолжить выборку?

Получается при нажатии на таб у меня получается ?tab=1

Дальше при нажатии на кнопку 1, 2 и т.д. я должен получить ?tab=1&sub=11

Не могу понять, что в пхп и ajax надо написать? И пример не могу найти.

<div id="ajax-reload">
    <div class='tab'>
        <div class='tab-header'>
          <div class='tab' data-tab='1'>Таб 1</div>
          <div class='tab' data-tab='2'>Таб 2</div>
        </div>
        <div class='tab-content'>
            <div class='subs'>
                <div class='sub' data-sub='11'>Кнопка 1</div>
                <div class='sub' data-sub='22'>Кнопка 2</div>
                <div class='sub' data-sub='33'>Кнопка 1</div>
            </div>
            <div class='subs-content'>
                <div class='item'>Текст 1</div>
                <div class='item'>Текст 2</div>
                <div class='item'>Текст 3</div>
            </div>
        </div>
    </div>
</div>
$(function() {
            $('.tab').on('click', function() {
                var $data_tab;
                $data_tab = $(this).attr('data-tab');
                $.get("URL_PAGE", {
                        tab: $data_tab
                    })
                    .done(function(data) {
                        $("#ajax-reload").html(data);
                    });
            });
        });
$tab = $_GET['tab'];
    //Подгружаем объекты по нажатию на таб
    if(isset($tab)){
        $query_where = "Sub_ID=$tab";
    }

Answer 1

Дальше при нажатии на кнопку 1, 2 и т.д. я должен получить ?tab=1&sub=11.

Не могу понять, что в пхп и ajax надо написать?

Проще всего для вкладки .sub добавить data-tab, после чего Вам станет очень просто получать tab и sub. В вашем же случае, если предположить, что при нажатии на tab, ему добавляется класс active(или иной другой, который добавляет стиль активной вкладки), получаем следующее:

$(document).on("click", ".sub", function() { 
  var sub = $(this).data("sub"); 
  var tab = $(".tab.active").data("tab"); 
  console.log("?tab=" + tab + "&sub=" + sub); 
});

.tab-content { 
  width: 618px; 
} 
.tab-content, 
.tab-header .tab, 
.sub, 
.item { 
  border: 2px solid #EE497A; 
  border-radius: 4px; 
  padding: 10px; 
} 
.tab.active { 
  background: #2D4565; 
  color: #fff; 
} 
.tab-header .tab, 
.sub { 
  width: 100px; 
  display: inline-block; 
  margin-right: 10px; 
  cursor: pointer; 
} 
.tab-header .tab, 
.sub, 
.item { 
  margin-bottom: 10px; 
} 
.item { 
  font-size: 13px; 
  height: 40px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="ajax-reload"> 
  <div class='tab'> 
    <div class='tab-header'> 
      <div class='tab active' data-tab='1'>Таб 1</div> 
      <div class='tab' data-tab='2'>Таб 2</div> 
    </div> 
    <div class='tab-content'> 
      <div class='subs'> 
        <div class='sub' data-sub='11'>Кнопка 1</div> 
        <div class='sub' data-sub='22'>Кнопка 2</div> 
        <div class='sub' data-sub='33'>Кнопка 1</div> 
      </div> 
      <div class='subs-content'> 
        <div class='item'>Текст 1</div> 
        <div class='item'>Текст 2</div> 
        <div class='item'>Текст 3</div> 
      </div> 
    </div> 
  </div> 
</div>

P.S.: если же вдруг по какой-то причине Вы не добавляете для активной вкладки .tab класс active или любой другой, получите активную вкладку при помощи filter().

Answer 2

$(function() {
            $('.tab').on('click', function() {
                location.href = '?tab=' + $(this).attr('data-tab');
            });
            $('.sub').on('click', function() {
                location.href = '?<?=($_GET[tab] ? "tab=$tab_slc"."&" : NULL);?>sub=' + $(this).attr('data-sub');
            });
        });

$tab_slc = $_GET['tab'];
    $sub_slc = $_GET['sub']; 
    if($tab_slc OR $sub_slc) 
    { 
        if($tab_slc)
        {
            $query_where_array[] = "Parent=$tab_slc";
        }
        if($sub_slc) {
            $query_where_array[] = "Services=$sub_slc";
        }
        $query_where = implode(" && ", $query_where_array);
    }

Осталось дело за ajax'ом