本文详细介绍了如何使用Bootstrap Table实现数据填充、分页和列宽可拖动功能。首先，展示了所需引入的文件，特别是强调了需要修改bootstrap-table.js中的参数resizable为true。接着，提供了模拟数据message.json，包含多个用户姓名和密码的记录。然后，给出了table.html的代码，使用了bootstrapTable方法并配置了相关参数如pagination和search。最后，展示了实现后的效果。
本文结构：先说明，后代码。拷贝可直接运行。
一、demo结构：
二、文件引入
这些里面除了下面2个比较难找，其他的都很好找
注意：需要将bootstrap-table.js中参数改为resizable: true
三、模拟的message.json数据准备
[
{
"name":"zhangsan1",
"password":"1"
},
{
"name":"zhangsan2",
"password":"2"
},
{
"name":"zhangsan3",
"password":"3"
},
{
"name":"zhangsan4",
"password":"4"
},
{
"name":"zhangsan5",
"password":"5"
},
{
"name":"zhangsan1",
"password":"1"
},
{
"name":"zhangsan2",
"password":"2"
},
{
"name":"zhangsan3",
"password":"3"
},
{
"name":"zhangsan4",
"password":"4"
},
{
"name":"zhangsan5",
"password":"5"
},
{
"name":"zhangsan1",
"password":"1"
},
{
"name":"zhangsan2",
"password":"2"
},
{
"name":"zhangsan3",
"password":"3"
},
{
"name":"zhangsan4",
"password":"4"
},
{
"name":"zhangsan5",
"password":"5"
}
]
四、table.html
BootStrap Table使用$('#table').bootstrapTable({
pagination:true,
search:true,
url:'/bootstrap_Table_resizable/json/message.json',
columns:[{
field:'name',
title:'姓名'
},{
field:'password',
title:'密码'
}]
})
五、效果展示
扫一扫
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
