JQuery Datatables 1.10 функция поиска работает только один раз

Question

Я пытаюсь выполнить поиск по дате, когда пользователь нажимает кнопку поиска.

Если я нажму кнопку NY/London, таблица будет фильтроваться правильно. Если я сейчас нажму кнопку Сан-Франциско, в таблице не будет записей.

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

Вот код:

$(document).ready(function() { 
    var table = $('#example').DataTable(); 

    function filter_table(param1,param2){ 
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) { 
       if (data[2]==param1 || data[2]==param2){return true;} 
       return false; 
      } 
     ); 
    } 


    $("#ny_london").click(function(){ 
    filter_table('New York','London'); 
    table.draw(); 
    }); 


    $("#sf").click(function(){ 
    filter_table('San Francisco',null); 
    table.draw(); 
    }); 

}); 

Вот живая ссылка на таблицу и код.

http://live.datatables.net/tulavila/1/edit

Кто-нибудь есть какие-либо идеи, как сделать эту работу?

Answer 1

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

$(document).ready(function() { 
    var table = $('#example').DataTable(); 
    var param1, param2; 

    $.fn.dataTable.ext.search.push(
     function(settings, data, dataIndex) { 
      if (data[2]==param1 || data[2]==param2){return true;} 
      return false; 
     } 
); 

    $("#ny_london").click(function(){ 
    param1 = 'New York'; 
    param2 = 'London'; 
    table.draw(); 
    }); 

    $("#sf").click(function(){ 
    param1 = 'San Francisco'; 
    param2 = ''; 
    table.draw(); 
    }); 
});