Use Bootstrap-Table to achieve satisfactory table functions in 3 minutes-Bootstrap Tutorial-php.cn

This article will share with you the usage of the table plug-in Bootstrap-Table based on Bootstrap and jQuery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Use Bootstrap-Table to achieve satisfactory table functions in 3 minutes

1. Introduction

As you can tell from the project name, this is a Bootstrap table plug-in. The form of table display is almost always involved in all front-end work. Bootstrap Table provides a series of functions such as quick table creation, query, paging, sorting, etc. [Related recommendations: "bootstrap Tutorial"]

Project address: https://github.com/wenzhixin/bootstrap-table

possible Bootstrap and jQuery technologies are somewhat outdated, but if you are still using these two libraries due to historical technology selection or old projects, then this project will definitely make you smile, and it will be easy to meet the table display requirements. !

2. Mode

Boostatrp Table is divided into two modes: client mode and server mode.

Client: Display the data that the server needs to load at one time through the data interface, then convert it into json and generate a table. We can define the number of displayed rows, paging, etc. ourselves, and no requests will be sent to the server at this time.
Server: Send data to the server for query based on the set number of records per page and the current displayed page.

3. Practical Operation

Tips: The explanations are all shown in comments in the code. Please read carefully.

We use the simplest CDN introduction method, and the code can be run directly. Copy the code and configure the path to the json file to see the effect.

3.1 Get started quickly

The asterisk in the comment indicates that the parameter must be written, so let’s talk about the code without saying much. Sample code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello, Bootstrap Table!</title>
    // 引入 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/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>
    // 需要填充的表格
    <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
// 引入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/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script>
        window.operateEvents = {
            // 当点击 时触发
            &#39;click .delete&#39;: function (e,value,row,index) {
                // 在 console 打印出整行数据
                console.log(row);
            }
        };
 
        $(&#39;#tb_departments&#39;).bootstrapTable({
            url: &#39;/frontend/bootstrap-table/user.json&#39;,         //请求后台的 URL（*）
            method: &#39;get&#39;,                      //请求方式（*）
            // data: data,                      //当不使用上面的后台请求时，使用data来接收数据
            toolbar: &#39;#toolbar&#39;,                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为 true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                    //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",           //分页方式：client 客户端分页，server 服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 6,                        //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以个人感觉意义不大
            strictSearch: true,                 //启用严格搜索。禁用比较检查。
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置 height 属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            showExport: true,                   //是否显示导出
            exportDataType: "basic",            //basic&#39;, &#39;all&#39;, &#39;selected&#39;.
            columns: [{
                checkbox: true     //复选框标题，就是我们看到可以通过复选框选择整行。
            }, {
                field: &#39;id&#39;, title: &#39;ID&#39;       //我们取json中id的值，并将表头title设置为ID
            }, {
                field: &#39;username&#39;, title: &#39;用户名&#39;         //我们取 json 中 username 的值，并将表头 title 设置为用户名
            },{
                field: &#39;sex&#39;, title: &#39;性别&#39;                //我们取 json 中 sex 的值，并将表头 title 设置为性别
            },{
                field: &#39;city&#39;, title: &#39;城市&#39;               //我们取 json 中 city 的值，并将表头 title 设置为城市
            },{
                field: &#39;sign&#39;, title: &#39;签名&#39;               //我们取 json 中 sign 的值，并将表头 title 设置为签名
            },{
                field: &#39;classify&#39;, title: &#39;分类&#39;           //我们取 json 中 classify 的值，并将表头 title 设置为分类
            },{
                //ormatter:function(value,row,index) 对后台传入数据 进行操作 对数据重新赋值 返回 return 到前台
                // events 触发事件
                field: &#39;Button&#39;,title:"操作",align: &#39;center&#39;,events:operateEvents,formatter:function(value,row,index){
                    var del = &#39;<button type="button" class="btn btn-danger delete">删除</button>&#39;
                    return del;
                }
            }
            ],
            responseHandler: function (res) {
                return res.data      //在加载远程数据之前，处理响应数据格式.
                // 我们取的值在data字段中，所以需要先进行处理，这样才能获取我们想要的结果
            }
        });
</script>
</body>
</html>

Copy after login

Use Bootstrap-Table to achieve satisfactory table functions in 3 minutes

The above code shows how to implement basic functions through basic APIs. The sample code does not list all APIs. There are many interesting functions in this library waiting for everyone to discover. As the saying goes, it is up to oneself to lead the master to practice~

3.2 Disassembly and explanation

The following are the key points It is explained to make it easier for friends to use the plug-in clearly.

3.2.1 Initialization part

选择需要初始化表格。
$(&#39;#tb_departments&#39;).bootstrapTable({})
这个就像table的入口一样。
<table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

Copy after login

3.2.2 Reading data part

1	`columns:[{field: 'Key', title: '文件路径',formatter:` `function(value,row,index){} }]`

Copy after login

field json middle key The Key
title in the value pair is the content displayed in the table header.
formatter is a function type that will be used when we need to modify the data content. Example: Encoding conversion

3.2.3 Event trigger

events:operateEvents
 window.operateEvents = {
        &#39;click .download&#39;: function (e,value,row,index) {
            console.log(row);
        }
   }

Copy after login

Because many times we need to process tables, event triggers are a good choice. For example: it can record our row data, and can use triggers to execute customized functions, etc.

4. Extensions

Introducing several extensions that allow us to easily implement more table functions without having to invent our own wheels to make our work more efficient (you can also go to the official website to view the extensions For specific usage methods, the official has collected a large number of extensions). The old rules go directly to the code:

4.1 Table export

<script src="js/bootstrap-table-export.js"></script> 
showExport: true,                                           //是否显示导出
exportDataType: basic,                                      //导出数据类型，支持：&#39;基本&#39;，&#39;全部&#39;，&#39;选中&#39;
exportTypes:[&#39;json&#39;, &#39;xml&#39;, &#39;csv&#39;, &#39;txt&#39;, &#39;sql&#39;, &#39;excel&#39;]   //导出类型

Copy after login

4.2 Automatic refresh

<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
autoRefresh: true,                              //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新
autoRefreshStatus: true,                        //设置 true 为启用自动刷新。这是表加载时状态自动刷新
autoRefreshInterval: 60,                        //每次发生自动刷新的时间（以秒为单位）
autoRefreshSilent: true                         //设置为静默自动刷新

Copy after login

4.3 Copy row

<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
showCopyRows: true,                                 //设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板
copyWithHidden: true,                               //设置 true 为使用隐藏列进行复制
copyDelimiter: &#39;, &#39;,                                //复制时，此分隔符将插入列值之间
copyNewline: &#39;\n&#39;                                   //复制时，此换行符将插入行值之间

Copy after login

5. Summary

This article simply explains how to use Bootstrap-Table. Friends who are worried about implementing the table function can use this plug-in recommended by HelloGitHub. You will find that creating forms on a web page can be so fast, and I look forward to your friends discovering more interesting functions.

Note: The above js part does not use the function form. It is recommended to use the function form after you are familiar with it. This will also facilitate reuse and make the code look more standardized.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Use Bootstrap-Table to achieve satisfactory table functions in 3 minutes. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

4 weeks ago By DDD

Atomfall guide: item locations, quest guides, and tips

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7659

CakePHP Tutorial

1393

C# Tutorial

1205

What is the format of the account name of steam

win11 activation key permanent

Related knowledge

How to get the bootstrap search bar Apr 07, 2025 pm 03:33 PM

How to use Bootstrap to get the value of the search bar: Determines the ID or name of the search bar. Use JavaScript to get DOM elements. Gets the value of the element. Perform the required actions.

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to do vertical centering of bootstrap Apr 07, 2025 pm 03:21 PM

Use Bootstrap to implement vertical centering: flexbox method: Use the d-flex, justify-content-center, and align-items-center classes to place elements in the flexbox container. align-items-center class method: For browsers that do not support flexbox, use the align-items-center class, provided that the parent element has a defined height.

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

See all articles