<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table表格插件</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<style>
.container {
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<table id="table" class="table table-bordered table-striped" data-toolbar="#toolbar"></table>
</div>
<script>
$("#table").bootstrapTable({
method: "get",
url: "json/data.json",
contentType: "application/x-www-form-urlencoded", //必须要有!!!!
data: {},
pagination: true,
search: true,
height: 600,
sidePagination: "client",
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
searchOnEnterKey: true,
searchTimeOut: 500,
showRefresh: true,
showToggle: true,
showFooter: false,
showPaginationSwitch: true,
// idField: "id",
uniqueId: "id",
sortOrder: "desc",
editable: false,
clickToSelect: true,
singleSelect: true, // 只能选中一条,false可以选中多条
cache: false,
toolbar: "#toolbar",
// striped: true,
columns: [{
checkbox: true,
}, {
field: "id",
title: "选择",
align: "center",
visible: true,
}, {
field: "name",
title: "姓名",
align: "center",
visible: true,
}, {
field: "email",
title: "邮箱",
align: "center",
visible: true,
}, {
field: "tel",
title: "电话",
align: "center",
visible: true,
}, {
field: "phone",
title: "手机",
align: "center",
visible: true,
}],
//得到查询的参数
queryParams: function (params) {
//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
var query_params = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order, //排位命令(desc,asc)
//查询框中的参数传递给后台
search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数
};
return query_params;
},
})
$(function () {
$("#table").click(function () {
var rows = $("#table").bootstrapTable('getSelections');
console.log(rows)
})
})
</script>
</body>
</html>