Ajax Filtering результаты с использованием jQuery, ползунки, радио, флажок

Question

Мне нужна страница, на которой я буду отображать таблицу, отображаемая таблица основана на выборках, сделанных на странице, и обновляется с помощью ajax.

У меня есть два ползунка диапазона на странице, один для ценыи еще один для размера также есть флажки на странице, чтобы вы могли выбрать дерево, металл и / или пластик.

Мне нужна помощь в том, как я должен структурировать jQuery для передачи всех этих параметров.

Я знаю, как сделать php и как сгенерировать таблицу и т. Д. Но я застрял в структурировании jQuery, чтобы учесть все различные варианты, пожалуйста, любая помощь с этим приветствуется.

Обновить---------------------------------------------------------------

Привет

Спасибо за ответы, но план немного изменился:

У меня есть список ulматериалов, дерева / пластика и металла,

Пользователь должен сначала выбрать один из них, а затем отобразить таблицу.

Когда отображается таблица, также звонил пользовательский интерфейс jquery.Здесь отображается ползунок, вы можете изменить диапазон размеров, и таблица должна обновляться на основе этих выборов, обратите внимание, что выбранный материал должен быть повторно отправлен, а размеры выбраны с помощью ajax (в основном нужен код для запоминания выбранного материала).

Пожалуйста, посмотрите код ниже, который у меня есть на данный момент:

 

$(function() {
    $slider = $("#slider");//Caching slider object
    $size = $("#size");//Caching size object
    $slider.slider({
        range: true, // necessary for creating a range slider
        min: 0, // minimum range of slider
        max: 50, //maximimum range of slider
        values: [0, 50], //initial range of slider
        step: 0.2,
        slide: function(event, ui) { // This event is triggered on every mouse move during slide.
            $size.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of  size span to current slider values
        },
        stop: function(event, ui){//This event is triggered when the user stops sliding.
            getDiamonds();
        }
    });
    $size.html($slider.slider("values", 0) + 'm - ' + $slider.slider("values", 1) + 'm');
});

function getTable(){
    $.ajax({
        type: "POST",
        url: "getTable.php",
        data: "szMin="+$slider.slider('values', 0)+"&szMax="+$slider.slider('values', 1)+"material="+$('#material_type').val(),
        success: function(responseText){
            $('#txtHint').html(responseText);
            $(".tablesorter").collapsible("td.collapsible", {collapse: true})
            .tablesorter({sortList: [[5,1]],headers: {0: {sorter: false}}, widgets: ['zebra'], onRenderHeader: function (){this.wrapInner("");}, debug: false})
            .tablesorterPager({container: $("#pager"), positionFixed: false});
            $("tr.first_row_class").hover(
                function () {$(this).children('td').attr("style","background-color:#FDF5CE");},function () {$(this).children('td').removeAttr("style");});
        }
    });
};
$(function() {
    $( '#selectable' ).selectable({
        stop: function() {
            var selectedLI = $('.ui-selected', this).attr("id");
            //alert(selectedLI);
        }
    }); 
}); 

после этого у меня есть список ul li (li имеет id = "пластик / дерево или металл"

.

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

Извините, если у меня естьповторил я, просто пытаясь быть максимально ясным.Наконец, я хотел бы, чтобы jquery был как можно более эффективным, и я мог бы рассмотреть возможность размещения дополнительных ползунков и выделений позже.

Спасибо за помощь.Ps, кнопка отправки отсутствует, обновления должны происходить при отпускании слайдера и / или щелчке типа материала.

Answer 1

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

    function wrapData($jqr){
        if(typeof $jqr == 'string') {$jqr = $($jqr)}
        var data = {};
        $jqr.find('select,input:text,input:hidden,textarea,input:password').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            data[name] = $t.val();
        });
        $jqr.find('input:checkbox').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            if($t.is(':checked')){
                data[name] = true;
            } else {
                data[name] = false;
            }
        });
        $jqr.find('input:radio').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            if($t.is(':checked')){
                data[name] = $t.val();
            }
        });
        return data;
    }

$('#submit').click(function(){ var data = wrapData('#all_inputs')
   /* you can then send the parameters to your server */ })

Надеюсь, это поможет вам.