2015-12-06 405 views
1

我正在尋找一種使用jquery.tablesorter篩選器部件來搜索多個列的方法。Jquery Tablesorter:多列篩選器

考慮以下表:

<table id="match-table" class="table table-striped limit-height tablesorter"> 
    <thead> 
    <tr> 
     <th>Match</th> 
     <th>Matchtime</th> 
     <th>Red1</th> 
     <th>Red2</th> 
     <th>Red3</th> 
     <th>Blue1</th> 
     <th>Blue2</th> 
     <th>Blue3</th> 
     <th>Blue Score</th> 
     <th>Red Score</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr data-row-number="1"> 
      <td>1</td> 
      <td>09:00</td> 
      <td>1710</td> 
      <td>2357</td> 
      <td>937</td> 
      <td>1939</td> 
      <td>1764</td> 
      <td>1775</td> 
      <td>3</td> 
      <td>56</td> 
     </tr> 
     <tr data-row-number="2"> 
      <td>2</td> 
      <td>09:10</td> 
      <td>1827</td> 
      <td>2353</td> 
      <td>5013</td> 
      <td>2346</td> 
      <td>5268</td> 
      <td>5476</td> 
      <td>21</td> 
      <td>27</td> 
     </tr> 
     <tr data-row-number="3"> 
      <td>3</td> 
      <td>09:20</td> 
      <td>5126</td> 
      <td>2457</td> 
      <td>1847</td> 
      <td>5141</td> 
      <td>4809</td> 
      <td>5119</td> 
      <td>0</td> 
      <td>40</td> 
     </tr> 
     <tr data-row-number="4"> 
      <td>4</td> 
      <td>09:30</td> 
      <td>2874</td> 
      <td>4522</td> 
      <td>1810</td> 
      <td>5098</td> 
      <td>1984</td> 
      <td>3792</td> 
      <td>6</td> 
      <td>64</td> 
     </tr> 
     <tr data-row-number="5"> 
      <td>5</td> 
      <td>09:40</td> 
      <td>1777</td> 
      <td>1806</td> 
      <td>2410</td> 
      <td>2167</td> 
      <td>3485</td> 
      <td>3528</td> 
      <td>0</td> 
      <td>62</td> 
     </tr> 
     <tr data-row-number="6"> 
      <td>6</td> 
      <td>09:50</td> 
      <td>1730</td> 
      <td>5082</td> 
      <td>4455</td> 
      <td>1763</td> 
      <td>1825</td> 
      <td>1769</td> 
      <td>57</td> 
      <td>90</td> 
     </tr> 
     <tr data-row-number="7"> 
      <td>7</td> 
      <td>10:00</td> 
      <td>1785</td> 
      <td>1329</td> 
      <td>2335</td> 
      <td>1997</td> 
      <td>4646</td> 
      <td>2001</td> 
      <td>8</td> 
      <td>56</td> 
     </tr> 
     <tr data-row-number="8"> 
      <td>8</td> 
      <td>10:10</td> 
      <td>2164</td> 
      <td>1987</td> 
      <td>1288</td> 
      <td>4959</td> 
      <td>1737</td> 
      <td>2345</td> 
      <td>0</td> 
      <td>32</td> 
     </tr> 
     <tr data-row-number="9"> 
      <td>9</td> 
      <td>10:20</td> 
      <td>1994</td> 
      <td>1723</td> 
      <td>1982</td> 
      <td>1802</td> 
      <td>2560</td> 
      <td>938</td> 
      <td>15</td> 
      <td>8</td> 
     </tr> 
     <tr data-row-number="10"> 
      <td>10</td> 
      <td>10:30</td> 
      <td>1710</td> 
      <td>1810</td> 
      <td>1775</td> 
      <td>4522</td> 
      <td>5126</td> 
      <td>5141</td> 
      <td>52</td> 
      <td>16</td> 
     </tr> 
     <tr data-row-number="11"> 
      <td>11</td> 
      <td>10:40</td> 
      <td>4809</td> 
      <td>1984</td> 
      <td>5268</td> 
      <td>4455</td> 
      <td>1939</td> 
      <td>2410</td> 
      <td>61</td> 
      <td>34</td> 
     </tr> 
     <tr data-row-number="12"> 
      <td>12</td> 
      <td>10:50</td> 
      <td>2346</td> 
      <td>3528</td> 
      <td>1329</td> 
      <td>5082</td> 
      <td>1825</td> 
      <td>2335</td> 
      <td>20</td> 
      <td>33</td> 
     </tr> 
     <tr data-row-number="13"> 
      <td>13</td> 
      <td>11:00</td> 
      <td>1730</td> 
      <td>2167</td> 
      <td>1764</td> 
      <td>1847</td> 
      <td>4959</td> 
      <td>2353</td> 
      <td>9</td> 
      <td>96</td> 
     </tr> 
     <tr data-row-number="14"> 
      <td>14</td> 
      <td>11:10</td> 
      <td>5098</td> 
      <td>2345</td> 
      <td>2001</td> 
      <td>4646</td> 
      <td>938</td> 
      <td>1806</td> 
      <td>73</td> 
      <td>14</td> 
     </tr> 
     <tr data-row-number="15"> 
      <td>15</td> 
      <td>11:20</td> 
      <td>1737</td> 
      <td>3485</td> 
      <td>1785</td> 
      <td>5476</td> 
      <td>1763</td> 
      <td>2357</td> 
      <td>62</td> 
      <td>78</td> 
     </tr> 
     <tr data-row-number="16"> 
      <td>16</td> 
      <td>11:30</td> 
      <td>2560</td> 
      <td>1288</td> 
      <td>2457</td> 
      <td>2874</td> 
      <td>1802</td> 
      <td>937</td> 
      <td>4</td> 
      <td>54</td> 
     </tr> 
     <tr data-row-number="17"> 
      <td>17</td> 
      <td>11:40</td> 
      <td>1982</td> 
      <td>1997</td> 
      <td>2164</td> 
      <td>1777</td> 
      <td>1994</td> 
      <td>1769</td> 
      <td>8</td> 
      <td>12</td> 
     </tr> 
     <tr data-row-number="18"> 
      <td>18</td> 
      <td>11:50</td> 
      <td>5119</td> 
      <td>3792</td> 
      <td>5013</td> 
      <td>1723</td> 
      <td>1827</td> 
      <td>1987</td> 
      <td>47</td> 
      <td>27</td> 
     </tr> 
     <tr data-row-number="19"> 
      <td>19</td> 
      <td>12:00</td> 
      <td>2345</td> 
      <td>2353</td> 
      <td>1806</td> 
      <td>2335</td> 
      <td>4809</td> 
      <td>4522</td> 
      <td>52</td> 
      <td>12</td> 
     </tr> 
     <tr data-row-number="20"> 
      <td>20</td> 
      <td>12:10</td> 
      <td>5126</td> 
      <td>938</td> 
      <td>4959</td> 
      <td>2357</td> 
      <td>1984</td> 
      <td>1737</td> 
      <td>20</td> 
      <td>40</td> 
     </tr> 
     <tr data-row-number="21"> 
      <td>21</td> 
      <td>12:20</td> 
      <td>2001</td> 
      <td>5268</td> 
      <td>1730</td> 
      <td>5098</td> 
      <td>1764</td> 
      <td>2457</td> 
      <td>48</td> 
      <td>80</td> 
     </tr> 
     <tr data-row-number="22"> 
      <td>22</td> 
      <td>12:30</td> 
      <td>3485</td> 
      <td>5141</td> 
      <td>1763</td> 
      <td>1994</td> 
      <td>1939</td> 
      <td>1288</td> 
      <td>31</td> 
      <td>5</td> 
     </tr> 
     <tr data-row-number="23"> 
      <td>23</td> 
      <td>12:40</td> 
      <td>1329</td> 
      <td>1723</td> 
      <td>1825</td> 
      <td>5476</td> 
      <td>1847</td> 
      <td>1769</td> 
      <td>4</td> 
      <td>78</td> 
     </tr> 
     <tr data-row-number="24"> 
      <td>24</td> 
      <td>12:50</td> 
      <td>4646</td> 
      <td>3792</td> 
      <td>1802</td> 
      <td>5082</td> 
      <td>1710</td> 
      <td>2164</td> 
      <td>37</td> 
      <td>32</td> 
     </tr> 
     <tr data-row-number="25"> 
      <td>25</td> 
      <td>13:00</td> 
      <td>1827</td> 
      <td>1982</td> 
      <td>2346</td> 
      <td>2410</td> 
      <td>1810</td> 
      <td>937</td> 
      <td>30</td> 
      <td>9</td> 
     </tr> 
     <tr data-row-number="26"> 
      <td>26</td> 
      <td>13:10</td> 
      <td>1777</td> 
      <td>5013</td> 
      <td>1987</td> 
      <td>2560</td> 
      <td>1785</td> 
      <td>1775</td> 
      <td>79</td> 
      <td>50</td> 
     </tr> 
     <tr data-row-number="27"> 
      <td>27</td> 
      <td>13:20</td> 
      <td>1997</td> 
      <td>2167</td> 
      <td>2874</td> 
      <td>4455</td> 
      <td>5119</td> 
      <td>3528</td> 
      <td>8</td> 
      <td>23</td> 
     </tr> 
     <tr data-row-number="28"> 
      <td>28</td> 
      <td>13:30</td> 
      <td>2335</td> 
      <td>1939</td> 
      <td>5268</td> 
      <td>1288</td> 
      <td>1723</td> 
      <td>1847</td> 
      <td>52</td> 
      <td>26</td> 
     </tr> 
     <tr data-row-number="29"> 
      <td>29</td> 
      <td>13:40</td> 
      <td>3485</td> 
      <td>5476</td> 
      <td>1984</td> 
      <td>1710</td> 
      <td>1769</td> 
      <td>2001</td> 
      <td>13</td> 
      <td>18</td> 
     </tr> 
     <tr data-row-number="30"> 
      <td>30</td> 
      <td>13:50</td> 
      <td>1737</td> 
      <td>5126</td> 
      <td>3792</td> 
      <td>1730</td> 
      <td>1806</td> 
      <td>1329</td> 
      <td>186</td> 
      <td>60</td> 
     </tr> 
     <tr data-row-number="31"> 
      <td>31</td> 
      <td>14:00</td> 
      <td>4809</td> 
      <td>1987</td> 
      <td>5082</td> 
      <td>5098</td> 
      <td>1810</td> 
      <td>938</td> 
      <td>27</td> 
      <td>21</td> 
     </tr> 
     <tr data-row-number="32"> 
      <td>32</td> 
      <td>14:10</td> 
      <td>4455</td> 
      <td>4959</td> 
      <td>1764</td> 
      <td>1785</td> 
      <td>1802</td> 
      <td>1982</td> 
      <td>48</td> 
      <td>44</td> 
     </tr> 
     <tr data-row-number="33"> 
      <td>33</td> 
      <td>14:20</td> 
      <td>5013</td> 
      <td>4522</td> 
      <td>2164</td> 
      <td>3528</td> 
      <td>937</td> 
      <td>1997</td> 
      <td>51</td> 
      <td>124</td> 
     </tr> 
     <tr data-row-number="34"> 
      <td>34</td> 
      <td>14:30</td> 
      <td>1763</td> 
      <td>1827</td> 
      <td>2560</td> 
      <td>5141</td> 
      <td>2167</td> 
      <td>2345</td> 
      <td>0</td> 
      <td>14</td> 
     </tr> 
     <tr data-row-number="35"> 
      <td>35</td> 
      <td>14:40</td> 
      <td>2410</td> 
      <td>1775</td> 
      <td>2353</td> 
      <td>2874</td> 
      <td>2457</td> 
      <td>1825</td> 
      <td>43</td> 
      <td>51</td> 
     </tr> 
     <tr data-row-number="36"> 
      <td>36</td> 
      <td>14:50</td> 
      <td>1994</td> 
      <td>2346</td> 
      <td>2357</td> 
      <td>4646</td> 
      <td>1777</td> 
      <td>5119</td> 
      <td>55</td> 
      <td>29</td> 
     </tr> 
     <tr data-row-number="37"> 
      <td>37</td> 
      <td>15:00</td> 
      <td>1288</td> 
      <td>4455</td> 
      <td>1984</td> 
      <td>1730</td> 
      <td>5476</td> 
      <td>1987</td> 
      <td>8</td> 
      <td>50</td> 
     </tr> 
     <tr data-row-number="38"> 
      <td>38</td> 
      <td>15:10</td> 
      <td>1802</td> 
      <td>1764</td> 
      <td>2001</td> 
      <td>5013</td> 
      <td>5126</td> 
      <td>4809</td> 
      <td></td> 
      <td>9</td> 
     </tr> 
     <tr data-row-number="39"> 
      <td>39</td> 
      <td>15:20</td> 
      <td>1810</td> 
      <td>5141</td> 
      <td>1769</td> 
      <td>4959</td> 
      <td>1806</td> 
      <td>3528</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="40"> 
      <td>40</td> 
      <td>15:30</td> 
      <td>1997</td> 
      <td>938</td> 
      <td>1827</td> 
      <td>1825</td> 
      <td>1939</td> 
      <td>2560</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="41"> 
      <td>41</td> 
      <td>15:40</td> 
      <td>2345</td> 
      <td>4646</td> 
      <td>1785</td> 
      <td>2410</td> 
      <td>3792</td> 
      <td>2457</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="42"> 
      <td>42</td> 
      <td>15:50</td> 
      <td>2353</td> 
      <td>1994</td> 
      <td>1737</td> 
      <td>5082</td> 
      <td>937</td> 
      <td>1723</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="43"> 
      <td>43</td> 
      <td>16:00</td> 
      <td>5268</td> 
      <td>2874</td> 
      <td>1710</td> 
      <td>1329</td> 
      <td>1763</td> 
      <td>1777</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="44"> 
      <td>44</td> 
      <td>16:10</td> 
      <td>5119</td> 
      <td>2335</td> 
      <td>3485</td> 
      <td>4522</td> 
      <td>2167</td> 
      <td>1982</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="45"> 
      <td>45</td> 
      <td>16:20</td> 
      <td>2357</td> 
      <td>1775</td> 
      <td>5098</td> 
      <td>2346</td> 
      <td>1847</td> 
      <td>2164</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="46"> 
      <td>46</td> 
      <td>16:30</td> 
      <td>1288</td> 
      <td>1825</td> 
      <td>3528</td> 
      <td>4809</td> 
      <td>2001</td> 
      <td>3792</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="47"> 
      <td>47</td> 
      <td>16:40</td> 
      <td>5476</td> 
      <td>2457</td> 
      <td>1806</td> 
      <td>4959</td> 
      <td>5082</td> 
      <td>1997</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="48"> 
      <td>48</td> 
      <td>16:50</td> 
      <td>1763</td> 
      <td>1810</td> 
      <td>2345</td> 
      <td>1777</td> 
      <td>1723</td> 
      <td>1764</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="49"> 
      <td>49</td> 
      <td>17:00</td> 
      <td>1710</td> 
      <td>4646</td> 
      <td>5126</td> 
      <td>5268</td> 
      <td>4455</td> 
      <td>2560</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr data-row-number="50"> 
      <td>50</td> 
      <td>17:10</td> 
      <td>2353</td> 
      <td>2346</td> 
      <td>5119</td> 
      <td>5141</td> 
      <td>2164</td> 
      <td>1984</td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

我想,這樣,優選地使用BUIT函數,它將通過圖5和6搜索列3至7,爲2組,但留下,2欄1, 9和10作爲自己的搜索。

例如,如果我將4646放入Blue1列中,它也會搜索Blue2和Blue3。

現在我用下面javscript:

$('#match-table').tablesorter({ 
    theme: 'bootstrap', 
    headerTemplate: '{content} {icon}', 
    widgets: ['filter'] 
}); 

回答

0

嘗試sortAppend option。在最近的版本中,您可以添加額外的列,具體取決於排序的列。例如:

$('#match-table').tablesorter({ 
    theme: 'bootstrap', 
    sortAppend: { 
     3 : [[ 4,'s' ], [ 5,'s' ]], // group columns 3-5 
     4 : [[ 3,'s' ], [ 5,'s' ]], // ('s'ame direction) 
     5 : [[ 3,'s' ], [ 4,'s' ]], 

     6 : [[ 7,'o' ]], // group columns 6-7 
     7 : [[ 6,'o' ]] // ('o'pposite direction) 
    }, 
    headerTemplate: '{content} {icon}', 
    widgets: ['filter'] 
}); 

sortAppend也接受'a' scending,'d' escending和'n'分機設置。