首页 > 编程语言 > 详细

Bootstrap Table插件自定义排序使用方法

时间:2020-12-08 16:40:13      阅读:30      评论:0      收藏:0      [点我收藏+]

Bootstrap Table 插件含有样式的数据如何排序,如下面的字段stargazers_count

var data = [{
    "name": "bootstrap-table",
    "stargazers_count": "<span>526</span>",
	"stargazers_count1": "526",
    "forks_count": "122",
    "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
    "name": "multiple-select",
    "stargazers_count": "288",
	"stargazers_count1": "288",
    "forks_count": "150",
    "description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
    "name": "bootstrap-show-passwordbootstrap-show-password",
    "stargazers_count": "32",
	"stargazers_count1": "32",
    "forks_count": "11",
    "description": "Show/hide password plugin for twitter bootstrap."
},
{
    "name": "blog",
    "stargazers_count": "13",
	"stargazers_count1": "13",
    "forks_count": "4",
    "description": "my blog"
},
{
    "name": "scutech-redmine",
    "stargazers_count": "6",
	"stargazers_count1": "6",
    "forks_count": "3",
    "description": "Redmine notification tools for chrome extension."
    }
];

有2种方式

 

第一种方式:增加加样式之前的额外字段,如增加stargazers_count1 字段,并设置data-sort-name="stargazers_count1"

<table class="table-striped table-hasthead nowrap" id="tableTest1">
	<thead>
		<tr>
			<th data-field="name" data-sortable="true" >Name</th>
			<th data-field="stargazers_count" data-sortable="true" data-sort-name="stargazers_count1">Stars</th>
			<th data-field="forks_count">Forks</th>
			<th data-field="description">Description</th>
		</tr>
	</thead>
</table>

 

第二种方式:通过data-sorter="sortHander"

<table class="table-striped table-hasthead nowrap" id="tableTest1">
	<thead>
		<tr>
			<th data-field="name" data-sortable="true" >Name</th>

			<th data-field="stargazers_count" data-sortable="true" data-sorter="sortHander">Stars</th>
			<th data-field="forks_count">Forks</th>
			<th data-field="description">Description</th>
		</tr>
	</thead>
</table>

广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

js 代码

var reg1 =  /\d+(?=<)/;
var reg2 = /\d+/;
function sortHander(a,b){
   if(a.search("span")!=-1 && b.search("span")!=-1){
	  	var c = a.match(reg1)[0];
	    var d = b.match(reg1)[0];
        return c-d
   }
   if(a.search("span")!=-1 && b.search("span")==-1){
	  	var c = a.match(reg1)[0];
	    var d = b.match(reg2)[0];
        return c-d
   }
   if(a.search("span")==-1 && b.search("span")!=-1){
	  	var c = a.match(reg2)[0];
	    var d = b.match(reg1)[0];
        return c-d
   }
   if(a.search("span")==-1 && b.search("span")==-1){
	  	var c = a.match(reg2)[0];
	    var d = b.match(reg2)[0];
        return c-d
   }
   //var reg = /\d+(?=<)/;
}

Bootstrap Table插件自定义排序使用方法

原文:https://www.cnblogs.com/Qooo/p/14102685.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!