当前位置: 首页 > 编程笔记 >

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

晋承运
2023-03-14
本文向大家介绍BootStrap中的table实现数据填充与分页应用小结,包括了BootStrap中的table实现数据填充与分页应用小结的使用技巧和注意事项,需要的朋友参考一下

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

1.使用方法

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

//样式
<link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel="stylesheet"/> 
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
//国际化,表格汉化
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>

2.table 数据填充

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

<table data-toggle="table" data-url="data.json">
<thead>
... 
</thead>
</table>
$('#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 = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</a> '; 
var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">删除</a> '; 
return e+d; 
} 
}
]
});

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

3.分页与搜索

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

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

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

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

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

 类似资料:
  • 本文向大家介绍Bootstrap 填充Json数据的实例代码,包括了Bootstrap 填充Json数据的实例代码的使用技巧和注意事项,需要的朋友参考一下 本文介绍Bootstrap 填充Json数据,具体如下: 一、如图: 二、html代码: 三、js代码: 四、json数据格式: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Bootstrap Table服务器分页与在线编辑应用总结,包括了Bootstrap Table服务器分页与在线编辑应用总结的使用技巧和注意事项,需要的朋友参考一下 先看Bootstrap Table应用效果:  表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好。还可以设置查询数据的起止时间,查询一

  • 本文向大家介绍JS代码实现table数据分页效果,包括了JS代码实现table数据分页效果的使用技巧和注意事项,需要的朋友参考一下 第一个:实现的很常见很简单的显示页数翻页      效果图: •这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神) •下面就是JS代码了 第二个:实现前进页和后退页       效果图: •这是全部代码,用得原生JS,依然还是很简单滴(好像对原生js有种莫名的喜

  • 本文向大家介绍第一次动手实现bootstrap table分页效果,包括了第一次动手实现bootstrap table分页效果的使用技巧和注意事项,需要的朋友参考一下 先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条)  下面是表格的 <table id="reportTable" class="table table-bordered

  • 我在NetBeans IDE中工作,语言是Java,主要的类是JFrame Form。 我需要从Jtable获取所有数据并用这些数据填充数组。数组代表矩阵。 代码如下 我有一个错误 线程“AWT-EventQueue-0”java.lang.ClassCastException:java.lang.String无法转换为java.lang.Double 所以将表中的元素设置为双精度不是那么容易吗?

  • 本文向大家介绍Angualrjs和bootstrap相结合实现数据表格table,包括了Angualrjs和bootstrap相结合实现数据表格table的使用技巧和注意事项,需要的朋友参考一下 AngularJS的数据表格 需要使用angualarjs、bootstrap、dirPagination.js 效果图: 1.html部分 2.angularjsTable.js部分 3.json数据部