BootStrapTable服务器分页实例解析


Posted in Javascript onDecember 20, 2016

项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了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服务器分页实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 #Javascript
bootstrap多种样式进度条展示
Dec 20 #Javascript
JS封装通过className获取元素的函数示例
Dec 20 #Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 #Javascript
jquery+html仿翻页相册功能
Dec 20 #Javascript
JS实现拖拽的方法分析
Dec 20 #Javascript
JS实现Ajax的方法分析
Dec 20 #Javascript
You might like
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
许愿墙中用到的函数
2006/10/07 Javascript
js 加载时自动调整图片大小
2008/05/28 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
js html实现计算器功能
2018/11/13 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
[00:11]战神迅矛
2019/03/06 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
Python列表推导式的使用方法
2013/11/21 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
python实现经纬度采样的示例代码
2020/12/10 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
管理失职检讨书
2014/02/12 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
2015年党员承诺书
2015/01/21 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server