在开发项目的时候，发现了一款JS组件系列——表格组件神器

，官方文档也比较简单，总结了一些常遇到的问题

实现一个简单的表格和分页，内容居中对齐

图片.png

Dashboard | Nadhif - Responsive Admin Template

/* 表格样式 */

.table>tbody>tr>td {

border: 0px;

text-align: center;

}

.bootstrap-table .table thead>tr>th {

text-align: center;

}

.table thead {

background: #ebeaea;

}

$('#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 += "";

result += "";

result += "";

return result;

}

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"

}

]

效果如下所示

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。