data数据源小示例
<link href="./plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="./plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> <link href="./plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" /> <script src="./plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script> <script src="./plugins/jquery/jquery-1.12.4.min.js"></script> <script src="./plugins/bootstrap-table/tableExport.min.js"></script> <script src="./plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="./plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script> <script src="./plugins/bootstrap-table/bootstrap-table-export.min.js"></script> <style> .table td, .table th { padding: 0; height: 2.5rem; vertical-align: middle; border: 1px solid #ced4da; } td input[type="text"], td select, td textarea { width: 100%; height: 100%; border: none; } </style> <div class="container-fluid"> <div id="toolbar" class="mt-3"> <div class="row" role="form"> <div class="col-auto"> <div class="input-group flex-nowrap"> <span class="input-group-text">Offset</span> <input type="text" class="form-control" name="offset" type="number" value="0" /> </div> </div> <div class="col-auto"> <div class="input-group flex-nowrap"> <span class="input-group-text">Limit</span> <input type="text" class="form-control" name="limit" type="number" value="5" /> </div> </div> <div class="col-auto"> <div class="input-group flex-nowrap"> <span class="input-group-text">Keyword</span> <input name="search" class="form-control" type="text" placeholder="Keyword" /> </div> </div> <div class="col-auto"><button id="ok" type="submit" class="btn btn-primary">OK</button></div> </div> </div> <table id="table" class="table table-bordered mb-0" data-show-columns="true" data-show-refresh="true" data-buttons="buttons" data-buttons-align="right" data-buttons-class="primary" data-buttons-prefix="btn" data-checkbox-header="true" data-click-to-select="true" data-pagination="true" data-search="true" data-custom-search="customSearch" data-custom-sort="customSort" > <thead> <tr> <th data-field="checked" data-halign="center" data-align="left" data-checkbox="true">id</th> <th data-field="id" data-halign="center" data-align="left" data-formatter="idFormatter" data-sortable="true">id</th> <th data-field="name" data-halign="center" data-align="left" data-formatter="nameFormatter" data-sortable="true">name</th> <th data-field="grade" data-halign="center" data-align="left" data-formatter="gradeFormatter">grade</th> <th data-field="gendar" data-halign="center" data-align="left" data-formatter="gendarFormatter">gendar</th> <th data-field="content" data-halign="center" data-align="left" data-formatter="contentFormatter">content</th> <th data-field="agree" data-halign="center" data-align="left" data-formatter="agreeFormatter">agree</th> <th data-field="id" data-halign="center" data-align="left" data-formatter="opFormatter" data-events="operateEvents">op</th> </tr> </thead> </table> </div> <script> var $table = $("#table"); $(function () { var data = [ { checked: "", id: 1, name: "aa1", grade: 1, gendar: 1, content: "学生学习很好", agree: 0 }, { checked: "", id: 2, name: "aa2", grade: 3, gendar: 2, content: "学生学习很好", agree: 1 }, { checked: "", id: 3, name: "aa10", grade: 3, gendar: 2, content: "学生学习很好", agree: 1 }, ]; $table.bootstrapTable({ toolbar: "#toolbar", data: data, locale: "zh-CN", classes: ["table", "table-bordered", "table-striped"], formatSearch: function () { return "Search Item Name"; }, }); }); function customSearch(data, text) { return data.filter(function (row) { return row.name.indexOf(text) > -1; }); } function customSort(sortName, sortOrder, data) { var order = sortOrder === "desc" ? -1 : 1; data.sort(function (a, b) { var aa = +(a[sortName] + "").replace(/[^\d]/g, ""); var bb = +(b[sortName] + "").replace(/[^\d]/g, ""); if (aa < bb) { return order * -1; } if (aa > bb) { return order; } return 0; }); } const grades = [1, 2, 3, 4, 5]; function idFormatter(value, row) { return "<input name='id[]' type='hidden' value='" + value + "' >" + value; } function nameFormatter(value, row) { return "<input name='name[]' type='text' value='" + value + "' >"; } function gradeFormatter(value, row) { let str = "<select name='grade[]'>"; let selected = ""; for (let i in grades) { if (value == grades[i]) { selected = "selected"; } else { selected = ""; } str += "<option value='" + grades[i] + "' " + selected + ">" + grades[i] + "</option>"; } str += "</select>"; return str; } function gendarFormatter(value, row) { const gendar = { 1: "male", 2: "female" }; let str = ""; let checked = ""; for (let i in gendar) { if (value == i) { checked = "checked"; } else { checked = ""; } str += "<label><input type='radio' name='gendar[]' value='" + i + "' " + checked + ">" + gendar[i] + "</label>"; } return str; } function contentFormatter(value, row) { return "<textarea name='content[]' rows='2' >" + value + "</textarea>"; } function agreeFormatter(value, row) { let checked = value == 1 ? "checked" : ""; return "<input type='checkbox' name='agree[]' " + checked + ">"; } function opFormatter(value, row) { return ['<a class="edit" href="javascript:void(0)" title="edit">', '<i class="bi bi-pencil"></i>', "</a> ", '<a class="remove" href="javascript:void(0)" title="Remove">', '<i class="bi bi-trash"></i>', "</a>"].join(""); } window.operateEvents = { "click .edit": function (e, value, row, index) { console.log(value, 1); alert("You click like action, row: " + JSON.stringify(row)); }, "click .remove": function (e, value, row, index) { console.log(value, 2); $table.bootstrapTable("remove", { field: "id", values: [row.id], }); }, }; function buttons() { return { btnUsersAdd: { text: "Highlight Users", icon: "bi-app", event: function () { alert("Do some stuff to e.g. search all users which has logged in the last week"); }, attributes: { title: "Search all users which has logged in the last week", }, }, btnAdd: { text: "Add new row", icon: "bi-android2", event: function () { alert("Do some stuff to e.g. add a new row"); }, attributes: { title: "Add a new row to the table", }, }, }; } </script>
html数据源小示例
<link href="./plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="./plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> <link href="./plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" /> <script src="./plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script> <script src="./plugins/jquery/jquery-1.12.4.min.js"></script> <script src="./plugins/bootstrap-table/tableExport.min.js"></script> <script src="./plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="./plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script> <script src="./plugins/bootstrap-table/bootstrap-table-export.min.js"></script> <table data-toggle="table" id="table"> <thead> <tr> <th>Name</th> <th data-field="star" data-sortable="true">Stars</th> <th data-field="forks" data-sortable="true">Forks</th> <th>Description</th> </tr> </thead> <tbody id="contents"> <tr> <td> <a>multiple-select</a> </td> <td>1615</td> <td>623</td> <td>A jQuery plugin to select multiple elements with checkboxes :)</td> </tr> <tr> <td> <a>bootstrap-show-password</a> </td> <td>220</td> <td>85</td> <td>Show/hide password plugin for twitter bootstrap.</td> </tr> <tr> <td> <a>bootstrap-table-examples</a> </td> <td>1734</td> <td>1532</td> <td>Bootstrap Table Examples</td> </tr> <tr> <td> <a>scutech-redmine</a> </td> <td>24</td> <td>18</td> <td>Redmine notification tools for chrome extension.</td> </tr> </tbody> </table> <script> setTimeout(() => { $("#table").bootstrapTable("destroy"); for (let i = 0; i < 5; i++) { $("#contents").append(` <tr> <td> <a>bootstrap-table-examples</a> </td> <td>1734</td> <td>1532</td> <td>Bootstrap Table Examples</td> </tr> `); } $("#table").bootstrapTable(); }, 3000); </script>