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 无符号右移运算符
Apr 17 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 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中的字符串函数
2006/11/24 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python subprocess库的使用详解
2018/10/26 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Python threading的使用方法解析
2019/08/28 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
追悼会上的答谢词
2014/01/10 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
企业管理培训感言
2014/01/27 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
名人传读书笔记
2015/06/26 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL