BootStrapTable服务器分页实例解析

项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页。之前遇到的问题时服务器分页,在服务器端接收的参数为null。查了资料发现少了参数

主要引入js

<script type="text/javascript" src="<%=path%>/plugins/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="<%=path%>/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
$('#bootstrap_table')
   .bootstrapTable(
     {
      method : 'post',
      url : basePath + "/XXXServlet",
      <span style="color:#FF0000;">contentType : "application/x-www-form-urlencoded",</span>
      cache : false,
      striped : true,
      // height : 480,
      locale : 'zh-CN',
      sidePagination : 'server',
      pagination : true,
      clickToSelect : true, // 单击行即可以选中
      sortName : 'SENDTIME', // 设置默认排序为 SENDTIME
      sortOrder : 'desc', // 设置排序为反序 desc
      pageSize : 10,
      pageNumber : 1,
      pageList : [ 10, 20, 50, 100, 200, 500 ],
      queryParams : function(e) {
       var param = {
        userId : $("#userId").val(),
        type : "db",
        <span style="color:#FF0000;">pageSize : e.limit,
        pageIndex : (e.offset / e.limit) + 1,
        <span style="color:#000000;">filterlist : $("#oms_search_type").val()</span></span>
       };
       return param;
      },
      search : false,
      showColumns : false,
      showRefresh : false,
      columns : [
        {
         field : "ID",
         title : "编号",
         align : "center",
         valign : "middle",
         sortable : "true"
        },
        {
         field : "NAME",
         title : "名称",
         align : "center",
         valign : "middle",
         sortable : "true"
        },
        {
         field : "AGE",
         title : "年龄",
         align : "center",
         valign : "middle",
         sortable : "true"
        },
        {
         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;
         }
        } ],
      onLoadSuccess : function(data) {
       initUserInfo(data.userInfo);
      },
      formatNoMatches : function() {
       return '无符合条件的记录';
      },
      onDblClickRow : function(row, $element) {
      }
     }); 

需要注意的是红色的部分。当时post请求是,需要注意

<span style="color:#FF0000;">contentType : "application/x-www-form-urlencoded",</span> 

这个参数,必须要有,不然服务器获取不到参数。

以上所述是小编给大家介绍的BootStrapTable服务器分页实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • bootstrap table 服务器端分页例子分享

    1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru

  • 第一次动手实现bootstrap table分页效果

    先上图吧,这就是bootstrap table分页效果图 上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q

  • bootstrap-table实现服务器分页的示例 (spring 后台)

    最近前端都是用的bootstrap table这个插件,客户端分页的话数据量一多交互不好,所以大数据量的分页都用服务器端,下面开始撸代码 前端 首先看下bootstrap table 默认传的分页参数是什么 offset 从哪个下标开始 limit 每页限制的数量 可能跟我们的默认分页参数不大一样吧,所以决定改造一下,传到后台的参数为 page 第几页 从0开始 size 每页显示的数量 $('#' + tableId).bootstrapTable({ queryParams: functio

  • BootStrap中Table分页插件使用详解

    分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

  • Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值 解决:这是ajax的问题,原代码使用原生的ajax.   1可以用读流文件解决.2 如果想用request.form 方式,设置  contentType: "application/x-www-form-

  • Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据的起止时间,查询一定时间范围的数据.在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现. Bootstrap Table有两种使用方式: 1.对普通的 table 设置 data 属性: 2.通过JavaScript 来启用 Bootstrap Table 插件.

  • BootStrapTable服务器分页实例解析

    项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页.之前遇到的问题时服务器分页,在服务器端接收的参数为null.查了资料发现少了参数 主要引入js <script type="text/javascript" src="<%=path%>/plugins/bootstrap-table/bootstrap-table.

  • jQuery DataTables插件自定义Ajax分页实例解析

    一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不

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

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

  • C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析

    看到这篇文章的题目,估计很多人都会问,这个组件是不是有些显的无聊了,说到web通信,很多人都会想到ASP.NET SignalR,或者Nodejs等等,实现web的网络实时通讯.有关于web实时通信的相关概念问题,在这里就不再做具体的介绍了,有兴趣的可以自行百度. 下面我们介绍一款WebSocket组件websocket-sharp的相关内容. 一.websocket-sharp组件概述 websocket-sharp是一个C#实现websocket协议客户端和服务端,websocket-sha

  • java实现一个简单的Web服务器实例解析

    Web服务器也称为超文本传输协议服务器,使用http与其客户端进行通信,基于java的web服务器会使用两个重要的类, java.net.Socket类和java.net.ServerSocket类,并基于发送http消息进行通信. 这个简单的Web服务器会有以下三个类: *HttpServer *Request *Response 应用程序的入口在HttpServer类中,main()方法创建一个HttpServer实例,然后调用其await()方法,顾名思义,await()方法会在指定端口上

  • Springboot分页插件使用实例解析

    这篇文章主要介绍了Springboot分页插件使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在springboot工程下的pom.xml中添加依赖 <!--分页 pagehelper --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter

  • bootstrap table表格插件之服务器端分页实例代码

    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台. 示例截图: 客户端代码: //引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofo

  • Java Web开发入门书籍实例解析(总结一)

    从事Java Web开发这一段时间来,对Java 面向对象的思想和MVC开发模式可以说已经熟悉了.我当前参与的项目使用的框架是Spring.SpringMVC.Hibernate.下面我们小编给大家整理一篇教程帮助大家学习javaweb相关知识,感兴趣的朋友可以参考下. 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 1.静态web资源(如html 页面):指w

  • Jsp真分页实例---分页

    网页的分页功能的实现比较简单,实现方法也多种多样. 今天总结一个简单的Jsp真分页实例. 首先,提到分页就要先明确一个概念,何为真分页何谓假分页. 假分页:一次性从数据库读出表的所有数据一次性的返回给客户端,由js来控制每一页的显示. 真分页:由程序控制,每一次只返回一页大小的数据,显示到客户端. 由此可以很清楚的分辨出真假分页各自的优缺点: 假分页:由于一次性读出所有数据并返回给客户端,如果数据量庞大,所以这一次的动作可能是非常消耗服务器资源和带宽的, 但是返回给客户端以后就非常轻松了,客户在

  • PHP MSSQL 分页实例

    本文实例为大家分享了PHP MSSQL可刷新分页实例,具体内容如下 <?php /* '页面说明: */ $link=mssql_connect("MYSQL2005","sa","123456") or die("db link error!".mssql_error()); mssql_select_db("edu_dzk",$link) or die("db open error!&q

随机推荐