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实现Sleep函数的代码
Mar 04 Javascript
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
javascript new一个对象的实质
Jan 07 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
Three.JS实现三维场景
Dec 30 Javascript
微信小程序实现图片压缩
Dec 03 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
改进的IP计数器
2006/10/09 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
js创建数组的简单方法
2016/07/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
django 外键创建注意事项说明
2020/05/20 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
腾讯公司的一个sql题
2013/01/22 面试题
文秘专业大学生求职信
2013/11/10 职场文书
商务考察邀请函范文
2014/01/21 职场文书
安全生产责任书
2014/03/12 职场文书
士力架广告词
2014/03/20 职场文书
单位授权委托书范文
2014/08/02 职场文书
无私奉献演讲稿
2014/09/04 职场文书
万能检讨书2000字
2014/10/17 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技