2012-02-01 74 views
1

我想能夠使用tablesorter過濾器過濾一列姓氏。過濾器只應匹配從每個名稱的第一個字符開始。例如,假設您有以下三個名字:使用jQuery的tablesorter過濾器來過濾列的文本的開始

吉爾伯特

巴金斯

戈弗雷

如果過濾文本只是「G」,我只希望這樣的結果:

吉爾伯特

戈弗雷

並且不匹配Baggins中的任一個gs。


在研究了.tablesorterFilter的源代碼之後,我能夠弄清楚該怎麼做。

您需要創建一個傳遞3個參數的函數。第一個參數是HTML元素的內容。第二個參數是用戶輸入到過濾器容器中的單詞的字符串數組。第三個參數是區分大小寫的布爾值。您在.tablesorterFilter filterFunction中傳遞對此函數的引用。我只是複製並粘貼.tablesorterFilter的默認has_words函數並對其進行修改以提供我正在尋找的功能。我將它命名爲filterbyfirstcolumn,並將其引用作爲filterFunction。

下面是我的程序相應的代碼片段:

 function filterbyfirstcolumn(str, words, caseSensitive) { 
     var text = caseSensitive ? str : str.toLowerCase(); 

     var allwords = ""; 

     for (var i=0; i < words.length; i++) { 
      allwords += words[i]; 

      if (i != words.length - 1) 
       allwords += " "; 
     } 

     if (text.indexOf(allwords) != 0) 
      return false; 
     return true; 
    } 

    $("#tblSearchContacts") 
.tablesorter({debug: false, widgets: ["zebra"], 
       headers: { 
         0: { sorter: false }, 
         4: { sorter: false }, 
         5: { sorter: false }, 
         6: { sorter: false }, 
         7: { sorter: false }, 
         8: { sorter: false } 
         }, 
         sortList: [[1,0]]}) 
.tablesorterPager({ container: $("#pagerOne"), positionFixed: false, size : 20 }) 
.tablesorterFilter({filterContainer: $("#txtFilter"), 
        filterClearContainer: $("#btnClear"), 
        filterColumns: [3], 
        filterCaseSensitive: false, 
        filterFunction: filterbyfirstcolumn});` 

希望其他人可能會發現這很有用。使用類似的技術,你可以用過濾器做各種各樣的整潔的東西。

+0

我剛剛嘗試谷歌搜索解決方案,並沒有運氣。 filterFunction可能是我需要使用的,但我找不到任何真正解釋如何使用它的東西。我是新來的JavaScript和jQuery,所以我還不知道插件是如何編碼的。因此,檢查源代碼迄今尚未提供任何啓示。你會認爲這將是一個常見的請求和簡單的解決方案,但是...也許我只是沒有找到正確的位置。 :( – Mark 2012-02-01 20:41:53

+0

請嘗試[documentation](http://tablesorter.com/docs/index.html#Examples) – Andrew 2012-02-01 20:54:36

回答

0

我在github上有一個tablesorter插件的分支。我最近更新了我的filter widget以包含一個名爲filter_startsWith的選項,該選項可以在單元格中的任意位置查找字母/數字,僅在開頭處進行切換。

不幸的是,在這個時候,過濾器小部件不能很好地處理傳呼機插件,所以如果你需要它們,這個解決方案可能不適合你。