bootstrap中的table实现数据填充与分页应用小结_javascript技巧

《bootstrap中的table实现数据填充与分页应用小结_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Bootstrap中的table实现数据填充与分页应用小结Bootstraptable是一个轻量级的table插件，使用AJAX获取JS0N格式的数据,其分页和数据填充很方便，支持国际化。最近后台使用此插件做了一个表格应用,做个总结。1•使用方法可以通过又拍云提供的CDN获取js插件，样式表和国际化插件，或者直接去官网下载。将下面的js插件和样式放到htmlhead头里即口J使用。〃样式

2、>〃国际化，表格汉化〈/script>2.table数据填充Bootstraptable获取数据有两种方式，一是通过table的data-url属性指定数据源，而是通过JavaScript初始化表格时指定url來获取数

3、据，如下示例。〈tabledata-toggle=气able"data-url=zzdata.json〃>•••$('#table，).bootstrapTable({url:'data.json，})；第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式來进行table数据填充。var$table=$('#table');Stable.bootstrapTable({url:zzduoBaoActivityList",dataType:〃jsof；pagineition:true,//分页singleSelect:fal

4、se,data-locale:，zzh-US，z,//表格汉化search:true,//显示搜索框sidePagination:"server",//服务端处理分页columns:[{title:活动名称'，field:'name",align:'center",valign:，middle"},{title:状态',field:'status',align:、ccnter",valign:'middle",},{title:参与人数field:'participationCounts',align:'center'},{title:总人数'，field:'totalCounts

5、，,align:'center'},{title:开始吋间’，field:'startTime，,align:'center',},{title:操作'，field:'id',align:'center',formatter:function(value,row,index){vare二’〈ahref二“#〃mce_href=/z#〃onclick二"edit（‘’+row.id+''）">编辑';vard=*删除';-rcturnc+d;}}]}）；fiel

6、d字段必须与服务器端返冋的字段对应才会显示出数据。3.分页与搜索分页时Bootstraptable向后端传递两个分页字段：limit,offset，前者表示每页的个数，默认为10个，后者表示分页时数据的偏移量。而搜索时则向后端传递的是search字段，表示具体的搜索内容。服务器端返回的数据中还要包括gge（页数）,total（数据总量）两个字段，前端要根据这两个字段分页。最终具体显示效果如下图所示：J扌5^）名称状态参与人数总皿有礼夺宝內部测试156100000000有礼测试212020有礼测试11030呃呃呃101111夺宝活动12001201夺宝活动13101301夺宝活动14

7、101401夺宝活动15101501夺宝活动16101601显示第1到第10条记录，总共27条记录每页显示10▲条记录汉化以上所述是小编给大家介绍的Bootstrap中的table实现数据填充与分页应用小结，希望对犬家有所帮助，如果人家有任何疑问请给我留言，小编会及时回复人家的。在此也非常感谢大家对脚本之家网站的支持！