BootStrapTable服务器分页实例解析_javascript技巧

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
, table
分页
bootstrap服务器分页、bootstrap分页实例、bootstrap3 分页实例、bootstrap 分页、bootstrap table 分页,以便于您获取更多的相关知识。

时间: 2024-08-08 03:34:56

BootStrapTable服务器分页实例解析_javascript技巧的相关文章

JSP基于Bootstrap分页显示实例解析_javascript技巧

首先介绍一款简单利落的分页利器:bootstrap-paginator,可以参考:Bootstrap Paginator分页插件使用方法详解 这篇文章进行学习. 效果截图:   GitHub官方下载地址:https://github.com/lyonlai/bootstrap-paginator  下面就来详细介绍一下基于这款分页利器的JSP分页显示实现过程(注:相较于原网页我隐去了很多不必要的内容,本例只专注于分页显示的实现) 一.为什么需要分页显示?  这篇博文说得很透彻:分页技术原理与实现

Bootstrap菜单按钮及导航实例解析_javascript技巧

下拉菜单 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog

Vuejs第六篇之Vuejs与form元素实例解析_javascript技巧

本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程,非常适合新手学习,感兴趣的朋友一起看看吧! 资料来于官方文档: http://cn.vuejs.org/guide/forms.html 表单绑定 ①常见绑定方法: [1]文本输入框绑定: [2]textarea绑定(类似[1]): [3]radio选中值绑定: [4]checkbox绑定(自动捆绑数组,无需name): [5]select绑定: [6]select multiple多选选中框绑定: [7]动态绑定(以上不同类型但同一个

JS 拦截全局ajax请求实例解析_javascript技巧

你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!?,少年,想法有点大胆,不过,我欣赏!直接上轮子,Ajax-hook不仅可以满足你想要的,同时可以给你更多. Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook 如何使用 1.引入ajaxhook.js <scr

Vuejs第八篇之Vuejs组件的定义实例解析_javascript技巧

本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件的定义 ①组件的作用: [1]扩展HT

基于BootStrap实现局部刷新分页实例代码_javascript技巧

在之前的工作中我用的分页有很多,一直不牢固,所以自己用起来也不是很顺手,这是一个局部刷新的分页,我试了很多,本想用mvcPager来做局部刷新,但是考虑到成本太高,放弃了,先来总结一下基于bootstrap的分页吧,便于自己以后使用 开源地址 https://github.com/lyonlai/bootstrap-paginator 首先引用 Jquery bootstrap.min.js bootstrap-paginator.min.js 控制器代码 [AuthorizationCodeA

vue分页组件table-pagebar使用实例解析_javascript技巧

之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or

JS作用域闭包、预解释和this关键字综合实例解析_javascript技巧

本文实例分析了JS作用域闭包.预解释和this关键字.分享给大家供大家参考,具体如下: var number = 2; var obj = {number : 5, fn1 : ( function() { this.number *= 2; number=number*2; var number=3; return function() { this.number *= 2; number*=3; alert(number); } } )() }; var fn1 = obj.fn1; ale

javascript作用域链(Scope Chain)用法实例解析_javascript技巧

本文实例分析了javascript作用域链(Scope Chain)用法.分享给大家供大家参考,具体如下: 关于js的作用域链,早有耳闻,也曾看过几篇介绍性的博文,但一直都理解的模棱两可.近日又精心翻看了一下<悟透Javascript>这本书,觉得写得太深刻,在"代码的时空"一节里有一段介绍作用域链的地方寥寥数语,回味无穷(其实还是理解的模棱两可^_^).现在整理下自己的读书笔记,顺便借鉴网上资源,写下来. 一.从一个简单的问题说起 下面的js代码在页面中运行显示什么结果: