BootStrapTable服务器分页实例解析

项目中经常会使用到表格，数据量大的时候还需要进行分页，项目设计阶段，我选择了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 table 服务器端分页例子分享 # 第一次动手实现bootstrap table分页效果 # Bootstrap table分页问题汇总 # BootStrap中Table分页插件使用详解 # Bootstrap Table服务器分页与在线编辑应用总结 # bootstrap-table实现服务器分页的示例（spring 后台） # 需要注意 # 小编 # 的是 # 在此 # 要有 # 给大家 # 少了 # 还需要 # 会使 # 量大 # 所述 # 符合条件 # 给我留言 # 单击 # 感谢大家 # 主要是 # 疑问请 # 有任何 # 非常好用

返回目录在线咨询

上一篇：c++如何使用std::deque双端队列_c++ 容器内部结构与随机访问性能【教程】
下一篇： ,it网站什么意思？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

BootStrapTable服务器分页实例解析

您的项目需求