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 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
javascript中Object使用详解
Jan 26 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
js消除图片小游戏代码
Dec 11 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP中的Memcache详解
2014/04/05 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
文明演讲稿范文
2014/05/12 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
民主评议党员工作总结
2014/10/20 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python