Как адаптировать таблицу данных, например, «multi-filter» для поддержки нескольких таблиц

Question

Как адаптировать таблицу данных, например, «multi-filter» для поддержки нескольких таблиц

0

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

Чтобы достичь этого, я думаю, что я должен установить три отдельные переменные:

var oTable0 = $('#tabs-0 table.display').dataTable({
var oTable1 = $('#tabs-1 table.display').dataTable({
var oTable2 = $('#tabs-2 table.display').dataTable({

Для фильтрации мне нужно что-то вроде:

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
  oTable0.fnFilter( this.value, $("tfoot input").index(this) );
  oTable1.fnFilter( this.value, $("tfoot input").index(this) );
  oTable2.fnFilter( this.value, $("tfoot input").index(this) );
});

Для нижнего колонтитула я также должен индивидуализировать строки. Вот пример для первой таблицы:

<th>
  <input type="text" name="search_tabs0_rfid" value="Search column" class="search_init0" />
</th>
<th>
  <input type="text" name="search_tabs0_art" value="Search column" class="search_init0" />
</th>
...

Для адаптации части удобства пользователя я подумал:

$("tfoot input").each( function (i) {
    asInitVals0[i] = this.value;
    asInitVals1[i] = this.value;
    asInitVals2[i] = this.value;
});

$("tfoot input").focus( function () {
    if ( this.className == "search_init0" ){ this.className = ""; this.value = "";}
    if ( this.className == "search_init1" ){ this.className = ""; this.value = "";}
    if ( this.className == "search_init2" ){ this.className = ""; this.value = "";}
});

$("tfoot input").blur( function (i) {
    if ( this.value == "" ){ this.className = "search_init0"; this.value = asInitVals0[$("tfoot input").index(this)];}
    if ( this.value == "" ){ this.className = "search_init1"; this.value = asInitVals1[$("tfoot input").index(this)];}
    if ( this.value == "" ){ this.className = "search_init2"; this.value = asInitVals2[$("tfoot input").index(this)];}
});

Теперь первая вкладка (# tabs-0) работает нормально, а остальное - нет.

Может быть, часть

$("tfoot input")

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

Итак, как я могу получить эти запросы в столбце, связанные с их указанной таблицей? Какую часть я пропустил?

Приветствия, thowi

thowi 14 дек. 2013, в 19:43

Источник

Теги:

javascript

jquery

datatables

fnfilter

1 ответ

Ещё вопросы

charlietfl · Answer 1 · 2013-12-14T15-13-00.000Z

Всякий раз, когда вы хотите изолировать экземпляры, начинайте с элемента-предка, который изолирует только те элементы экземпляра, которые, я думаю, могут быть tfoot в вашем случае.

$("tfoot input").blur( function (i) {
    /* traverse up the document tree to ancestor needed*/
    var $parent=$(this).closest('tfoot');
    /* index only the inputs in current parent tfoot*/
    var index=$parent.find('input').index(this);
    /* more code*/
});

Если вам нужно было взаимодействовать с API dataTables... можете посмотреть на таблицу и сделать что-то вроде:

$parent.closest('table').datatables_API_method()

Привет чарли Спасибо за ваш быстрый ответ! Извините, я должен сказать, что я не очень знаком с JS, а также с API datatables. Поэтому у меня возникли проблемы с выполнением вашего совета и адаптацией моего кода, как вы и предлагали. Где я должен использовать новые переменные $ parent и index и как они влияют на часть $("tfoot input").each( function (i) { ?
Итак, после попытки вашего кода некоторое время я проверил с alert(index); как меняется индекс при нажатии на поля ввода. Я подумал, что мог бы добавить что-то вроде if ( this.value == "" && index == 1){ this.className = "search_init0" поэтому этот случай будет затронут только тогда, когда активен специальный индекс. Дело в том, что индекс изменяется при каждом щелчке окна одной таблицы. Поэтому я думаю, что мне нужно изменение индекса для каждой таблицы. Мои таблицы организованы вне javascript в html div - поэтому я не могу получить эти данные в javascript, верно? Любые другие мысли, что может помочь?
создать демо в jsfiddle.net. Можно использовать ресурсы CDN для плагина dataTables и CSS