Bootstrap - как сортировать строки таблицы [закрыто]
может кто-то пожалуйста, покажите мне пример кода, который я должен использовать для сортировки столбца таблицы в Bootstrap. Например, если я хочу Сортировать по цене или по имени.
1 ответ:
есть несколько плагинов, если вы посмотрите: bootstrap-сортируемый или DataTables.
Bootstrap 3 DataTables Пример: Bootstrap Docs & DataTables Docs
$(document).ready(function() { $('#example').DataTable(); });<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/><div class="container"> <h1>Bootstrap 3 DataTables</h1> <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Salary</th> </tr></thead> <tbody> <tr> <td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>0,800</td></tr><tr> <td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>0,750</td></tr><tr> <td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>,000</td></tr><tr> <td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>3,060</td></tr><tr> <td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>2,700</td></tr><tr> <td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>2,000</td></tr><tr> <td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>7,500</td></tr><tr> <td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>7,900</td></tr><tr> <td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>5,500</td></tr><tr> <td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>3,600</td></tr><tr> <td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>,560</td></tr><tr> <td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>2,000</td></tr><tr> <td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>0,600</td></tr><tr> <td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>3,500</td></tr><tr> <td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>5,750</td></tr><tr> <td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>8,500</td></tr><tr> <td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>5,000</td></tr><tr> <td>Gloria Little</td><td>Systems Administrator</td><td>New York</td><td>7,500</td></tr><tr> <td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>2,000</td></tr><tr> <td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>7,500</td></tr><tr> <td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>5,000</td></tr><tr> <td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>5,000</td></tr><tr> <td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>6,450</td></tr><tr> <td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>,600</td></tr><tr> <td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>,200,000</td></tr><tr> <td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>,575</td></tr><tr> <td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td><td>7,650</td></tr><tr> <td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>6,850</td></tr><tr> <td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td>0,000</td></tr><tr> <td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td><td>3,000</td></tr><tr> <td>Michelle House</td><td>Integration Specialist</td><td>Sidney</td><td>,400</td></tr><tr> <td>Suki Burks</td><td>Developer</td><td>London</td><td>4,500</td></tr><tr> <td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>5,000</td></tr><tr> <td>Gavin Cortez</td><td>Team Leader</td><td>San Francisco</td><td>5,500</td></tr><tr> <td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>4,050</td></tr><tr> <td>Unity Butler</td><td>Marketing Designer</td><td>San Francisco</td><td>,675</td></tr><tr> <td>Howard Hatfield</td><td>Office Manager</td><td>San Francisco</td><td>4,500</td></tr><tr> <td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td><td>9,850</td></tr><tr> <td>Vivian Harrell</td><td>Financial Controller</td><td>San Francisco</td><td>2,500</td></tr><tr> <td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>6,200</td></tr><tr> <td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>5,750</td></tr><tr> <td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td><td>4,500</td></tr><tr> <td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>3,500</td></tr><tr> <td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td><td>9,575</td></tr><tr> <td>Thor Walton</td><td>Developer</td><td>New York</td><td>,540</td></tr><tr> <td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td><td>,500</td></tr><tr> <td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>8,575</td></tr><tr> <td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td><td>5,250</td></tr><tr> <td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td><td>5,000</td></tr><tr> <td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>,650</td></tr><tr> <td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>5,600</td></tr><tr> <td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>6,250</td></tr><tr> <td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>3,500</td></tr><tr> <td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>,500</td></tr><tr> <td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>3,000</td></tr><tr> <td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>3,000</td></tr><tr> <td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>2,000</td></tr></tbody> </table></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>Bootstrap 4 DataTables Пример: Bootstrap Docs & Таблицы данных Документы
$(document).ready(function() { $('#example').DataTable(); });<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap4.min.css" rel="stylesheet"/><div class="container"> <h1>Bootstrap 4 DataTables</h1> <table id="example" class="table table-striped table-inverse table-bordered table-hover" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr></thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr></tfoot> <tbody> <tr> <td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>0,800</td></tr><tr> <td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>0,750</td></tr><tr> <td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td><td>,000</td></tr><tr> <td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td><td>3,060</td></tr><tr> <td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>2,700</td></tr><tr> <td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td><td>2,000</td></tr><tr> <td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><td>2012/08/06</td><td>7,500</td></tr><tr> <td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><td>2010/10/14</td><td>7,900</td></tr><tr> <td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>39</td><td>2009/09/15</td><td>5,500</td></tr><tr> <td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>2008/12/13</td><td>3,600</td></tr><tr> <td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>30</td><td>2008/12/19</td><td>,560</td></tr><tr> <td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><td>2013/03/03</td><td>2,000</td></tr><tr> <td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>36</td><td>2008/10/16</td><td>0,600</td></tr><tr> <td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><td>2012/12/18</td><td>3,500</td></tr><tr> <td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>2010/03/17</td><td>5,750</td></tr><tr> <td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><td>2012/11/27</td><td>8,500</td></tr><tr> <td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>64</td><td>2010/06/09</td><td>5,000</td></tr><tr> <td>Gloria Little</td><td>Systems Administrator</td><td>New York</td><td>59</td><td>2009/04/10</td><td>7,500</td></tr><tr> <td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td><td>2,000</td></tr><tr> <td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>2012/09/26</td><td>7,500</td></tr><tr> <td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>30</td><td>2011/09/03</td><td>5,000</td></tr><tr> <td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>40</td><td>2009/06/25</td><td>5,000</td></tr><tr> <td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td><td>6,450</td></tr><tr> <td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>23</td><td>2010/09/20</td><td>,600</td></tr><tr> <td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td><td>,200,000</td></tr><tr> <td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>42</td><td>2010/12/22</td><td>,575</td></tr><tr> <td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td><td>28</td><td>2010/11/14</td><td>7,650</td></tr><tr> <td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td><td>6,850</td></tr><tr> <td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td>48</td><td>2010/03/11</td><td>0,000</td></tr><tr> <td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td><td>20</td><td>2011/08/14</td><td>3,000</td></tr><tr> <td>Michelle House</td><td>Integration Specialist</td><td>Sidney</td><td>37</td><td>2011/06/02</td><td>,400</td></tr><tr> <td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>2009/10/22</td><td>4,500</td></tr><tr> <td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>27</td><td>2011/05/07</td><td>5,000</td></tr><tr> <td>Gavin Cortez</td><td>Team Leader</td><td>San Francisco</td><td>22</td><td>2008/10/26</td><td>5,500</td></tr><tr> <td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>46</td><td>2011/03/09</td><td>4,050</td></tr><tr> <td>Unity Butler</td><td>Marketing Designer</td><td>San Francisco</td><td>47</td><td>2009/12/09</td><td>,675</td></tr><tr> <td>Howard Hatfield</td><td>Office Manager</td><td>San Francisco</td><td>51</td><td>2008/12/16</td><td>4,500</td></tr><tr> <td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td><td>41</td><td>2010/02/12</td><td>9,850</td></tr><tr> <td>Vivian Harrell</td><td>Financial Controller</td><td>San Francisco</td><td>62</td><td>2009/02/14</td><td>2,500</td></tr><tr> <td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>37</td><td>2008/12/11</td><td>6,200</td></tr><tr> <td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>65</td><td>2008/09/26</td><td>5,750</td></tr><tr> <td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td><td>64</td><td>2011/02/03</td><td>4,500</td></tr><tr> <td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td><td>3,500</td></tr><tr> <td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td><td>37</td><td>2009/08/19</td><td>9,575</td></tr><tr> <td>Thor Walton</td><td>Developer</td><td>New York</td><td>61</td><td>2013/08/11</td><td>,540</td></tr><tr> <td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td><td>47</td><td>2009/07/07</td><td>,500</td></tr><tr> <td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>64</td><td>2012/04/09</td><td>8,575</td></tr><tr> <td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td><td>63</td><td>2010/01/04</td><td>5,250</td></tr><tr> <td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td><td>56</td><td>2012/06/01</td><td>5,000</td></tr><tr> <td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>43</td><td>2013/02/01</td><td>,650</td></tr><tr> <td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td><td>5,600</td></tr><tr> <td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>47</td><td>2011/03/21</td><td>6,250</td></tr><tr> <td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>2009/02/27</td><td>3,500</td></tr><tr> <td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>,500</td></tr><tr> <td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>2008/11/13</td><td>3,000</td></tr><tr> <td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>29</td><td>2011/06/27</td><td>3,000</td></tr><tr> <td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>27</td><td>2011/01/25</td><td>2,000</td></tr></tbody> </table></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>обновление: есть Bootstrap Table
Bootstrap 3 Пример с Bootstrap Table
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet"/><table data-toggle="table" data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1" data-sort-name="stargazers_count" data-sort-order="desc"> <thead> <tr> <th data-field="name" data-sortable="true"> Name </th> <th data-field="stargazers_count" data-sortable="true"> Stars </th> <th data-field="forks_count" data-sortable="true"> Forks </th> <th data-field="description" data-sortable="true"> Description </th> </tr></thead></table><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>Bootstrap Сортируемый Пример:
function randomDate(a,b){return new Date(a.getTime()+Math.random()*(b.getTime()-a.getTime()))}function randomName(){var a=["Jack","Peter","Frank","Steven"],b=["White","Jackson","Sinatra","Spielberg"];return a[Math.floor(4*Math.random())]+" "+b[Math.floor(4*Math.random())]}function newTableRow(){var a=moment(randomDate(new Date(2e3,0,1),new Date)).format("D.M.YYYY"),b=Math.round(Math.random()*Math.random()*100*100)/100,c=Math.round(Math.random()*Math.random()*100*100)/100,d=Math.round(Math.random()*Math.random()*100*100)/100;return"<tr><td>"+randomName()+"</td><td>"+b+"</td><td>"+c+"</td><td>"+d+"</td><td>"+Math.round(100*(b+c+d))/100+"</td><td data-dateformat='D-M-YYYY'>"+a+"</td></tr>"}function customSort(){alert("Custom sort.")}!function(a,b){"use strict";function c(){return b}"function"==typeof define&&define.amd?define("tinysort",c):a.tinysort=b}(this,function(){"use strict";function a(a,f){function j(){0===arguments.length?s({}):d(arguments,function(a){s(c(a)?{selector:a}:a)}),p=D.length}function s(a){var b=!!a.selector,c=b&&":"===a.selector[0],d=e(a||{},r);D.push(e({hasSelector:b,hasAttr:!(d.attr===i||""===d.attr),hasData:d.data!==i,hasFilter:c,sortReturnNumber:"asc"===d.order?1:-1},d))}function t(){d(a,function(a,b){y?y!==a.parentNode&&(E=!1):y=a.parentNode;var c=D[0],d=c.hasFilter,e=c.selector,f=!e||d&&a.matchesSelector(e)||e&&a.querySelector(e),g=f?B:C,h={elm:a,pos:b,posn:g.length};A.push(h),g.push(h)}),x=B.slice(0)}function u(){B.sort(v)}function v(a,e){var f=0;for(0!==q&&(q=0);0===f&&p>q;){var i=D[q],j=i.ignoreDashes?n:m;if(d(o,function(a){var b=a.prepare;b&&b(i)}),i.sortFunction)f=i.sortFunction(a,e);else if("rand"==i.order)f=Math.random()<.5?1:-1;else{var k=h,r=b(a,i),s=b(e,i),t=""===r||r===g,u=""===s||s===g;if(r===s)f=0;else if(i.emptyEnd&&(t||u))f=t&&u?0:t?1:-1;else{if(!i.forceStrings){var v=c(r)?r&&r.match(j):h,w=c(s)?s&&s.match(j):h;if(v&&w){var x=r.substr(0,r.length-v[0].length),y=s.substr(0,s.length-w[0].length);x==y&&(k=!h,r=l(v[0]),s=l(w[0]))}}f=r===g||s===g?0:s>r?-1:r>s?1:0}}d(o,function(a){var b=a.sort;b&&(f=b(i,k,r,s,f))}),f*=i.sortReturnNumber,0===f&&q++}return 0===f&&(f=a.pos>e.pos?1:-1),f}function w(){var a=B.length===A.length;E&&a?F?B.forEach(function(a,b){a.elm.style.order=b}):(B.forEach(function(a){z.appendChild(a.elm)}),y.appendChild(z)):(B.forEach(function(a){var b=a.elm,c=k.createElement("div");a.ghost=c,b.parentNode.insertBefore(c,b)}),B.forEach(function(a,b){var c=x[b].ghost;c.parentNode.insertBefore(a.elm,c),c.parentNode.removeChild(c)}))}c(a)&&(a=k.querySelectorAll(a)),0===a.length&&console.warn("No elements to sort");var x,y,z=k.createDocumentFragment(),A=[],B=[],C=[],D=[],E=!0,F=a.length&&(f===g||f.useFlex!==!1)&&-1!==getComputedStyle(a[0].parentNode,null).display.indexOf("flex");return j.apply(i,Array.prototype.slice.call(arguments,1)),t(),u(),w(),B.map(function(a){return a.elm})}function b(a,b){var d,e=a.elm;return b.selector&&(b.hasFilter?e.matchesSelector(b.selector)||(e=i):e=e.querySelector(b.selector)),b.hasAttr?d=e.getAttribute(b.attr):b.useVal?d=e.value||e.getAttribute("value"):b.hasData?d=e.getAttribute("data-"+b.data):e&&(d=e.textContent),c(d)&&(b.cases||(d=d.toLowerCase()),d=d.replace(/\s+/g," ")),d}function c(a){return"string"==typeof a}function d(a,b){for(var c,d=a.length,e=d;e--;)c=d-e-1,b(a[c],c)}function e(a,b,c){for(var d in b)(c||a[d]===g)&&(a[d]=b[d]);return a}function f(a,b,c){o.push({prepare:a,sort:b,sortBy:c})}var g,h=!1,i=null,j=window,k=j.document,l=parseFloat,m=/(-?\d+\.?\d*)\s*$/g,n=/(\d+\.?\d*)\s*$/g,o=[],p=0,q=0,r={selector:i,order:"asc",attr:i,data:i,useVal:h,place:"start",returns:h,cases:h,forceStrings:h,ignoreDashes:h,sortFunction:i,useFlex:h,emptyEnd:h};return j.Element&&function(a){a.matchesSelector=a.matchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector||a.webkitMatchesSelector||function(a){for(var b=this,c=(b.parentNode||b.document).querySelectorAll(a),d=-1;c[++d]&&c[d]!=b;);return!!c[d]}}(Element.prototype),e(f,{loop:d}),e(a,{plugin:f,defaults:r})}()),function(a){function b(b){var c=b.data("bootstrap-sortable-context");return void 0===c&&(c={bsSort:[],lastSort:void 0},b.find('thead th[data-defaultsort!="disabled"]').each(function(b){var d=a(this),e=d.attr("data-sortkey");c.bsSort[e]=d.attr("data-defaultsort"),void 0!==c.bsSort[e]&&(c.lastSort=e)}),b.data("bootstrap-sortable-context",c)),c}function c(a,b){tinysort(a,b)}function d(c,g){var h=parseFloat(c.attr("data-sortcolumn")),i=b(g),j=i.bsSort,k=c.attr("colspan");if(k){var l=parseFloat(c.data("mainsort"))||0,m=parseFloat(c.data("sortkey").split("-").pop());if(g.find("thead tr").length-1>m)return void d(g.find('[data-sortkey="'+(h+l)+"-"+(m+1)+'"]'),g);h+=l}var n=c.attr("data-defaultsign")||e;if(g.find("th").each(function(){a(this).removeClass("up").removeClass("down").addClass("nosort")}),a.browser.mozilla){var o=g.find("div.mozilla");void 0!==o&&(o.find(".sign").remove(),o.parent().html(o.html())),c.wrapInner('<div class="mozilla"></div>'),c.children().eq(0).append('<span class="sign '+n+'"></span>')}else g.find("span.sign").remove(),c.append('<span class="sign '+n+'"></span>');var p=c.attr("data-sortkey"),q="desc"!==c.attr("data-firstsort")?"desc":"asc";i.lastSort=p,j[p]="asc"===(j[p]||q)?"desc":"asc","desc"===j[p]?(c.find("span.sign").addClass("up"),c.addClass("up").removeClass("down nosort")):c.addClass("down").removeClass("up nosort");var r=g.children("tbody").children("tr");f(r,{selector:"td:nth-child("+(h+1)+")",order:j[p],data:"value"}),g.find("td.sorted, th.sorted").removeClass("sorted"),r.find("td:eq("+h+")").addClass("sorted"),c.addClass("sorted")}var e,f,g=a(document);if(a.bootstrapSortable=function(g,h,i){var j="undefined"!=typeof moment;e=h?h:"arrow","default"==i&&(i=c),f=i||f||c,a("table.sortable").each(function(){var c=a(this);g=g===!0,c.find("span.sign").remove(),c.find("thead [colspan]").each(function(){for(var b=parseFloat(a(this).attr("colspan")),c=1;c<b;c++)a(this).after('<th class="colspan-compensate">')}),c.find("thead [rowspan]").each(function(){for(var b=a(this),c=parseFloat(b.attr("rowspan")),d=1;d<c;d++){var e=b.parent("tr"),f=e.next("tr"),g=e.children().index(b);f.children().eq(g).before('<th class="rowspan-compensate">')}}),c.find("thead tr").each(function(b){a(this).find("th").each(function(c){var d=a(this);d.addClass("nosort").removeClass("up down"),d.attr("data-sortcolumn",c),d.attr("data-sortkey",c+"-"+b)})}),c.find("thead .rowspan-compensate, .colspan-compensate").remove(),c.find("td").each(function(){var b=a(this);void 0!==b.attr("data-dateformat")&&j?b.attr("data-value",moment(b.text(),b.attr("data-dateformat")).format("YYYY/MM/DD/HH/mm/ss")):void 0===b.attr("data-value")&&b.attr("data-value",b.text())});var e=b(c),f=e.bsSort;c.find('thead th[data-defaultsort!="disabled"]').each(function(b){var c=a(this),h=c.closest("table.sortable");c.data("sortTable",h);var i=c.attr("data-sortkey"),j=g?e.lastSort:-1;f[i]=g?f[i]:c.attr("data-defaultsort"),void 0!==f[i]&&g===(i===j)&&(f[i]="asc"===f[i]?"desc":"asc",d(c,h))}),c.trigger("sorted")})},g.on("click",'table.sortable thead th[data-defaultsort!="disabled"]',function(b){var c=a(this),e=c.data("sortTable")||c.closest("table.sortable");e.trigger("before-sort"),d(c,e),e.trigger("sorted")}),!a.browser){a.browser={chrome:!1,mozilla:!1,opera:!1,msie:!1,safari:!1};var h=navigator.userAgent;a.each(a.browser,function(b){a.browser[b]=!!new RegExp(b,"i").test(h),a.browser.mozilla&&"mozilla"===b&&(a.browser.mozilla=!!new RegExp("firefox","i").test(h)),a.browser.chrome&&"safari"===b&&(a.browser.safari=!1)})}a(a.bootstrapSortable)}(jQuery),function(){var a=$("table");a.append(newTableRow()),a.append(newTableRow()),$("button.add-row").on("click",function(){var b=$(this);a.append(newTableRow()),b.data("sort")?$.bootstrapSortable(!0):$.bootstrapSortable(!1)}),$("button.change-sort").on("click",function(){var a=$(this);a.data("custom")?$.bootstrapSortable(!0,void 0,customSort):$.bootstrapSortable(!0,void 0,"default")}),a.on("sorted",function(){alert("Table was sorted.")}),$("#event").on("change",function(){var b=$(this);b.is(":checked")?a.on("sorted",function(){alert("Table was sorted.")}):a.off("sorted")}),$("input[name=sign]:radio").change(function(){$.bootstrapSortable(!0,$(this).val())})}();table.sortable span.sign,table.sortable th:after{display:block;position:absolute;top:50%;right:5px;font-size:12px;margin-top:-10px;color:#bfbfc1}table.sortable th.arrow:after{content:''}span.reversed,table.sortable span.arrow,th.arrow.down:after,th.arrow.up:after,th.reversedarrow.down:after,th.reversedarrow.up:after{border-style:solid;border-width:5px;font-size:0;border-color:#ccc transparent transparent;line-height:0;height:0;width:0;margin-top:-2px}table.sortable span.arrow.up,table.sortable span.reversed,th.arrow.up:after,th.reversedarrow.down:after{border-color:transparent transparent #ccc;margin-top:-7px}table.sortable span.reversed.up,th.reversedarrow.up:after{border-color:#ccc transparent transparent;margin-top:-2px}table.sortable span.az:before,th.az.down:after{content:"a .. z"}table.sortable span.az.up:before,th.az.up:after{content:"z .. a"}table.sortable th.az.nosort:after,th.AZ.nosort:after,th._19.nosort:after,th.month.nosort:after{content:".."}table.sortable span.AZ:before,th.AZ.down:after{content:"A .. Z"}table.sortable span.AZ.up:before,th.AZ.up:after{content:"Z .. A"}table.sortable span._19:before,th._19.down:after{content:"1 .. 9"}table.sortable span._19.up:before,th._19.up:after{content:"9 .. 1"}table.sortable span.month:before,th.month.down:after{content:"jan .. dec"}table.sortable span.month.up:before,th.month.up:after{content:"dec .. jan"}table.sortable thead th:not([data-defaultsort=disabled]){cursor:pointer;position:relative;top:0;left:0}table.sortable thead th:hover:not([data-defaultsort=disabled]){background:#efefef}table.sortable thead th div.mozilla{position:relative}span.groupbox{position:absolute;display:block;margin-top:-30px;margin-left:-5px;padding-left:5px;padding-right:5px;background-color:#f5f5f5}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class='container'> <div class='hero-unit'> <h1>Bootstrap Sortable</h1> </div><table class='table table-bordered table-striped sortable'> <thead> <tr> <th style="width: 20%; vertical-align: middle;" rowspan="2" class='az' data-defaultsign="nospan" data-defaultsort="asc"><i class="fa fa-map-marker fa-fw"></i>Name</th> <th colspan="4" data-mainsort="3" style="text-align: center;">Results</th> <th data-defaultsort="disabled"></th> </tr><tr> <th style="width: 20%" colspan="2" data-mainsort="1" data-firstsort="desc">Round 1</th> <th style="width: 20%">Round 2</th> <th style="width: 20%">Total</th> <th style="width: 20%" data-defaultsign="month">Date</th> </tr></thead> <tbody> </tbody> </table> <table class='table table-bordered table-striped sortable'> <thead> <tr> <th style="width: 20%; vertical-align: middle;" rowspan="2" class='az' data-defaultsign="nospan" data-defaultsort="asc"><i class="fa fa-map-marker fa-fw"></i>Name</th> <th colspan="4" data-mainsort="3" style="text-align: center;">Results</th> <th data-defaultsort="disabled"></th> </tr><tr> <th style="width: 20%" colspan="2" data-mainsort="1" data-firstsort="desc">Round 1</th> <th style="width: 20%">Round 2</th> <th style="width: 20%">Total</th> <th style="width: 20%" data-defaultsign="month">Date</th> </tr></thead> <tbody> </tbody> </table> <div class='well'> <button type='button' class='btn btn-primary add-row' data-sort="true">Add Row (use last sort)</button> <button type='button' class='btn btn-primary add-row'>Add Row (use default sort)</button> </div><div class='well'> <button type='button' class='btn btn-primary change-sort' data-custom="true">Set custom sorting</button> <button type='button' class='btn btn-primary change-sort'>Reset built-in sorting</button> </div><div class="well"> <span class="groupbox">Options</span> <div class="well" style="margin-top: 10px"> <span class="groupbox">Event</span> <div class="checkbox"> <label> <input type="checkbox" checked="checked" id="event"/>Hook on 'sorted' event </label> </div></div><div class="well"> <span class="groupbox">Sorting sign</span> <div class="radio"> <label> <input type="radio" name="sign" id="default" value="" checked>Default (points towards larger value) </label> </div><div class="radio"> <label> <input type="radio" name="sign" id="reversed" value="reversed">Reversed (points towards smaller value) </label> </div><div class="radio"> <label> <input type="radio" name="sign" id="az" value="az">a..z </label> </div><div class="radio"> <label> <input type="radio" name="sign" id="AZ" value="AZ">A..Z </label> </div><div class="radio"> <label> <input type="radio" name="sign" id="19" value="_19">1..9 </label> </div><div class="radio"> <label> <input type="radio" name="sign" id="month" value="month">jan..dec </label> </div></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>