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

tianyawhl

发布于 2019-09-10 19:34:44

2.2K0

发布于 2019-09-10 19:34:44

文章被收录于专栏：前端之攻略前端之攻略

撸了今年阿里、头条和美团的面试，我有一个重要发现.......>>>

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

    var data = [{
            "name": "bootstrap-table",
            "stargazers_count": "<span style='width:100px;background:red'>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>

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+(?=<)/;

	}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap