按不完整行排序

Question

在我的 table 中，这些行是这样的： 97.5%, 10/30, 41 转/分， 3.6秒， $4750, 100 美元

如果我在行中设置类型 data-type = "number"，除了数字之外的所有内容都会被删除，但我需要像我在示例中写的那样完全输出。

如何只按数值排序？我觉得可以通过JS实现，但是我不知道。关于第二行，我想在字符“/”之前按数字排序

jQuery(function($) {
  $('.table').footable();
});

body>table>thead>tr>th {
  text-transform: capitalize;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <table class="table" data-sorting="true">
    <thead>
      <tr>
        <th data-breakpoints="xs" data-type="number">rank</th>
        <th>weapon name</th>
        <th data-type="number">damage</th>
        <th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
        <th data-breakpoints="xs sm" data-type="number">magazine capacity</th>
        <th data-breakpoints="xs sm md" data-type="number">rate of fire</th>
        <th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
        <th data-breakpoints="xs sm md" data-type="number">price</th>
        <th data-breakpoints="xs sm md" data-type="number">reward</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>AWP</td>
        <td>115</td>
        <td>97.5%</td>
        <td>10/30</td>
        <td>41 RPM</td>
        <td>3.6 seconds</td>
        <td>50</td>
        <td>0</td>
      </tr>
      <tr>
        <td>2</td>
        <td>*SCAR-20</td>
        <td>80</td>
        <td>82.5%</td>
        <td>20/90</td>
        <td>240 RPM</td>
        <td>3.1 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>3</td>
        <td>*G3SG1</td>
        <td>80</td>
        <td>82.5%</td>
        <td>20/90</td>
        <td>240 RPM</td>
        <td>4.7 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>4</td>
        <td>*Negev</td>
        <td>35</td>
        <td>75%</td>
        <td>150/200</td>
        <td>1000 RPM</td>
        <td>5.7 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>5</td>
        <td>*M249</td>
        <td>32</td>
        <td>80%</td>
        <td>100/200</td>
        <td>750 RPM</td>
        <td>5.7 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>6</td>
        <td>*SG 553</td>
        <td>30</td>
        <td>100%</td>
        <td>30/90</td>
        <td>666 RPM</td>
        <td>2.8 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>7</td>
        <td>AK-47</td>
        <td>36</td>
        <td>77.5%</td>
        <td>30/90</td>
        <td>600 RPM</td>
        <td>2.5 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>8</td>
        <td>M4A4</td>
        <td>33</td>
        <td>70%</td>
        <td>30/90</td>
        <td>666 RPM</td>
        <td>3.1 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>9</td>
        <td>M4A1-S</td>
        <td>33</td>
        <td>70%</td>
        <td>20/40</td>
        <td>666 RPM</td>
        <td>3.1 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>10</td>
        <td>*AUG</td>
        <td>28</td>
        <td>90%</td>
        <td>30/90</td>
        <td>666 RPM</td>
        <td>3.8 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Galil AR</td>
        <td>30</td>
        <td>77.5%</td>
        <td>35/90</td>
        <td>666 RPM</td>
        <td>3.0 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Famas</td>
        <td>30</td>
        <td>70%</td>
        <td>25/90</td>
        <td>666 RPM</td>
        <td>3.3 seconds</td>
        <td>50</td>
        <td>0</td>
      </tr>
      <tr>
        <td>13</td>
        <td>^P90</td>
        <td>26</td>
        <td>69%</td>
        <td>50/100</td>
        <td>857 RPM</td>
        <td>3.3 seconds</td>
        <td>50</td>
        <td>0</td>
      </tr>
      <tr>
        <td>14</td>
        <td>SSG 08</td>
        <td>88</td>
        <td>85%</td>
        <td>10/90</td>
        <td>48 RPM</td>
        <td>3.7 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Mag-7</td>
        <td>240</td>
        <td>75%</td>
        <td>5/32</td>
        <td>71 RPM</td>
        <td>2.4 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>16</td>
        <td>UMP-45</td>
        <td>35</td>
        <td>65%</td>
        <td>25/100</td>
        <td>666 RPM</td>
        <td>3.5 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>17</td>
        <td>*XM1014</td>
        <td>120</td>
        <td>80%</td>
        <td>7/32</td>
        <td>240 RPM</td>
        <td>4.5 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>18</td>
        <td>*PP-Bizon</td>
        <td>27</td>
        <td>57.5%</td>
        <td>64/120</td>
        <td>750 RPM</td>
        <td>2.4 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>19</td>
        <td>*Nova</td>
        <td>243</td>
        <td>50%</td>
        <td>8/32</td>
        <td>68 RPM</td>
        <td>5.6 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>20</td>
        <td>*MP7</td>
        <td>29</td>
        <td>62.5%</td>
        <td>30/120</td>
        <td>800 RPM</td>
        <td>3.1 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
      <tr>
        <td>21</td>
        <td>*Mac 10</td>
        <td>29</td>
        <td>57.5%</td>
        <td>30/100</td>
        <td>800 RPM</td>
        <td>2.6 seconds</td>
        <td>50</td>
        <td>0</td>
      </tr>
      <tr>
        <td>22</td>
        <td>*MP9</td>
        <td>26</td>
        <td>60%</td>
        <td>30/120</td>
        <td>857 RPM</td>
        <td>2.1 seconds</td>
        <td>50</td>
        <td>0</td>
      </tr>
      <tr>
        <td>23</td>
        <td>*Sawed-Off</td>
        <td>256</td>
        <td>75%</td>
        <td>7/32</td>
        <td>71 RPM</td>
        <td>5.0 seconds</td>
        <td>00</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

如果上面的代码片段不起作用，请检查这个 ---> Footable Sorting

Answer 1

您可以使用 data-sort-value 数据属性手动设置排序值。

来自Footable Sorting Doc

Cell options

sortValue : The value used by the component to perform sorting operations. To supply this option through data attributes you must specify the attribute on the td element.

您可以通过在 td 中直接使用 data-sort-value 或使用 javascript

来实现此目的

1.静态示例

<table>
    <tr>
        <td data-sort-value="My Sort Value">...</td>
        ...
    </tr>
    ...
</table>

2。 Javascript 例子

jQuery(function($){
    $('.table').footable({
        "rows": [{
            "id": {
                "options": {
                    "sortValue": "My Sort Value"
                },
                "value": ...
            }
        },{
            ...
        }]
    });
})

以下是您的代码段的修改版本

jQuery(function($) {
  $('.table').footable();
});

body>table>thead>tr>th {
  text-transform: capitalize;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <table class="table" data-sorting="true">
    <thead>
      <tr>
        <th data-breakpoints="xs" data-type="number">rank</th>
        <th>weapon name</th>
        <th data-type="number">damage</th>
        <th data-breakpoints="xs" data-type="number" data-decimal-separator=".">armor pen</th>
        <th data-breakpoints="xs sm">magazine capacity</th>
        <th data-breakpoints="xs sm md">rate of fire</th>
        <th data-breakpoints="xs sm md" data-type="number" data-decimal-separator=".">reload time</th>
        <th data-breakpoints="xs sm md">price</th>
        <th data-breakpoints="xs sm md">reward</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>AWP</td>
        <td>115</td>
        <td data-sort-value="97.5">97.5%</td>
        <td data-sort-value="10">10/30</td>
        <td data-sort-value="41">41 RPM</td>
        <td data-sort-value="3.6">3.6 seconds</td>
        <td data-sort-value="4750">50</td>
        <td data-sort-value="100">0</td>
      </tr>
      <tr>
        <td>2</td>
        <td>*SCAR-20</td>
        <td>80</td>
        <td data-sort-value="82.5">82.5%</td>
        <td data-sort-value="20">20/90</td>
        <td data-sort-value="240">240 RPM</td>
        <td data-sort-value="3.1">3.1 seconds</td>
        <td data-sort-value="5000">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>3</td>
        <td>*G3SG1</td>
        <td>80</td>
        <td data-sort-value="82.5">82.5%</td>
        <td data-sort-value="20">20/90</td>
        <td data-sort-value="240">240 RPM</td>
        <td data-sort-value="4.7">4.7 seconds</td>
        <td data-sort-value="5000">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>4</td>
        <td>*Negev</td>
        <td>35</td>
        <td data-sort-value="75">75%</td>
        <td data-sort-value="150">150/200</td>
        <td data-sort-value="1000">1000 RPM</td>
        <td data-sort-value="5.7">5.7 seconds</td>
        <td data-sort-value="5700">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>5</td>
        <td>*M249</td>
        <td>32</td>
        <td data-sort-value="80">80%</td>
        <td data-sort-value="100">100/200</td>
        <td data-sort-value="750">750 RPM</td>
        <td data-sort-value="5.7">5.7 seconds</td>
        <td data-sort-value="5200">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>6</td>
        <td>*SG 553</td>
        <td>30</td>
        <td data-sort-value="100">100%</td>
        <td data-sort-value="30">30/90</td>
        <td data-sort-value="666">666 RPM</td>
        <td data-sort-value="2.8">2.8 seconds</td>
        <td data-sort-value="3000">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>7</td>
        <td>AK-47</td>
        <td>36</td>
        <td data-sort-value="77.5">77.5%</td>
        <td data-sort-value="30">30/90</td>
        <td data-sort-value="600">600 RPM</td>
        <td data-sort-value="2.5">2.5 seconds</td>
        <td data-sort-value="2700">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>8</td>
        <td>M4A4</td>
        <td>33</td>
        <td data-sort-value="70">70%</td>
        <td data-sort-value="30">30/90</td>
        <td data-sort-value="666">666 RPM</td>
        <td data-sort-value="3.1">3.1 seconds</td>
        <td data-sort-value="3100">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>9</td>
        <td>M4A1-S</td>
        <td>33</td>
        <td data-sort-value="70">70%</td>
        <td data-sort-value="20">20/40</td>
        <td data-sort-value="666">666 RPM</td>
        <td data-sort-value="3.1">3.1 seconds</td>
        <td data-sort-value="3200">00</td>
        <td data-sort-value="300">0</td>
      </tr>
      <tr>
        <td>10</td>
        <td>*AUG</td>
        <td>28</td>
        <td data-sort-value="90">90%</td>
        <td data-sort-value="30">30/90</td>
        <td data-sort-value="666">666 RPM</td>
        <td data-sort-value="3.8">3.8 seconds</td>
        <td data-sort-value="3300">00</td>
        <td data-sort-value="300">0</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

如果上面的代码片段不起作用，试试这个 ---> Sorting using Footable

按不完整行排序

Footable Sorting by incomplete line

javascript

html

twitter-bootstrap

twitter-bootstrap-3

footable