基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template</title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.1.4/locale/bootstrap-table-zh-CN.min.js"></script> </head> <style> #delUser,#dupUser{ background: #1caf9a; color: #FFFFFF; border: none; margin-left: 12px; } </style> <body> <table id="mytab" class="table table-hover"></table> <script> $('#mytab').bootstrapTable({ url: '', queryParams: "queryParams", toolbar: "#toolbar", sidePagination: "true", striped: true, // 是否显示行间隔色 //search : "true", uniqueId: "ID", pageSize: "5", pagination: true, // 是否分页 sortable: true, // 是否启用排序 columns: [{ field: 'id', title: '登录名' }, { field: 'name', title: '昵称' }, { field: 'price', title: '角色' }, { title: '操作', field: 'id', align: 'center', valign: 'middle', formatter: option } ], //数据 data: [{ "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" }, { "id": 2, "name": "Item 2", "price": "$2" }, { "id": 3, "name": "Item 3", "price": "$3" }, { "id": 4, "name": "Item 4", "price": "$4" }, { "id": 5, "name": "Item 5", "price": "$5" }, { "id": 6, "name": "Item 6", "price": "$6" }, { "id": 7, "name": "Item 7", "price": "$7" }, { "id": 8, "name": "Item 8", "price": "$8" }, { "id": 9, "name": "Item 9", "price": "$9" }, { "id": 10, "name": "Item 10", "price": "$10" }, { "id": 11, "name": "Item 11", "price": "$11" }, { "id": 12, "name": "Item 12", "price": "$12" }, { "id": 13, "name": "Item 13", "price": "$13" }, { "id": 14, "name": "Item 14", "price": "$14" }, { "id": 15, "name": "Item 15", "price": "$15" }, { "id": 16, "name": "Item 16", "price": "$16" }, { "id": 17, "name": "Item 17", "price": "$17" }, { "id": 18, "name": "Item 18", "price": "$18" }, { "id": 19, "name": "Item 19", "price": "$19" }, { "id": 20, "name": "Item 20", "price": "$20" } ] }); //操作栏的格式化 // 定义删除、更新操作 function option(value, row, index) { var htm = '<button id="delUser" userId=' + value + ' onclick="delUser(this)">删除</button><button id="dupUser" onclick="updUser(' + value + ')">修改</button>' return htm; } // 删除用户 function delUser(dom) { var mymessage = confirm("确认删除嘛？"); if(mymessage == true) { $.ajax({ url: path + '/user/' + $(dom).attr("userId"), type: 'delete', success: function(data) { $(dom).parent().parent().hide(); }, error: function(data) { alert("服务器繁忙") } }); } } // 编辑用户 function updUser(id) { layer.open({ type: 2, title: '编辑用户', area: ['500px', '440px'], fix: false, // content: path + '/xxx/xxxxUpd/' + id, end: function() { $("#mytab").bootstrapTable('refresh', { url: path + "/xx/list" }); } }); } </script> </body> </html>
