Bootstrap列表分页及查询(数据与页面分离形式)

转载 2016年05月31日 14:52:41
Bootstrap两种分页形式:
       全部加载数据,然后在js中分页和查询;后台分页,通过后台加载一页的数据;后台发送json格式的数据到前台,前台通过js处理,生成table等,html或者jsp页面显示。
       两种方式都通过【$(‘页面table的ID’).bootstrapTable{()};】函数来处理数据。下面说下里面的参数
       1.method:请求方式。两种get和post。
       2.url:请求地址。
       3.dataType:类型。json
       4.search:是否显示搜索框。true:不显示 ;false:显示
       5.sidePagination:设置为服务器端分页 。参数有两种,server:服务端请求;client:客户端请求
       6.pageSize:每页条数。
       7.queryParams:设置参数(想后台发的参数,4个:a.limit;b.offset;c.search;d.order;e.sort;)
       8.responseHandler:响应后台参数。
 9.columns:[{}]  数据列
注:请求地址js会加入参数“limit=5&offset=0&order=asc”。limit参数是上述的pageSize;offset是每页第一条数,例如:第一页offset=0;第二页offset=10。

Bootstrap列表分页及查询(数据与页面分离形式)
前端

Bootstrap列表分页及查询(数据与页面分离形式)
后台controller(分页暂时未封装)
列的属性:
1.field:后台json中key
2.title:标题
3.visible: 是否隐藏列   false:隐藏  true:不隐藏
4.sortable: 是否可以排序     true:可以  false:不可以
5.valign: 对其方式
6.formatter:function(value, row, index){}  自定义列中内容(例如:修改按钮、删除按钮)
7.events:function(){}  对自定义列中内容的操作函数(例如:修改、删除)

项目下载地址:http://vdisk.weibo.com/s/tnPMj8sanfnT/1427438640

bootstrap 实现用 table 表格显示list数据

后台如何获取list数据的就不详细解释了,传递到前台的方式,我用的是 model.addAttribute("categories",categories);2.接下来前台可以通过${categor...
  • u012679583
  • u012679583
  • 2017年02月21日 10:57
  • 3680

【BootStrap】--具有增删改查功能的表格Demo

bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋。但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一、零碎,JS、CSS也...
  • successA
  • successA
  • 2015年09月14日 15:00
  • 37388

Bootstrap table两种分页示例

服务器端分页注意服务器端数据的返回的格式 [json]必须包含:total节点(总记录数),rows节点(分页后数据) 即:{“total”:24,”rows”:[…]} $('#test...
  • A__yes
  • A__yes
  • 2016年08月25日 10:44
  • 46638

BootStrap table 数据填充与分页应用总结

BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化。最近后台使用此插件做了一个表格应用,做个总结。 1.使用方法 可...
  • song19890528
  • song19890528
  • 2015年12月14日 20:09
  • 107887

bootstrap——完美的分页查询

最近,开始我们的Java项目,要求尽量使用bootstrap,因为它比easyUI要好看的多。然后就开始上网查,边查边做,虽然我们引入了一些bootstrap的样式,但是并没有js代码,所有的功能都需...
  • u010168160
  • u010168160
  • 2015年12月06日 21:51
  • 9435

Bootstrap Table使用整理(五)-分页组合查询

一、分页组合查询 /* * data-pagination 指定是否启用分页 * data-page-list 指定分页的页数据量数组 '[5,10]' * data-side-pagination...
  • u011127019
  • u011127019
  • 2017年06月08日 18:52
  • 2954

bootstrap 分页详解

1.导入js,css样式文件,缺一不可,顺序不可乱 2.代码,options绝大数可选配置 ...
  • u012316953
  • u012316953
  • 2017年04月18日 20:30
  • 1601

通用分页 (基于jquery、bootstrap)

基于bootstrap的"通用分页"v2.0(有人用的话,我可以升级) 实现:           1.同一个页面下,多个分页条互不干扰。           2.配置、使用方便。        ...
  • u013683780
  • u013683780
  • 2016年07月26日 19:15
  • 15720

Bootstrap Table 实现简单的查询和显示功能

最近用bootstraptable写了一个查询显示的界面。 下面是主要代码:   1.    我引入的css和js link rel="stylesheet" href="...
  • actionzh
  • actionzh
  • 2017年08月12日 22:39
  • 2377

使用Bootstrap实现分页,并且当页码过多时使用省略号

  • 2016年01月08日 21:18
  • 62KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap列表分页及查询(数据与页面分离形式)
举报原因:
原因补充:

(最多只允许输入30个字)