Bootstrap中table插件的使用

最新推荐文章于 2025-05-10 12:40:44 发布

time never ceases

最新推荐文章于 2025-05-10 12:40:44 发布

阅读量336

点赞数

分类专栏：前端技术

本文链接：https://blog.youkuaiyun.com/hacker_world/article/details/109146211

版权

前端技术专栏收录该内容

3 篇文章

订阅专栏

文章目录

Bootstrap插件的使用
一、查询所有（例：）
二、批量删除（例：）
三、排序（例：）
四、搜索（例：）
五、分页（例：）
二、使用步骤

Bootstrap插件的使用

table插件的使用可以解决表单查询、分页查询、批量删除、排序、搜索

提示：以下是本篇文章正文内容，下面案例可供参考

一、查询所有（例：）

二、批量删除（例：）

三、排序（例：）

四、搜索（例：）

五、分页（例：）

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

①查询所有

1.HTML5中的代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--3 引入jquery.js -->
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <!--4 引入Bootstrap的css和js文件：注意bootstrap的js文件一定要在jquery.js之后-->
    <link type="text/css"  rel="stylesheet" href="css/bootstrap.css"/>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <script type="text/javascript" src="js/bootstrap-table.js"></script>
</head>
<body>
<table class="table table-striped" id="table" align="center"></table>
<script type="text/javascript">
    $(function () {
        $("#table").bootstrapTable({
            url : "/Person/person/person_showAllPerson",
            columns :[
                {checkbox : true},
                {title :"ID",field :"id"},
                 {title :"姓名",field :"name"},
                {title :"年龄",field :"age"},
                {title :"性别",field :"sex"},
                {title : "手机号",field: "mobile",formatter:function (value) {
                    return value.charAt(0)+""+value.charAt(1)+""+value.charAt(2)+"****"+value.charAt(7)+""+value.charAt(8)+""+value.charAt(9)+""+value.charAt(10);
                }},
                 {title :"出生日期",field :"birthday"}
            ]
        })
    });
</script>
</body>
</html>

2.action中的代码

代码如下（示例）：

data = pd.read_csv(
public String showAllPerson() throws IOException {
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        PersonService ps = new PersonServiceImpl();
        List<Person> person = ps.selectAllShow();
        ObjectMapper mapper = new ObjectMapper();
        String result = mapper.writeValueAsString(person);
        out.print(result);
        out.flush();
        return null;
    }

②批量删除

1.HTML5代码如下：

代码如下（示例）：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-table.js"></script>

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <script type="text/javascript">
        $(function(){
            $("#table").bootstrapTable({
                columns:[
                    {checkbox:true},
                    {field:"userId",title:"编号"},
                    {field:"username",title:"姓名"},
                    {field:"password",title:"密码",formatter:function(value){console.log(value);
                            return "******";}}
                ],
                url:"/bootstrap/users/showUsers",
                toolbar:"<button class='btn btn-danger' οnclick='handleDelete()'>删除</button><button class='btn btn-primary'>添加</button>"
            })
        })
    </script>
</head>
<body>
    <table id="table" class="table table-striped"></table>
    <script type="text/javascript">
        function handleDelete(){
            var selections = $("#table").bootstrapTable("getSelections");
            console.log(selections);
            $("#table").bootstrapTable("refresh");
        }
    </script>
</body>