BootStrap中的table实现数据填充与分页应用小结

网友投稿 303 2023-07-16


BootStrap中的table实现数据填充与分页应用小结

BootStrap table 是一个轻量级的table插件,使用AJAX获取jsON格式的数据,其分页和数据填充很方便,支持国际化。最近后台使用此插件做了一个表格应用,做个总结。

1.使用方法

可以通过又拍云提供的CDN获取js插件,样式表和国际化插件,或者直接去官网下载。将下面的js插件和样式放到html head 头里即可使用。

//样式

//国际化,表格汉化

2.table 数据填充

BootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,而是通过javascript初始化表格时指定url来获取数据,如下示例。

...

...

$('#table').bootstrapTable({

url: 'data.json'

});

第二种方式交第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。

var $table = $('#table');

$table.bootstrapTable({

url: "duoBaoActivityList",

dataType: "json",

pagination: true, //分页

singleSelect: false,

data-locale:"zh-US" , //表格汉化

search: true, //显示搜索框

sidePagination: "server", //服务端处理分页

columns: [

{

title: '活动名称',

field: 'name',

align: 'center',

valign: 'middle'

},

{

title: '状态',

field: 'status',

align: 'center',

valign: 'middle',

},

{

title: '参与人数',

field: 'participationCounts',

align: 'center'

},

{

title: '总人数',

field: 'totalCounts',

align: 'center'

},

{

title: '开始时间',

field: 'startTime',

align: 'center',

},

{

title: '操作',

field: 'id',

align: 'center',

formatter:function(value,row,index){

var e = '编辑 ';

var d = '删除 ';

return e+d;

}

}

]

});

field字段必须与服务器端返回的字段对应才会显示出数据。

3.分页与搜索

分页时BootStrap table 向后端传递两个分页字段:limit, offset ,前者表示每页的个数,默认为10个,后者表示分页时数据的偏移量。

而搜索时则向后端传递的是search字段,表示具体的搜索内容。

服务器端返回的数据中还要包括page(页数),total(数据总量)两个字段,前端要根据这两个字段分页。

最终具体显示效果如下图所示:

以上所述是给大家介绍的BootStrap中的table实现数据填充与分页应用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Eclipse使用maven搭建spring mvc图文教程
下一篇:深入理解Java中的接口
相关文章

 发表评论

暂时没有评论,来抢沙发吧~