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

Bootstrap Table 插件含有樣式的數據如何排序,以下面的字段stargazers_countjavascript

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種方式,html

第一種方式:增長加樣式以前的額外字段,如增長stargazers_count1 字段,並設置data-sort-name="stargazers_count1"java

<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"chrome

<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 代碼bootstrap

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

}
相關文章
相關標籤/搜索