Фильтрация больших объемов данных из таблицы HTML с jQuery - PullRequest
Новая
       3

Фильтрация больших объемов данных из таблицы HTML с jQuery

1 голос
/ 23 апреля 2010

Я работаю в транспортном агентстве, и у меня есть большие объемы данных (в основном, раз), и мне нужен способ фильтрации данных с использованием двух текстовых полей (Кому и От).

Я нашел быстрый поиск jQuery, но, похоже, работает только с одним текстовым полем.

Если у кого-то есть какие-либо идеи через jQuery или какую-либо другую клиентскую библиотеку, это было бы замечательно.

Идеальный пример:

Кому: [Текстовое поле] От: [Текстовое поле] 

<table>
<tr>
<td>69th street</td><td>5:00pm</td><td>5:06pm</td><td>5:10pm</td><td>5:20pm</td>
</tr>
<tr>
<td>Millbourne</td><td>5:09pm</td><td>5:15pm</td><td>5:20pm</td><td>5:25pm</td>
</tr>
<tr>
<td>Spring Garden</td><td>6:00pm</td><td>6:15pm</td><td>6:20pm</td><td>6:25pm</td>
</tr>
</table>

У меня есть HTML-страница с гигантской таблицей, на которой перечислены названия станций и время каждой станции.Я хочу иметь возможность поместить свое начальное местоположение в один ящик, а свое конечное местоположение - в другой, и все элементы в таблице исчезают, не относящиеся ни к одному из двух введенных мест, оставляя только две строки, соответствующиенабрано (даже если они не пишут правильно или вводят его полностью) Подобно плагину быстрого поиска jQuery

Ответы [ 4 ]

3 голосов
/ 23 апреля 2010

Если вы хотите создать свой собственный, то вот одна из возможных реализаций: 

// store values for later
$('#table-to-fiter tr').each(function() {
    var firstCellText = $('td:first', this).text().toLowerCase();
    $(this).data('firstCellText', firstCellText);
});

function refreshFilter() {

    var toValue = $('#to-input').val().toLowerCase(),
        fromValue = $('#from-input').val().toLowerCase(),
        firstCellText;

    $('#table-to-fiter tr').each(function() {
        firstCellText = $(this).data('firstCellText');
        if (firstCellText.indexOf(toValue) !== -1 || firstCellText.indexOf(fromValue) !== -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

}

$('#to-input, #from-input').keyup(refreshFilter);
1 голос
/ 24 марта 2011

Если вам нужно отфильтровать каждый столбец в таблице по отдельности, попробуйте использовать плагин ColumnFilter jQuery (см. Страница плагина Jquery и демонстрационная страница ).

0 голосов
/ 24 апреля 2010

У вас есть доступ к самим данным? Если вы это сделаете, вы можете создать классы и добавить их в строки таблицы. 

<tr class="Melbourne"><td></td><td></td></tr>

Затем по нажатию кнопки сделайте что-то вроде 

function myFilter(fromloc, toloc) {
  $("tr").hide();
  $("tr." + fromloc).show();
  $("tr." + toloc).show();
}

Будет ли это работать? Очевидно, на практике это может быть немного сложнее. Но селекторы jQuery невероятно мощны, и я думаю, что они могут справиться с манипуляциями так же.

0 голосов
/ 23 апреля 2010

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

Я бы сделал это следующим образом:

  1. Чтобы легко выполнять фильтрацию данных, я переведу в формат JSON .Пример кода создаст массив объектов java-script с полем Stantion string и Time - массивом строк.Представление Json объекта данных позволит вам фильтровать по каждому столбцу, что является ключевым моментом представления данных в JSON и их рендеринга на стороне клиента.

  2. Чтобы выполнить фильтрацию, реализуйте что-то похожее на предложенное Кеном - обработку события нажатия клавиши в текстовом поле, но чтобы воспользоваться преимуществами представления данных JSON, функция фильтрации будет извлекать StationInfo из массива данных..

  3. Используйте JQGrid данные для отображения результатов фильтрации.

Грубый пример: 

    var data = [
            {Stantion: '69th street', Time: ['5:00pm', '5:05pm']}, 
            {Stantion: 'Millbourne', Time: ['5:00pm', '5:05pm']} // StationInfo object
    ];
    function RenderData(data)
    {
            // Rendering of data using JQGrid or JTemplates
    }
    $('#textbox-a').keyup(function()
    {
            var textBoxValue = $('#textbox-a').val();
            var filteredItems = $.grep(data, function(a, i)
            {
                    return a.indexOf(textBoxValue) != -1;
            });
            RenderData(filteredItems);
    });
...