Клиентский фильтр YUI Datatable со списком выбора?

Каждый компонент YAHOO.widget, такой как YUI DataTable использует YUI DataSource компонент, который предоставляет данные, необходимые для заполнения каждого отображаемого компонента YAHOO.widget. Ниже вы можете увидеть, как это работает

Обратите внимание, что каждый компонент YAHOO.widget внутренне обращается к основному источнику данных YUI через sendRequest (см. шаг 1). Теперь давайте посмотрим подпись sendRequest

sendRequest(request, callback)

• запрос

Для удаленных данных этот запрос может быть строкой параметра/значения, например "id=123&name=foo". Для локальных данных этот запрос может иметь более простое значение, например 123. Указание параметров может быть неуместным, поэтому это значение может быть просто нулевым.

• Перезвони

Это просто объект JavaScript, который можно описать следующим образом (обратите внимание на каждое свойство)

var callback = {
    success:function(request, response, payload) {
        /*
         * successful request is performed by success property
         */
    },
    failure:function(request, response, payload) {
        /*
         * failure request is performed by failure property
         */
    },
    scope:null,
    argument:null
}

Таким образом, когда каждый компонент YAHOO.widget вызывает внутренний источник данных YUI через метод sendRequest, он передает встроенный объект обратного вызова, как показано выше, который заботится о рендеринге самого компонента YAHOO.widget. Таким образом, если вам нужно настраиваемое поведение, вам нужно сделать вызов базовому источнику данных YUI и передать свой настраиваемый объект обратного вызова, чтобы отфильтровать данные, предоставленные источником данных YUI, следующим образом.

var datatable = // YUI datatable settings goes here

Чтобы прикрепить каждое событие change к каждому выбору, вы можете использовать

YAHOO.util.Event.addListener("sex", "change", function(e) {
    var value = e.getTarget(e).value;

    if(YAHOO.lang.isValue(value)) {
        /**
          * Notice i am retrieving The underlying datasource To make a call To sendRequest method
          */
        datatable.getDataSource().sendRequest(null, {
            success:function(request, response, payload) {
                /**
                  * because scope property (see bellow) refers To The datatable
                  * this keyword can be used To get a reference To The datatable
                  */

                /**
                  * initializeTable method clear any data stored by The datatable
                  */
                this.initializeTable();

                var rs = response.results;
                var filtered = [];
                for(var i = 0; i < rs.length; i++) {
                    /**
                      * Is The sex property equal To The value selected by The user ?
                      */ 
                    if(rs[i]["sex"] == value) {
                        filtered[filtered.length] = rs[i];
                    }
                }

                this.getRecordSet().setRecords(filtered, 0);

                // Update UI
                this.render();
            },
            scope:datatable,
            argument:null
        });
    }
});

Хотя не тестировалось, я уверен, что он будет работать нормально.