2

In my table, the lines are form: 97.5%, 10/30, 41 RPM, 3.6 seconds, $4750, $100

If I set the type data-type = "number" in the rows everything is removed except for the numbers, but I need to be output completely as I wrote in the example.

How can I do what sorted by numeric values only? I think it can be realise through the JS, but I do not know it. Regarding the second line, I want to be sorted by numbers before the character "/" 

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>

If above snippet won't work check this ---> Footable Sorting

Prashant Pokhriyal
  • 3,727
  • 4
  • 28
  • 40
Pavel Fedorov
  • 153
  • 1
  • 2
  • 9

1 Answers1

1

You can use data-sort-value data attribute to manually set the value for sorting.

From 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.

You can achieve this by either directly using data-sort-value inside a td or you can use javascript

1. Static Example

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

2. Javascript Example

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

Below is the modified version of your snippet

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">$4750</td>
        <td data-sort-value="100">$100</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">$5000</td>
        <td data-sort-value="300">$300</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">$5000</td>
        <td data-sort-value="300">$300</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">$5700</td>
        <td data-sort-value="300">$300</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">$5200</td>
        <td data-sort-value="300">$300</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">$3000</td>
        <td data-sort-value="300">$300</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">$2700</td>
        <td data-sort-value="300">$300</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">$3100</td>
        <td data-sort-value="300">$300</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">$3200</td>
        <td data-sort-value="300">$300</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">$3300</td>
        <td data-sort-value="300">$300</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

If above snippet won't work, try this ---> Sorting using Footable

Prashant Pokhriyal
  • 3,727
  • 4
  • 28
  • 40
  • Thank you very much, I was reading the documentation, but did not understand how this works, but examples are not enough for me. ;) – Pavel Fedorov Mar 07 '17 at 13:04