bootstrap-table自定义排序
2020-04-11 本文已影响0人
哥本哈根月光
在th标签中使用data-sortable="true"即可使得该column支持排序了。但是如果对应的td标签里面还有其他标签而不是text文本的话，则排序功能会有问题。例如我的td里面包含了一个a标签，a标签的text才是真正要排序的值。在这种情况下，默认的排序功能会有问题，这时候我们需要自定义排序函数。下面是范例代码
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/bootstrap-table.min.css">
</head>
<body>
<table data-toggle="table" data-search="true">
<thead>
<tr>
<th data-sortable="true" data-sorter="sortHander">Item ID</th>
<th data-sortable="true">Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#123">
5
</a>
</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>
<a href="#ab">
2
</a>
</td>
<td>Item 2</td>
<td>$2</td>
</tr>
<tr>
<td>
<a href="#6">
10
</a>
</td>
<td>Item 3</td>
<td>$3</td>
</tr>
</tbody>
</table>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-table.min.js"></script>
<script>
function sortHander(el_a, el_b) {
return $(el_a).text() - $(el_b).text();
}
</script>
</body>
</html>
其中sortHandler是一个自定义的(排序)函数， 在需要自定义排序的th标签中，使用data-sorter属性引入该函数即可了，很简单。这样子就实现了自定义排序了。
