使用 bootstrap-table-develop 插件遍历数据

曾经终败给现在 2021-07-25 17:37 411阅读 0赞

## **使用bootstrap-table-develop插件快速遍历数据** ##

1.  下载bootstrap-table-develop插件  
    [http://download.csdn.net/download/Jie\_1997/12054552][http_download.csdn.net_download_Jie_1997_12054552]
2.  下载完成后解压缩  
    ![在这里插入图片描述][20191226163921187.png]
3.  将bootstrap-table-develop复制到项目中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]

**使用插件**

<!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>ItemNewspaper</title>
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        
        @*引入bootstrap-table-develop中的所需文件*@
        <script src="~/bootstrap-table-develop/dist/bootstrap-table.js"></script>
        <link href="~/bootstrap-table-develop/dist/bootstrap-table.css" rel="stylesheet" />
        <script src="~/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
    </head>
    <body>
        <div>
            <table id="table" style="background-color: azure;"></table>
        </div>
    
        <script>
            window.onload = function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    url: '',         //请求后台的URL（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: true,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                    strictSearch: true,
                    queryParams: {						//接口参数
    
                    },
                    /**
                     *  columns：接受后台接口信息，放入table表中
                     *  field：接口中接收的字段名
                     *  title：table表的列名
                     * */
                    columns: [[
                        { field: "id", title: "编号" },
                        { field: "name", title: "名称" },
                        { field: "sex", title: "性别" },
                        { field: "address", title: "地址" },
                        { field: "phone", title: "电话" }
                    ]],
                })
            }
        </script>
    </body>
    </html>

[http_download.csdn.net_download_Jie_1997_12054552]: http://download.csdn.net/download/Jie_1997/12054552
[20191226163921187.png]: /images/20210725/c5a8916e02034dcd87c5c57b24113e15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/5e1670a3a7de4915ac8ffacb805e81dc.png