一：实现一个简单的表格和分页

图片.png

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template</title> <link rel="stylesheet" href="../../../css/bootstrap.min.css"> <link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css"> <script src="../../../js/jquery.min.js"></script> <script src="../../../js/bootstrap.min.js"></script> <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script> <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script> </head> <body> <table id="mytab" class="table table-hover"></table> <script> $('#mytab').bootstrapTable({ url: 'data1.json', queryParams: "queryParams", toolbar: "#toolbar", sidePagination: "true", striped: true, // 是否显示行间隔色 //search : "true", uniqueId: "ID", pageSize: "5", pagination: true, // 是否分页 sortable: true, // 是否启用排序 columns: [{ field: 'id', title: '登录名' }, { field: 'name', title: '昵称' }, { field: 'price', title: '角色' }, { field: 'price', title: '操作', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ] }); //操作栏的格式化 function actionFormatter(value, row, index) { var id = value; var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>"; return result; } </script> </body> </html>

json数据：

    [  
        {  
            "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" }, { "id": 2, "name": "Item 2", "price": "$2" }, { "id": 3, "name": "Item 3", "price": "$3" }, { "id": 4, "name": "Item 4", "price": "$4" }, { "id": 5, "name": "Item 5", "price": "$5" }, { "id": 6, "name": "Item 6", "price": "$6" }, { "id": 7, "name": "Item 7", "price": "$7" }, { "id": 8, "name": "Item 8", "price": "$8" }, { "id": 9, "name": "Item 9", "price": "$9" }, { "id": 10, "name": "Item 10", "price": "$10" }, { "id": 11, "name": "Item 11", "price": "$11" }, { "id": 12, "name": "Item 12", "price": "$12" }, { "id": 13, "name": "Item 13", "price": "$13" }, { "id": 14, "name": "Item 14", "price": "$14" }, { "id": 15, "name": "Item 15", "price": "$15" }, { "id": 16, "name": "Item 16", "price": "$16" }, { "id": 17, "name": "Item 17", "price": "$17" }, { "id": 18, "name": "Item 18", "price": "$18" }, { "id": 19, "name": "Item 19", "price": "$19" }, { "id": 20, "name": "Item 20", "price": "$20" } ]

二：说一说BootstrapTable的属性一览表


            url: '/Home/GetDepartment',         //请求后台的URL（*） method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） 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, //是否显示父子表 columns: [{ }]

三：bootstrap-table如何设置首行变色，其他行不变色

其实很简单，在代码之中找到首行对应的代码，然后添加属性即可

图片.png

#mytab  thead{background: #5488c4;}

四：添加删除数据之后表格自动刷新加载

$table.bootstrapTable('refresh');

五：如何设置bootstrap-table插件的隔行变色的颜色

图片.png

代码样式如下

<style>
#mytab tr:nth-child(even){
background:#f4f8fb;
}
</style>

作者：祈澈菇凉
链接：https://www.jianshu.com/p/b5ca011a0d9c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

BootstrapTable的使用教程

一：实现一个简单的表格和分页

二：说一说BootstrapTable的属性一览表

三：bootstrap-table如何设置首行变色，其他行不变色

四：添加删除数据之后表格自动刷新加载

五：如何设置bootstrap-table插件的隔行变色的颜色

猜你喜欢