2013-07-05 73 views
0

我想通過使用正則表達式過濾器通過Select2標記接口輸入的關鍵字/標記來過濾jquery DataTables表,所以我可以過濾OR或代替精確匹配。如何將Select2標記與DataTables正則表達式過濾結合使用?

我正在初始化DataTables的分隔符設置爲管道| (正則表達式OR),但它仍然在輸入的值屬性中用逗號分隔標籤。

jQuery('#programs-table').dataTable({ 
      "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
      "bPaginate": false, 
      "separator": "|" 
      }); 
jQuery("#program-filter-keyword").change(fnFilterGlobal); 

即使我手動更改搜索領域並不總是帶濾波或使用與像一個逗號兩個字標籤或標籤大多時候「保護,安全......」 - 我想我可以繞過'分隔符'選項不工作,因爲它應該通過使用替換輸入值來將逗號轉換爲管道,儘管這並不理想,因爲某些標籤有逗號,我還需要用它們的正則表達式對應部分替換空格和逗號+空格這行得通。

function fnFilterGlobal() { 
      jQuery('#programs-table').dataTable().fnFilter(
      jQuery("#program-filter-keyword").val().replace(',','|'), 
      null, 
      true, 
      true 
     );    
     } 

我看到它的方式,我有兩個選擇:

  1. 有誰知道正確的方式來設置此爲使用標籤從選擇2爲OR過濾器上的數據表

  2. 我是新的正則表達式 - 有沒有辦法將Select2輸入的值作爲標籤的輸入值轉換爲適當的正則表達式或包含帶空格/逗號的標籤的搜索?

這是CodePen(jsFiddle is down)的一個例子。 http://codepen.io/tsdexter/pen/GcnxA

謝謝。

回答

0

我已經想出了一種方法來做到這一點,到目前爲止,在我測試過的所有用例中都可以工作。

我基本上繞過了Select2傳遞給隱藏的輸入字段的值,因爲它由於'分隔符'選項而弄亂了逗號,而實際上並沒有改變標籤模式的分隔符(它只適用於多選輸入)。

這裏是過濾功能:

function fnFilterGlobal() {    
    var tags = []; 
    jQuery("#s2id_program-filter-keyword .select2-search-choice div").each(function() { 
     tags.push(jQuery(this).text()); 
    });    
    jQuery('#programs-table').dataTable().fnFilter(
     tags.join("|").replace(/ /g,"\\ "), null, true, false 
    );    
} 

我通過解析<ul>列表選擇二創建並從<div>內容提取的變量的值建立所選擇的標籤的陣列。

然後,對於實際的過濾器字符串,我用OR功能的管道符號加入了數組項,並用\(轉義空格)替換了所有空格。

最後,我設置了「智能過濾」選項false - 這是關鍵,否則將力圖把過濾字符串到我已經做了它一個逃脫的空間會導致無效的正則表達式的錯誤一個複雜的正則表達式。

我已經更新了CodePen,所以你可以看到如何具備多標籤或使用選擇二和數據表過濾表http://codepen.io/tsdexter/pen/GcnxA

相關問題