Jquery Tablesorter:过滤多列

时间:2015-12-06 20:01:17

标签: 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,它会将第3列到第5列以及第6列到第7列作为2组进行搜索,但是将第1,2,9和10列保留为自己的搜索。

例如,如果我将4646放入Blue1列,它也会搜索Blue2和Blue3。

现在我正在使用以下javscript:

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

1 个答案:

答案 0 :(得分: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'升级,'d'升序和'n'分机设置。