如何对表格行进行排序

如何对表格行进行排序

关注
发信
关注(28)粉丝(399)

Bootstrap - 如何对表格行进行排序

本文介绍了Bootstrap - 如何对表格行进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 有人可以给我看一个代码示例，我将不得不使用这些代码对bootstrap中的一列表进行排序。例如，如果我想按价格或按名称排序。解决方案如果您看起来有多个插件： bootstrap-sortable 或 DataTables 。 Bootstrap 3 DataTables示例： Bootstrap Docs & DataTables Docs < link href =https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7 / css / bootstrap.min.cssrel =stylesheet/>< link href =https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables。 bootstrap.min.cssrel =stylesheet/>< div class =container> < h1> Bootstrap 3 DataTables< / h1> < table id =exampleclass =table table-striped table-bordered table-hovercellspacing =0width =100％> < THEAD> < TR> <的第i;姓名< /第> <的第i;位置< /第> <的第i;办公和LT; /第> <的第i;薪酬和LT; /第> < / TR>< / THEAD> < TBODY> < TR> < td>>< td>< td>系统架构< / td>< td>爱丁堡< / td>< td> < td>< td>会计< / td>< td>东京< / td>< td> $ 170,750< / td>< / tr>< tr> < td>< td> Junior Technical Author< td>< td>旧金山< / td>< td> $ 86,000< / td>< / tr>< tr> < td> Cedric Kelly< / td>< td>高级Javascript开发人员< / td>< td>爱丁堡< / td>< td>< td> < td>< td>会计< / td>< td>东京< / td>< td> $ 162,700< / td>< / tr>< tr> < td>< td>< td>整合专家< / td>< td>纽约< / td>< td> 372,000< / td>< / tr>< tr> < td> Herrod Chandler< / td>< td>< td> Sales Assistant< / td>< td>旧金山< / td>< td> $ 137,500< / td>< / tr>< tr> < td> Rhona Davidson< / td>< td>< td>整合专家< / td>< td>东京< / td>< td>< td> < td> Colleen Hurst< / td>< td> Javascript开发者< / td>< td>旧金山< / td>< td> 205,500< / td>< / tr>< tr> < td" Sonya Frost< / td>< td>< td>< td>< td>爱丁堡< / td>< td>< < td>< td>< td>< td>< td>< td>< td>伦敦< / td>< td> " Quinn Flynn< / td>< td> Support Lead< / td>< td> Edinburgh< / td>< td> 342,000< / td>< / tr>< tr> < TD>尚德马歇尔< / TD>< TD>区域总监< / TD>< TD>旧金山< / TD>< TD> $四七零六零零< / TD>< / TR>< TR> < td>< td> Haley Kennedy< td>< td>高级营销设计师< / td>< td>伦敦< / td>< td>< td> < TD>塔季帕特里克< / TD>< TD>区域主任< / TD>< TD>伦敦< / TD>< TD> $三十八万五千七百五十〇< / TD>< / TR>< TR> < td>> Michael Silva< td>< td> Marketing Designer< / td>< td>伦敦< / td>< td>< td> < td> Paul Byrd< / td>< td>首席财务官（CFO）< / td>< td>纽约< / td>< td> $ 725,000< / td>< / tr> < TR> < td>系统管理员< / td>< td>< td>纽约< / td>< td> $ 237,500< / td>< / tr>< tr> < td>< td>< td>< td>< td>伦敦< / td>< td>< td>< td> < td>< td>戴尔里奥斯< / td>< td>人事主管< / td>< td>爱丁堡< / td>< td>< < td>< td> Development Development< / td>< td>纽约< / td>< td> $ 345,000< / td>< / tr>< tr> < td> Yuri Berry< / td>< td>首席营销官（CMO）< / td>< td>纽约< / tr>< td> < TR> < TD>凯撒万斯< / TD>< TD>售前支持< / TD>< TD>纽约< / TD>< TD> $ 106450< / TD>< / TR>< TR> ; < td>< td> Doris Wilder< / td>< td> Sales Assistant< / td>< td>悉尼< / td>< td>< / tr>首席执行官（CEO）< / td>< td>伦敦< / td>< td> 1,200,000美元< / td>< / tr>< td< td>< td>< ; TR> < td>< td> Developer< / td>< td>爱丁堡< / td>< td>< td>< td>< < td>< td>区域总监< / td>< td>新加坡< / td>< td>< td> < td>< td>< td>< td>< td>< td>< td>旧金山< / td>< td>首席运营官（COO）< / td>< td>旧金山< / td>< td> 850,000美元< / td>< / tr>< td> < TR> < td>东京< / td>< td>< td>东京< / td>< td>< td>< td> < td>< td>整合专家< / td>< td> sidney< / td>< td>< td>< td>< td>< < td>开发者< / td>< td>伦敦< / td>< td> 114,500< / td>< / tr>< tr> < td>< td>技术作者< / td>< td>伦敦< / td>< td> 145,000< / td>< / tr>< tr> < td> Gavin Cortez< / td>< td> Team Leader< / td>< td>旧金山< / td>< td> < td>< td>< td>售后支持< / td>< td>爱丁堡< / td>< td>< td> < td> Unity Butler< / td>< td> Marketing Designer< / td>< td>旧金山< / td>< td>< td> < td>< td> Office Manager< / td>< td>旧金山< / td>< td> 164,500< / td>< / tr>< tr> < td> Hope Fuentes< / td>< td>秘书< / td>< td>旧金山< / td>< td> $ 109,850< / td>< / tr>< tr> < td>< td> Vivian Harrell< / td>< td> Financial Controller< / td>< td>旧金山< / td>< td> 452,500< / td>< < td>> Timothy Mooney< / td>< td>< td> Office Manager< / td>< td>伦敦< / td>< td> Jackson Bradshaw< td>< td> Director< / td>< td>纽约< / td>< td>< / tr>< tr> < td>< td>< td> Support Engineer< / td>< td>新加坡< / td>< td> 234,500< / td>< < td>< td>< td>< td>>< td>< td>伦敦< / td>< td> < td>东京< / td>< td> $ 139,575< / td>< / tr>< tr>< td> < td>开发者< / td>< td>纽约< / td>< td> $ 98,540< / td>< / tr>< tr> < td> Finn Camacho< / td>< td>< td>支持工程师< / td>< td>旧金山< / td>< td>< td> < td> Serge Baldwin< / td>< td>数据协调员< / td>< td>新加坡< / td>< td> < td>< td>< td>< td>< td>< td>>< td>< td>纽约< / td>< td>< td> < td>< td>< td>< td>< td>< td>旧金山< / td>< td>< < td> Jennifer Acosta< / td>< td> Junior Javascript Developer< / td>< td> Edinburgh< / td>< td>< td> < td> Cara Stevens< / td>< td>< td> Sales Assistant< / td>< td>纽约< / td>< td> 145,600< / td>< / tr>< tr> < td>< td>>< td>< td>< td>伦敦< / td>< td>< td>< td> < td>系统管理员< / td>< td>伦敦< / td>< td> 103,500< / td>< / tr>< tr> < td>< td> Developer< / td>< td>旧金山< / td>< td> $ 86,500< / td>< / tr>< tr> < td> Shad Decker< / td>< td>区域负责人< / td>< td>爱丁堡< / td>< td> 183,000< / td>< / tr>< tr> < td>< td>< td>>< td>>< td>< td>新加坡< / td>< td>< td>< td> < td>< td>< td>< td>< 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> $ b Bootstrap 4 DataTables示例： Bootstrap Docs & DataTables Docs < link href =https://maxcdn.bootstrapcdn.com/bootstrap/ 4.0.0-alpha.5 / css / bootstrap.min.cssrel =stylesheet/>< link href =https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/ css / dataTables.bootstrap4.min.cssrel =stylesheet/>< div class =container> < h1> Bootstrap 4 DataTables< / h1> < table id =exampleclass =table table-striped table-inverse table-bordered table-hovercellspacing =0width =100％> < THEAD> < TR> <的第i;姓名< /第> <的第i;位置< /第> <的第i;办公和LT; /第> <的第i;年龄< /第> < th>开始日期< / th> <的第i;薪酬和LT; /第> < / TR>< / THEAD> < TFOOT> < TR> <的第i;姓名< /第> <的第i;位置< /第> <的第i;办公和LT; /第> <的第i;年龄< /第> < th>开始日期< / th> <的第i;薪酬和LT; /第> < / TR>< / TFOOT> < TBODY> < TR> < TD>虎尼克松< / TD>< TD>系统架构< / TD>< TD>爱丁堡< / TD>< TD> 61℃; / TD>< TD> 2011/04/25℃; / TD> ;< TD> $三十二万○八百< / TD>< / TR>< TR> < td>>< td>< td>会计< / td>< td>东京< / td>< td> 63< / td>< td> 2011/07 / < TD> $十七万〇七百五十< / TD>< / TR>< TR> < td>< td>< td>< td>< td>< td>< td>>< td>>< td> / TD>< TD> $ 86,000< / TD>< / TR>< TR> < TD>塞德里克凯利< / TD>< TD>高级JavaScript开发< / TD>< TD>爱丁堡< / TD>< TD> 22℃; / TD>< TD> 2012/03/29 LT; / TD>< TD> $四十三万三千零六十〇< / TD>< / TR>< TR> < td>< td>< td>会计< / td>< td>东京< / td>< td> 33< / td>< td> 2008/11/28< / td> < TD> $一十六万二千七百< / TD>< / TR>< TR> Brielle Williamson< td>整合专家< / td>< td> New York< td>< td> 61< / td>< TD>< TD> $ 372,000< / TD>< / TR>< TR>销售助理< / td>< td>旧金山< / td>< td> 59< / td>< td> 2012/08/06< / td> TD>< TD> $ 137,500< / TD>< / TR>< TR> < TD>罗纳戴维森< / TD>< TD>集成专家< / TD>< TD>东京< / TD>< TD> 55℃; / TD>< TD> 2011/10/14 LT; / TD> ;< TD> $三十二万七千九< / TD>< / TR>< TR> < td> Colleen Hurst< td>< td> Javascript开发人员< / td>< td>旧金山< / td>< td> 39< / td>< TD>< TD> $二十零万五千五< / TD>< / TR>< TR> < td>>< td>< td>< td>< td>< td>爱丁堡< / td>< / td> ;< TD> $ 103,600< / TD>< / TR>< TR> < td> Jena Gaines< / td>< td>< td>< td>< td>伦敦< / td>< td> ;< TD> $九万○五百六十○< / TD>< / TR>< TR> " Quinn Flynn< td>< td>< td> Support< / td>< td>爱丁堡< / td>< td> 22< / td>< td> 2013/03/03< / td> ;< TD> $ 342,000< / TD>< / TR>< TR> Charde Marshall< td>< td>< td>< td>< td>区域总监< td>< TD>< TD> $ 47.06万< / TD>< / TR>< TR> Haley Kennedy< td>< td>< td>< td>< td>< td>< td> London< td>< TD>< TD> $三十一万三千五< / TD>< / TR>< TR> < td>< td>< td>< td>< td>伦敦< / td>< td>< td>< td> ;< TD> $三十八万五千七百五十○< / TD>< / TR>< TR> < td> Michael Silva< td>< td>营销设计师< / td>< td>伦敦< / td>< td> 66< / td>< td> 2012/11 / ;< TD> $十九万八千五< / TD>< / TR>< TR> < td> Paul Byrd< / td>< td>首席财务官（CFO）< / td>< td>纽约< / td>< td> 6月9日和LT; / TD>< TD> $ 725,000< / TD>< / TR>< TR> < td>系统管理员< / td>< td> New York< td>< td> 59< / td>< TD>< TD> $二十三万七千五百< / TD>< / TR>< TR> < TD>布拉德利葛莱< / TD>< TD>软件工程师< / TD>< TD>伦敦< / TD>< TD> 41< / TD>< TD>十分之二千零十二/ 13 LT; / TD> ;< TD> $ 132,000< / TD>< / TR>< TR> < td>< td>< td>>< td>>< td>>< td>> Edinburgh< / td>< td> ;< TD> $二一七五零零< / TD>< / TR>< TR>纽约州< / td>< td> 30< / td>< td> 2011/09/03< / dd> TD>< TD> $ 345,000< / TD>< / TR>< TR>首席营销官（CMO）< / td>< td>纽约< / td>< td> 40< / td>< td> 2009 / 6月25日< / TD>< TD> $ 675,000< / TD>< / TR>< TR> < td>>< td> 21< / td>< td> 2011/12/12< td>< td> ; / TD>< TD> $一〇六四五〇< / TD>< / TR>< TR> < TD>多丽丝怀德< / TD>< TD>销售助理< / TD>< TD>悉尼< / TD>< TD> 23℃; / TD>< TD> 2010/09/20℃; / TD> ;< TD> $ 8.56万< / TD>< / TR>< TR>首席执行官（CEO）< / td>< td>伦敦< / td>< td> 47< / td>< td> 2009/10< td> / 09< / TD>< TD> $ 1,200,000< / TD>< / TR>< TR> < td>< td>< td>< td>< td>< td>开发者< / td>< td>爱丁堡< / td> < TD> $九二五七五< / TD>< / TR>< TR> < TD>珍昌< / TD>< TD>区域主任< / TD>< TD>新加坡< / TD>< TD> 28和60; / TD>< TD> 2011/11/14 LT; / TD> ;< TD> $三五七六五〇< / TD>< / TR>< TR> < / bd>< td>< td>< td>< td>< td> 2011/06/07< TD>< TD> $二十万六千八百五十○< / TD>< / TR>< TR>首席运营官（COO）< / td>< td>旧金山< / td>< td> 48< / td>< td> 2010 / 3月11日< / TD>< TD> $ 850,000< / TD>< / TR>< TR> < td>< td>< td>< td>< td> 2011/08/14< / td>>< td> Tokyo Marketing< td> ;< TD> $ 163,000名专业< / TD>< / TR>< TR> < td>>< td>< td>< td>整合专家< / td>< td>悉尼< / td>< td> ;< TD> $ 9.54万< / TD>< / TR>< TR> < td>开发人员< / td>< td>伦敦< / td>< td> 53< / td>< td> 2009/10/22< / td> < TD> $ 114,500< / TD>< / TR>< TR> < TD>普雷斯科特巴特利特< / TD>< TD>技术作者< / TD>< TD>伦敦< / TD>< TD> 27< / TD>< TD> 2011/5月7日和LT; / TD> ;< TD> $ 145,000< / TD>< / TR>< TR> < td>>< td>< td>< td> 22< td>< td> 2008/10/26< TD>< TD> $ 235500< / TD>< / TR>< TR>售价支持< td>< td>爱丁堡< / td>< td> 46< / td>< td> 2011/03/09< / TD>< TD> $三二四○五○< / TD>< / TR>< TR> < td>>< td>< td> 47< td>< td> 2009/12/09< TD>< TD> $ 85675< / TD>< / TR>< TR> < td> Howard Hatfield< / td>< td> Office Manager< / td>< td>旧金山< / td>< TD>< TD> $ 164,500< / TD>< / TR>< TR> < td> Hope Fuentes< / td>< td>秘书< / td>< td>旧金山< / td>< td> 41< / td>< td> 2010/02/12< / td> ;< TD> $一〇九八五〇< / TD>< / TR>< TR> < td> Vivian Harrell< td>< td> Financial Controller< / td>< td>旧金山< / td>< td> 62< / td>< TD>< TD> $四十五万二千五< / TD>< / TR>< TR> < td> Timothy Mooney< td>< td>>< td>< td>伦敦< / td>< td> 37< / td> ;< TD> $一十三万六千二百< / TD>< / TR>< TR> Jackson Bradshaw< td>< td> Director< / td>< td> New York< / td>< td> 65< / td>< td> 2008/09/26< / td> ;< TD> $六四五七五〇< / TD>< / TR>< TR> < TD>奥利维亚梁< / TD>< TD>支持工程师< / TD>< TD>新加坡< / TD>< TD> 64< / TD>< TD> 2011/02/03< / TD> ;< TD> $ 234500< / TD>< / TR>< TR> < td> Bruno Nash< td>< td>< td>< td>伦敦< / td>< td> 38< / td>< td> 2011/05/03< / td> ;< TD> $十六万三千五百< / TD>< / TR>< TR> < td>< td>< td>< td>< td>东京< / td>< td> 2009&08 / ;< TD> $ 139575< / TD>< / TR>< TR> < td>< td>< td>< td>< td> 2013/08/11< td>< td> ;< TD> $九万八千五百四十○< / TD>< / TR>< TR> < td>< td>< td>< td>< td>< td>< td& TD>< TD> $ 87,500< / TD>< / TR>< TR> < td> Serge Baldwin< td>< td>数据协调员< / td>< td>新加坡< / td> 64< / td>< td> 2012/04/09< / td> ;< TD> $一十三万八千五百七十五< / TD>< / TR>< TR> < td>< td>< td>< td>< td>< td>< td>< td>>>< TD>< TD> $十二万五千二百五十零< / TD>< / TR>< TR> < td>< td> Zorita Serrano< td>< td>< td>< td>< td>< td> TD>< TD> $ 115,000< / TD>< / TR>< TR> < TD>珍阿科斯塔< / TD>< TD>小型JavaScript开发< / TD>< TD>爱丁堡< / TD>< TD> 43< / TD>< TD> 2013/02/01 LT; / TD>< TD> $ 75650< / TD>< / TR>< TR>销售助理< td>< td>纽约< / td>< td> 46< / td>< td> 2011/12/06< TD>< TD> $一四五六〇〇< / TD>< / TR>< TR> Hermione Butler< td>< td>< td>< td>< td>伦敦< / td>< td> 47< / td>< td> 2011/03/21< / td> ;< TD> $三十五万六千二百五十〇< / TD>< / TR>< TR> < td>系统管理员< / td>< td>伦敦< td>< td> 21< / td>< td> 2009/02/27< / td> ;< TD> $十万三千五百< / TD>< / TR>< TR> < td> Developer< / td>< td>旧金山< / td>< td> 30< / td>< td> 2010/07/14< / td> ;< TD> $ 86,500< / TD>< / TR>< TR> < td> Shad Decker< / dd>< td>区域负责人< / td>< td>爱丁堡< / td>< td> 51< / td>< td> ;< TD> $ 183,000< / TD>< / TR>< TR> < td>迈克尔布鲁斯< / td>< td> Javascript开发者< / td>< td>新加坡< / td>< td> 29< / td>< td> 2011/06 / ;< TD> $ 183,000< / TD>< / TR>< TR> < td>>< td>< td> 27< / td>< td> 2011/01/25< td> TD>< TD> $ 112,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> cn />引导程序表 引导程序3引导程序表示例 < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/ css / bootstrap.min.cssrel =stylesheet/>< link href =https://cdnjs.cloudflare.com/ajax/libs/boo tstrap-table / 1.11.0 / bootstrap-table.min.cssrel =stylesheet/>< table data-toggle =tabledata-url =https://api.github.com/users / wenzhixin / repos？type = owner& sort = full_name& direction = asc& per_page = 100& page = 1data-sort-name =stargazers_countdata-sort-order =desc> < THEAD> < TR> < th data-field =namedata-sortable =true>名称< / th> < th data-field =stargazers_countdata-sortable =true>星星< / th> < th data-field =forks_countdata-sortable =true>叉子< / th> < th data-field =descriptiondata-sortable =true>描述< / th> < / the gt>< / 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> $ b $ p Bootstrap Sortable示例： $ / $> $ / $> $ / $> b $ b 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（DMYYYY），b = Math.round（Math.random （）*的Math.random（）* 100 * 100）/ 100，C = M ath.round（的Math.random（）*的Math.random（）* 100 * 100）/100,d=Math.round（的Math.random（）*的Math.random（）* 100 * 100）/ 100;返回 < 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 ='DM-YYYY' >+ a +< / td>< / tr>} function customSort（）{alert（Custom sort。）}！function（a，b）{use strict; function c（）{返回b}​​function== typeof define&& define.amd？define（tinysort，c）：a.tinysort = b}（this，function（）{use strict; function a（a，f ）{函数j（）{0 === arguments.length？s（{}）：d（arguments，function（a）{s（c（a）？{selector：a}：a）}），p = D.length}函数s（a）{var b = !! a.selector，c = b&&：=== a.selector [0]，d = e（a || {}，r） ; D.push（E（{hasSelector：b，hasAttr：（d.attr ===我|| === d.attr），hasData：d.data == I，hasFilter：C，sortReturnNumber！ ：asc=== d.order？1：-1}，d））}函数t（）{d（a，函数（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）中，克= F B：C，H = {榆树：一，POS：乙，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。如果（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（）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.rever sed,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:h over: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 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的> < /表> <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> Can someone please show me an example of code that I would have to use to sort a column of a table in bootstrap. For example, if I want to sort by price, or by name. 解决方案 There are multiple plugins if you look: bootstrap-sortable or DataTables.Bootstrap 3 DataTables Example: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>$320,800</td></tr><tr> <td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>$170,750</td></tr><tr> <td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>$86,000</td></tr><tr> <td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>$433,060</td></tr><tr> <td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>$162,700</td></tr><tr> <td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>$372,000</td></tr><tr> <td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>$137,500</td></tr><tr> <td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>$327,900</td></tr><tr> <td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>$205,500</td></tr><tr> <td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>$103,600</td></tr><tr> <td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>$90,560</td></tr><tr> <td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>$342,000</td></tr><tr> <td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>$470,600</td></tr><tr> <td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>$313,500</td></tr><tr> <td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>$385,750</td></tr><tr> <td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>$198,500</td></tr><tr> <td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>$725,000</td></tr><tr> <td>Gloria Little</td><td>Systems Administrator</td><td>New York</td><td>$237,500</td></tr><tr> <td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>$132,000</td></tr><tr> <td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>$217,500</td></tr><tr> <td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>$345,000</td></tr><tr> <td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>$675,000</td></tr><tr> <td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>$106,450</td></tr><tr> <td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>$85,600</td></tr><tr> <td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>$1,200,000</td></tr><tr> <td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>$92,575</td></tr><tr> <td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td><td>$357,650</td></tr><tr> <td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>$206,850</td></tr><tr> <td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td>$850,000</td></tr><tr> <td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td><td>$163,000</td></tr><tr> <td>Michelle House</td><td>Integration Specialist</td><td>Sidney</td><td>$95,400</td></tr><tr> <td>Suki Burks</td><td>Developer</td><td>London</td><td>$114,500</td></tr><tr> <td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>$145,000</td></tr><tr> <td>Gavin Cortez</td><td>Team Leader</td><td>San Francisco</td><td>$235,500</td></tr><tr> <td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>$324,050</td></tr><tr> <td>Unity Butler</td><td>Marketing Designer</td><td>San Francisco</td><td>$85,675</td></tr><tr> <td>Howard Hatfield</td><td>Office Manager</td><td>San Francisco</td><td>$164,500</td></tr><tr> <td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td><td>$109,850</td></tr><tr> <td>Vivian Harrell</td><td>Financial Controller</td><td>San Francisco</td><td>$452,500</td></tr><tr> <td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>$136,200</td></tr><tr> <td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>$645,750</td></tr><tr> <td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td><td>$234,500</td></tr><tr> <td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>$163,500</td></tr><tr> <td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td><td>$139,575</td></tr><tr> <td>Thor Walton</td><td>Developer</td><td>New York</td><td>$98,540</td></tr><tr> <td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td><td>$87,500</td></tr><tr> <td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>$138,575</td></tr><tr> <td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td><td>$125,250</td></tr><tr> <td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td><td>$115,000</td></tr><tr> <td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>$75,650</td></tr><tr> <td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>$145,600</td></tr><tr> <td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>$356,250</td></tr><tr> <td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>$103,500</td></tr><tr> <td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>$86,500</td></tr><tr> <td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>$183,000</td></tr><tr> <td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>$183,000</td></tr><tr> <td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>$112,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 Example:Bootstrap Docs & DataTables 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>$320,800</td></tr><tr> <td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,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>$86,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>$433,060</td></tr><tr> <td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>$162,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>$372,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>$137,500</td></tr><tr> <td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><td>2010/10/14</td><td>$327,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>$205,500</td></tr><tr> <td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>2008/12/13</td><td>$103,600</td></tr><tr> <td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>30</td><td>2008/12/19</td><td>$90,560</td></tr><tr> <td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><td>2013/03/03</td><td>$342,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>$470,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>$313,500</td></tr><tr> <td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>2010/03/17</td><td>$385,750</td></tr><tr> <td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><td>2012/11/27</td><td>$198,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>$725,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>$237,500</td></tr><tr> <td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td><td>$132,000</td></tr><tr> <td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>2012/09/26</td><td>$217,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>$345,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>$675,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>$106,450</td></tr><tr> <td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>23</td><td>2010/09/20</td><td>$85,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>$1,200,000</td></tr><tr> <td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>42</td><td>2010/12/22</td><td>$92,575</td></tr><tr> <td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td><td>28</td><td>2010/11/14</td><td>$357,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>$206,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>$850,000</td></tr><tr> <td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td><td>20</td><td>2011/08/14</td><td>$163,000</td></tr><tr> <td>Michelle House</td><td>Integration Specialist</td><td>Sidney</td><td>37</td><td>2011/06/02</td><td>$95,400</td></tr><tr> <td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>2009/10/22</td><td>$114,500</td></tr><tr> <td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>27</td><td>2011/05/07</td><td>$145,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>$235,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>$324,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>$85,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>$164,500</td></tr><tr> <td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td><td>41</td><td>2010/02/12</td><td>$109,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>$452,500</td></tr><tr> <td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>37</td><td>2008/12/11</td><td>$136,200</td></tr><tr> <td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>65</td><td>2008/09/26</td><td>$645,750</td></tr><tr> <td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td><td>64</td><td>2011/02/03</td><td>$234,500</td></tr><tr> <td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td><td>$163,500</td></tr><tr> <td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td><td>37</td><td>2009/08/19</td><td>$139,575</td></tr><tr> <td>Thor Walton</td><td>Developer</td><td>New York</td><td>61</td><td>2013/08/11</td><td>$98,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>$87,500</td></tr><tr> <td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>64</td><td>2012/04/09</td><td>$138,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>$125,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>$115,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>$75,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>$145,600</td></tr><tr> <td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>47</td><td>2011/03/21</td><td>$356,250</td></tr><tr> <td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>2009/02/27</td><td>$103,500</td></tr><tr> <td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>$86,500</td></tr><tr> <td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>2008/11/13</td><td>$183,000</td></tr><tr> <td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>29</td><td>2011/06/27</td><td>$183,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>$112,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>Update: There's also Bootstrap TableBootstrap 3 Example with 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 Sortable Example: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> 这篇关于Bootstrap - 如何对表格行进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-26 00:43
Powered by LMLPHP ©2024 如何对表格行进行排序 0.007074