欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

BootStrapTable服务器分页实例解析

程序员文章站 2023-01-14 13:29:03
项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstraptable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的...

项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了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服务器分页实例解析,希望对大家有所帮助