在我的表中,这些行是以下形式: 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>$4750</td>
<td>$100</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>$5000</td>
<td>$300</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>$5000</td>
<td>$300</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>$5700</td>
<td>$300</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>$5200</td>
<td>$300</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>$3000</td>
<td>$300</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>$2700</td>
<td>$300</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>$3100</td>
<td>$300</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>$3200</td>
<td>$300</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>$3300</td>
<td>$300</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>$2000</td>
<td>$300</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>$2250</td>
<td>$300</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>$2350</td>
<td>$300</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>$1700</td>
<td>$300</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>$1800</td>
<td>$900</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>$1200</td>
<td>$600</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>$2000</td>
<td>$900</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>$1400</td>
<td>$600</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>$1200</td>
<td>$900</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>$1700</td>
<td>$600</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>$1050</td>
<td>$600</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>$1250</td>
<td>$600</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>$1200</td>
<td>$900</td>
</tr>
</tbody>
</table>
</body>
</html>
如果上面的代码段不起作用,请检查这个---&gt; Footable Sorting
答案 0 :(得分:0)
您可以使用background-image: url("file:///E:/Assignment Work/SWP/Assets/mobile assets/banner_bg.png");
数据属性手动设置排序值。
单元格选项
sortValue :组件使用的值 分拣作业。 要通过数据属性提供此选项,您必须指定 td元素的属性。
您可以通过在data-sort-value
内直接使用data-sort-value
来实现此目的,也可以使用javascript
<强> 1。静态示例
td
<强> 2。 Javascript示例
<table>
<tr>
<td data-sort-value="My Sort Value">...</td>
...
</tr>
...
</table>
以下是您的代码段的修改版本
jQuery(function($){
$('.table').footable({
"rows": [{
"id": {
"options": {
"sortValue": "My Sort Value"
},
"value": ...
}
},{
...
}]
});
})
jQuery(function($) {
$('.table').footable();
});
body>table>thead>tr>th {
text-transform: capitalize;
}
如果以上代码段不起作用试试这个---&gt; Sorting using Footable