bootstraptable服务端数据渲染以及分页实现

By | 2020年6月10日
2 Comments

使用bootstrap的程序员们对于表格插件bootstraptable应该不陌生了，如果您会使用这个插件的话，在后面开发过程中会省去很大一部分时间以及介绍在实现数据渲染上所耗费的时间！

下面我就给大家介绍一下如何使用bootstraptable去渲染服务端的数据，并实现分页功能。

1、引入bootstraptable css及js文件：

<link href="./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="./bootstrap/table/bootstrap-table.min.css" rel="stylesheet">
<script src="./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./bootstrap/table/bootstrap-table.min.js"></script>
<script src="./bootstrap/table/locale/bootstrap-table-zh-CN.js"></script>

2、bootstraptable调用使用方法：

//html代码部分
<div id="toolbarChooseActivityGoods" class="form-inline">
     <div class="input-group input-group" style="margin: 0 10px;">
          <div class="input-group input-group" id="shop_filter">
               <span class="input-group-addon">搜索商品</span>
               <input type="text" id="chooseActivityGoodsSearchKey" class="form-control" placeholder="名称、编码...">
               <span class="input-group-addon" id="chooseActivityGoodsSearch" style="cursor: pointer;"><i class="glyphicon glyphicon-search"></i></span>
         </div>
     </div>
     <div class="btn-group" id="reset_search" data-actobj="">
          <button type="button" id="reset_searchbnt" class="btn btn-success">重置</button>
    </div>
</div>
<table id="table" class="table table-hover"></table>
//调用使用代码部分
var $table= $('#table');
var initTbale=function(){
    var windowHeight=$(window).height();  //window高度
    //获取toobar高度
    var toobarHeight=$("#toolbarChooseActivityGoods").height();
    var tableHeight=modelHeight-toobarHeight-20;
    var loadding = layer.load(1, {shade: [0.1,'#fff']});
    $chooseActivityGoodsTable.bootstrapTable('destroy').bootstrapTable({
		height:tableHeight,
		toolbar:"#toolbarChooseActivityGoods",
		toolbarAlign:'right',
		method: 'post',
	    dataType: "json",
	    dataField: 'rows',
	    url:'/web/Webhoo/Activity/getWarehouseGoods',  //获取服务端数据的地址
	    undefinedText: "null",//当数据为 undefined 时显示的字符
        striped : true, //是否显示行间隔色
        pageNumber : 1, //初始化加载第一页
        pagination : true,//是否分页
        sidePagination: "server",  //服务端分页
        pageSize : 10,//单页记录数
        pageList : [ 10, 20, 30, 60, 100],//可选择单页记录数
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        showRefresh : true,//刷新按钮
        queryParamsType : "limit",
        uniqueId : 'goods_bar_code',
        queryParams : function(params) { //上传服务器的参数
            var temp = {
                offset : params.offset,  // SQL语句起始索引
                pageNumber : params.limit,  // 每页显示数量
                warehouseId : warehouseId,
                key : $.trim($("#chooseActivityGoodsSearchKey").val()),  //搜索关键词
            };
            return temp;
        },
        responseHandler: function (res) {
          layer.close(loadding);
          return res;
        },
        onLoadError: function(){
          layer.close(loadding);
          layer.msg("请求失败,网络错误");
        },
		columns:[
		{
	        title : 'bar_code',
	        field : 'goods_bar_code',
	        visible:false,//隐藏此列，这里隐藏了id这个字段
	    },
		{
		  title : '序号',
		  field : '',
		  formatter: function (value, row, index) {
		    return index+1;
		  }
		},
		{
		  title : '商品图片',
		  field : 'goods_image',
		  formatter: function (value, row, index){
		  	return '<img src="http://erpimg.all-face.com/'+value+'" width="110" height="150">';
		  }
		},
		{
		  title : '商品名称',
		  field : 'goods_name',
		},
		{
		  title : '商品编码',
		  field : 'goods_code',
		},
		{
		  title : '商品规格',
		  field : 'goods_spec',
		},
		{
		  title : '商品单价',
		  field : 'sale_price',
		},
		{
		  title : '商品折扣',
		  field : 'discount',
		  formatter: function (value, row, index){
		  	return '<div class="bs-example bs-example-form" role="form"  style="width:129px;">\
		  			<div class="input-group">\
		  			<input type="number" data-id="'+row.goods_bar_code+'" data-type="1" class="form-control act_goods_type1" placeholder="90为9折">\
		  			<span class="input-group-addon">%</span>\
		  			</div></div>';
		  }
		},
		{
		  title : '一口价',
		  field : 'price',
		  formatter: function (value, row, index){
		  	return '<div class="bs-example bs-example-form" role="form"  style="width:129px;">\
		  			<div class="input-group">\
		  			<input type="number" data-id="'+row.goods_bar_code+'" data-type="2" class="form-control act_goods_type2" placeholder="">\
		  			<span class="input-group-addon">￥</span>\
		  			</div></div>';
		  }
		},
		{
		  title : '操作',
		  field : 'operation',
		  formatter: function (value, row, index) {
            return '\
                <div class="btn-group btn-group-sm">\
                  <button type="button" data-unid="'+row.goods_bar_code+'" class="btn btn-primary add_goods_activity_list">添加至活动</button>\
                </div>';
          }
		}
		],
    });

//调用表格渲染方法
initTbale();