Author: HelloGitHub- Kalifun
Bootstrap-table is a plugin based on Bootstrap and jQuery. Bootstrap-table is a plugin based on Bootstrap and jQuery
Introduce a,
As you can tell from the project name, this is a table plug-in for Bootstrap. Almost all front ends have been involved in work. Bootstrap Table provides a series of functions such as rapid Table building, query, paging and sorting.
Project address: github.com/wenzhixin/b…
Bootstrap and jQuery may be a bit out of date, but if you still use these two libraries due to historical technology selection or old projects, this project will definitely make you feel better about your tabular presentation needs.
Second, the model
Boostatrp Table has two modes: Client mode and server mode.
-
Client: show the data that the server needs to load at one time through the data interface, and then load it into JSON and generate the table. We can define the number of rows to display, pagination, etc., and no more requests will be sent to the server.
-
Server: according to the set number of records per page and the current page display, send data to the server for query.
Three, actual combat operation
Tips: Explanations are presented in the code in the form of comments, please pay attention to read.
We use the simplest CDN introduction method, the code can run directly. To see the effect, copy the code and configure the path to the JSON file.
3.1 Getting Started
The asterisk in the comment indicates that this parameter is required, without further ado about the code. Sample code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, Bootstrap Table!</title>/ / into the CSS<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>// The table to fill in<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>/ / into the js<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script>
window.operateEvents = {
// Triggered when class=delete is clicked
'click .delete': function (e,value,row,index) {
// Print the entire line of data on the console
console.log(row); }}; $('#tb_departments').bootstrapTable({
url: '/frontend/bootstrap-table/user.json'.// Request the background URL (*)
method: 'get'.// Request mode (*)
// data: data, // When not using the background request above, use data to receive data
toolbar: '#toolbar'.// Which container to use for the tool button
striped: true.// Whether to display line spacing colors
cache: false.// Whether to use cache, default is true, so generally need to set this property (*)
pagination: true.// Whether to display paging (*)
sortable: false.// Whether to enable sorting
sortOrder: "asc".// Sort
sidePagination: "client".// Paging mode: client paging, server paging (*)
pageNumber:1.// Initialize the first page, default first page
pageSize: 6.// Number of rows per page (*)
pageList: [10.25.50.100].// Select the number of lines per page (*)
search: true.// Whether to display table search, this is a client search, will not enter the server, so personally feel not meaningful
strictSearch: true.// Enable strict search. Disable comparison checking.
showColumns: true.// Whether to display all columns
showRefresh: true.// Whether to display the refresh button
minimumCountColumns: 2.// The minimum number of columns allowed
clickToSelect: true.// Whether to enable the selected row
height: 500.If the height attribute is not set, the table automatically identifies the table height based on the number of entries
uniqueId: "ID".// A unique identifier for each row, typically a primary key column
showToggle:true.// Whether to display the detail view and list view toggle buttons
cardView: false.// Whether to display a detailed view
detailView: false.// Whether to display the parent table
showExport: true.// Whether to display the export
exportDataType: "basic".//basic', 'all', 'selected'.
columns: [{
checkbox: true // Check box header, which is where we see the whole line can be selected by check box.
}, {
field: 'id'.title: 'ID' // We take the value of id in json and set the table header title to ID
}, {
field: 'username'.title: 'Username' // we take the json value of username and set the table header title to the username}, {field: 'sex'.title: 'gender' // We take the value of sex in json and set the table header title to gender}, {field: 'city'.title: 'city' // We take the value of city in json and set the header title to city}, {field: 'sign'.title: 'signature' // We take the value of sign in json and set the table header title to the signature}, {field: 'classify'.title: 'classification' // We take the value of classify in JSON and set the table header title to classify}, {//ormatter:function(value,row,index) reassigns data and returns to the foreground
// events Triggers events
field: 'Button'.title:"Operation".align: 'center'.events:operateEvents,formatter:function(value,row,index){
var del = '
returndel; }}].responseHandler: function (res) {
return res.data // Process the response data format before loading remote data.
// The value we take is in the data field, so we need to process it first so that we can get the result we want}});</script>
</body>
</html>
Copy the code
The above code shows the basic functionality implemented through the basic API; the sample code does not list all the apis. There are many more interesting functions waiting to be discovered in this library, just like the saying that the master leads the cultivation depends on the individual ~
3.2 Disassembly and explanation
The key points are described below, in order to make it more convenient for users to understand the use of plug-ins.
3.2.1 Initialization
Select the table to initialize. $('#tb_departments').bootstrapTable({}) this is just like the entry to the table. <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
Copy the code3.2.2 Read the data section
columns:[{field: 'Key'.title: 'File path'.formatter: function(value,row,index){}}]Copy the code- Field Key of a key-value pair in JSON
- Title is what the table header displays
- Formatter is a function type that we use when we need to modify the data content. Example: code conversion
3.2.3 Event Triggers
events:operateEvents
window.operateEvents = {
'click .download': function (e,value,row,index) {
console.log(row); }}Copy the codeEvent triggers are a good choice because many times we need to work against tables. For example, it can record our row data, use triggers to execute custom functions, and so on.
Four, extension,
Here are a few extensions that allow us to easily implement more table functions without having to build our own wheels to make our work more efficient (you can also visit the official website to see how to use the extensions, the official website has collected a large number of extensions). Old rules directly on the code:
4.1 Table Export
<script src="js/bootstrap-table-export.js"></script>
showExport: true.// Whether to display the export
exportDataType: basic, // Export data type, support: 'basic', 'all', 'selected'
exportTypes:['json'.'xml'.'csv'.'txt'.'sql'.'excel'] // Export the type
Copy the code4.2 Automatic Refresh
<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
autoRefresh: true.// Set true to enable the auto-refresh plug-in. This does not mean that automatic refresh is enabled
autoRefreshStatus: true.// Set true to enable automatic refresh. This is an automatic state refresh when the table is loaded
autoRefreshInterval: 60.// Time in seconds for each automatic refresh to occur
autoRefreshSilent: true // Set to silent auto refresh
Copy the code4.3 copy the line
<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
showCopyRows: true.// Set true to show the copy button. This button copies the contents of the selected row to the clipboard
copyWithHidden: true.// Set true to copy with hidden columns
copyDelimiter: ', '.// This delimiter is inserted between column values when copying
copyNewline: '\n' // This newline is inserted between row values when copying
Copy the codeFive, the summary
This article is just a simple explanation of how to use bootstrap-table. If you are worried about the implementation of the Table function, you can use HelloGitHub recommended plugin. You’ll find that web forms can also be so fast, looking forward to friends to explore more interesting features oh.
Note: the js part above is not in functional form, it is recommended to use the functional form after familiar with the use, so that it is easy to reuse and make the code look more standard.
Vi. Reference materials
Bootstrap-table Item address
Bootstrap-table official document
“Explain Open Source Project series” — let the people who are interested in open source projects not be afraid, let the initiator of open source projects not be alone. Follow along as you discover the joys of programming, use, and how easy it is to get involved in open source projects. Welcome to leave a message to contact us, join us, let more people fall in love with open source, contribute to open source ~