`
knight_black_bob
  • 浏览: 851095 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

bootstrap table 分页

    博客分类:
  • js
阅读更多

 

 

 

问题 : 有好多人用 pageSize: params.pageSize,  pageNumber: params.pageNumber  以为 传到后台 的参数 就是 pageSize  pageNumber,实际上是 limit offset ,bootstrap-table 作者没有说明,,,,见下图(2) 图片展示不太清楚,可以点击下面附件查看

 

 

<link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-table.js"></script>  
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-table-zh-CN.js"></script>
 <script type="text/javascript">
 

 

 

 

 

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=9" />
<title>TRACE-用户登录</title> 

<link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-table.js"></script>  
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap-table-zh-CN.js"></script>
 <script type="text/javascript">
 

 
 function getTab(){ 
	 
	 var url="<%=request.getContextPath()%>/user/articleAction.action";
	 alert(url);
         $('#tableaaa').bootstrapTable({

        	 method: 'get',
             url: url,
             cache: false,
             height: 400,
             striped: true,
             pagination: true,
             pageNumber:1,
             pageSize: 2,
             pageList: [10, 25],
             search: false, //不显示 搜索框
             showColumns: false, //不显示下拉框(选择显示的列)
             sidePagination: "server", //服务端请求
             minimumCountColumns: 2, 
             clickToSelect: true,
        	 columns: [{
                 field: 'state',
                 checkbox: false
             }, {
                 field: 'articleTitle',
                 title: 'articleTitle',
                 align: 'right',
                 valign: 'bottom'
             }, {
                 field: 'articleContent',
                 title: 'articleContent',
                 align: 'center',
                 valign: 'middle' 
             }, {
                 field: 'insertTime',
                 title: 'insertTime',
                 align: 'left',
                 valign: 'top'
             }, {
                 field: 'count',
                 title: 'count',
                 align: 'center',
                 valign: 'middle'
             }]
         });
}

 function queryParams(params) {
	return  { pageSize: params.pageSize, 
		pageNumber: params.pageNumber 
		}; 
}

$(function(){
	 
	 getTab(); 
})
 </script>
 
  </head> 
  <body>  
  
  <table id="tableaaa"   data-side-pagination="server" data-show-header="true"  data-height="400" data-pagination="true" data-search="false">
    <thead>
    <tr> 
        <th data-field="articleTitle" >Item ID</th>
        <th data-field="articleContent">Item Name</th>
        <th data-field="insertTime" >Item Price</th>
        <th data-field="count" >Item Name</th>
    </tr>
    </thead>
</table>
  
  
  </body>
</html>

 

 

public class ArticleAction extends BaseAction{
 
	private static final long serialVersionUID = -3386507630244204760L;
    private ArticleService articleService;
    
    private int limit;
    private int offset;
    
	public void getTable(){ 
		 List<Article> list =  articleService.getList(limit, offset);
		 int count = articleService.getCount();
		 try {
		 JSONObject jsonobj = new JSONObject();
		 jsonobj.put("total", count); 
		 JSONArray jsonarr = new JSONArray(list);
		 jsonobj.put("rows", jsonarr);
		 
			 System.out.println(jsonobj.toString());
			getResponse().getWriter().print(jsonobj.toString());
		} catch (IOException | JSONException e) { 
		} 
	}

  

 

 

 

 

 limit offset

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(右上角的爱心标志,支持支付宝和PayPal捐助),没钱捧个人场,谢谢各位。



 
 
 谢谢您的赞助,我会做的更好!

 

 

  • 大小: 7.8 KB
  • 大小: 54.7 KB
分享到:
评论
2 楼 knight_black_bob 2015-11-06  
pltuyuhong 写道
very good!  

表示之前 也很累啊,,没有发现 有这问题,,呵呵
1 楼 pltuyuhong 2015-11-06  
very good!  

相关推荐

    bootstrap table 分页栏修改

    1. **理解Bootstrap Table分页机制**: Bootstrap Table的分页功能依赖于内置的`pagination`模块。默认情况下,它会生成一个包含“第一”、“上一页”、“下一页”、“最后”按钮以及页码选择器的分页栏。这个过程...

    bootstrap table分页例子.zip

    这个"bootstrap table分页例子.zip"文件包含了一个展示如何在Bootstrap Table中实现分页功能的示例。Bootstrap Table提供了两种主要的分页方式:简单分页和智能分页。 **简单分页**: 1. **配置项**: 在初始化...

    基于bootstrap table分页和数据导出

    一、Bootstrap Table分页 1. **基本配置**:在HTML中,首先需要引入Bootstrap Table的相关CSS和JS库,然后创建一个`&lt;table&gt;`元素,并设置相应的类名如`table-bordered`, `table-striped`等。接着,通过JavaScript...

    BootStrap Table 分页操作前端参数设置

    bootStrap table 分页处理,前端代码参数的详细设置与返回数据的处理,表格渲染操作。 包括页面的查询条件如何转成json 格式,提交到后台的操作。设置列表第一列为复选框的操作。 禁止分页条上一页,下一页的点击...

    Bootstrap-table分页+汇总统计

    在本场景中,“Bootstrap-table 分页 + 汇总统计”意味着我们将探讨如何利用 Bootstrap-table 实现表格的数据分页以及对数据进行总计和统计。 首先,为了实现分页,我们需要在 HTML 中设置表格的基本结构,并在 ...

    bootstrap-table 分页Demo

    bootstrap-table后端分页的参数设置Demo。 bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、...

    bootstrap-table动态加载json数据并且支持分页

    $('#table').bootstrapTable({ pagination: true, pageSize: 10, // 更多配置... }); }); ``` 在上述代码中,`pagination`设置为`true`启用分页,`pageSize`设为每页10条记录。Bootstrap Table还提供了其他...

    Sql Server 通用分页存储过程(BootStrap Table)

    Sql Server BootStrap Table 分页 通用的Sql Server分页程序,并且符合BootStrap Table 的调用标准.

    解决JS组件bootstrap table分页实现过程中遇到的问题

    本篇文章将深入探讨在实现Bootstrap Table分页时可能遇到的问题及其解决方案。 ### 问题1:服务器端无法获取表单值 在使用Bootstrap Table进行分页时,可能会遇到服务器端无法通过`request.form`获取到前端发送的...

    解决JS组件bootstrap table分页实现过程中遇到的问题_.docx

    ### 解决JS组件Bootstrap Table分页实现过程中遇到的问题 #### 一、背景介绍 Bootstrap Table 是一个基于 Bootstrap 的表格插件,它具有丰富的功能,包括排序、搜索、分页等。在实际项目开发中,特别是在涉及到后端...

    bootstrap-table客户端分页实例

    5. **初始化表格**:在JavaScript中调用`$(table).bootstrapTable(options)`方法初始化表格,`options`是一个包含各种配置项的对象。 6. **自定义功能**:根据需要,可以监听事件、调用API或扩展默认行为以实现特定...

    bootstrap-table后端分页功能完整实例

    本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css &lt;link rel="stylesheet" href="../plugins/...

    Bootstrap Table 跨页选择

    在“Bootstrap Table 跨页选择”这个主题中,我们主要关注的是如何在实现后台分页的表格中实现用户在不同页面选择行的功能,并能持久保存和恢复这些选择。 在传统的Bootstrap Table中,用户可能只能在当前页面进行...

    Bootstrap table分页问题汇总

    $('#tableList').bootstrapTable({ method: 'post', url: "", height: $(window).height() - 200, striped: true, dataType: "json", pagination: true, "queryParamsType": "limit", contentType: ...

    bootstrapTable 自定义可编辑每页显示的记录数

    引用在table.js后面,把原来的下拉选择每页数量变为输入框输入

    asp.net MVC5 (bootstrap-table+分页+日期控件)

    在这个项目中,开发者结合了Bootstrap-Table、分页和日期控件来提供更丰富的用户界面和交互体验。下面将详细介绍这些知识点。 **ASP.NET MVC5** ASP.NET MVC5是微软推出的一种基于模型-视图-控制器(Model-View-...

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

    使用Bootstrap实现分页,并且当页码过多时使用省略号,这篇文章有样式的简单演示:https://blog.csdn.net/u013025627/article/details/50485327 样式只是自己的简单样式,不同的项目有不同的样式风格,只是提供分页...

    bootstrap-table,前端分页框架

    Bootstrap Table支持两种分页模式:前端分页和后端分页。前端分页将所有数据一次性加载到客户端,然后在客户端进行分页操作;后端分页则将分页信息发送到服务器,由服务器返回当前页的数据。后端分页更适合大数据量...

    bootstrap分页插件

    Bootstrap分页插件是一种基于流行的前端框架Bootstrap设计的页面导航工具,主要用于在大量数据或内容中实现分块显示,提供用户友好的翻页体验。在Web应用中,当需要展示的数据超过一个页面所能容纳的范围时,分页就...

Global site tag (gtag.js) - Google Analytics