Footable按不完整的行排序

时间:2017-03-07 02:10:55

标签: javascript html twitter-bootstrap twitter-bootstrap-3 footable

在我的表中,这些行是以下形式:                 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

1 个答案:

答案 0 :(得分:0)

您可以使用background-image: url("file:///E:/Assignment Work/SWP/Assets/mobile assets/banner_bg.png"); 数据属性手动设置排序值。

来自Footable Sorting Doc

  

单元格选项

     
    

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