boostrap 分页表格插件带搜索

2019独角兽企业重金招聘Python工程师标准>>>

1：引入相应的css和js文件

       css:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

   js:

        

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>

2：html代码

<div id="custom-toolbar" style="padding-bottom: 15px;">
<div class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<input id="activityName" class="form-control" type="text" placeholder="名称" name="activityName" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<select class="form-control" name="status" id="status">
  <option value="0">请选择活动状态</option>
 <c:if test="${activityStatusMap!=null}">
  <c:forEach items="${activityStatusMap}" var="activityStatus">
        <option value="${activityStatus.key}">${activityStatus.value}</option> 
    </c:forEach>
  </c:if>
 
</select>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="startTime" class="form-control" type="text" data-date-format="yyyy-mm-dd hh:ii:ss" placeholder="创建时间(开始)" name="startTime">
</div>
<div class="input-group">
<input id="endTime" class="form-control" type="text" data-date-format="yyyy-mm-dd hh:ii:ss" placeholder="创建时间(结束)" name="endTime">
</div>
</div>
<button id="querySearch" type="button"  class="btn btn-default" name="querySearch">搜索</button>
</div>
</div>

<table id="activityListTable" data-side-pagination="server" data-toolbar="#custom-toolbar" 
data-id-field="id" data-show-refresh="false">
<thead>
<tr>
<th data-field="activityName" data-align="center">活动主题</th>
<th data-field="picName" data-align="right">责任人</th>
<th data-field="activityStartView" data-align="center">活动时间(起)</th>
<th data-field="activityEndView" data-align="center">活动时间(止)</th>
<th data-field="activityStatusName" data-align="center">活动状态</th>
<th data-field="opt" data-formatter="operateFormatter">操作</th>
</tr>
</thead>
</table>

3：js代码调用

$(function() {
 activityListTable.bootstrapTable({
url : searchUrl,
method : 'get',
queryParamsType : 'pageNo',
cache : false,
height : 400,
striped : true,
pagination : true,
pageSize : 10,
pageList : [ 1, 5, 10, 20, 25 ],
showColumns : true,
showRefresh : true,
minimumCountColumns : 2,
clickToSelect : true
});
querySearch.on("click",function(){
var activityName=$.trim($("#activityName").val());
var status=$("#status").find("option:selected").val();
var startTime=$("#startTime").val();
var endTime=$("#endTime").val();
var queryParams=[];
queryParams.push({
 activityName:activityName,
     startTime:startTime,
     endTime:endTime
        });
activityListTable.bootstrapTable('refresh',
{  
      url:searchUrl+"?status="+status,
      queryParams:queryParams
      
}
);

function operateFormatter(value, row, index){
		//alert(row.id);
		var id=row.id;
		var creater=row.creater;
		var status=row.activityStatus;
		var detailUrl='<%=path %>/activity/detail/'+id+".shtml";
		var resetUrl='<%=path %>/activity/resetactivity/'+id+".shtml";
		var activityApprovalDetailUrl='<%=path %>/activity/activityApprovalDetail/'+id+".shtml";
		
		var optHtml= "<a href='"+detailUrl+"' <i class='glyphicon glyphicon-edit' </i>查看</a>";
		
		if(status==1){
			if(creater==loginId){
				optHtml+="<a href='javascript:deleteActivity("+id+")' <i class='glyphicon glyphicon-edit' </i>删除</a>";
				optHtml+="<a href='" + resetUrl + "' <i class='glyphicon glyphicon-edit' </i>编辑</a>";	
			}
			
		}else if(status==2){
			if(auditFlag=="true"){
				optHtml+="<a href='"+activityApprovalDetailUrl+"' <i class='glyphicon glyphicon-edit' </i>审批</a>";
			}
		}else if (status==4){
			if(creater==loginId){
				optHtml+="<a href='" + resetUrl + "' <i class='glyphicon glyphicon-edit' </i>编辑</a>";
			}
		}
		return optHtml;
	}

4：服务端返回的json数据为：

           {

• total: 35,

• rows: [

  ]

  • id: 97,

  • delflag: 0,

  • activityName: "test",

  • activityGoal: "test",

  • saleNum: 1,

  • activityBudget: 1,

  • publicChannel: 1,

  • placeType: 3,

  • activityDetail: "<p>test</p>",

  • activityStatus: 2,

  • activityStatusName: "待审批",

  • publicStart: 1443179740000,

  • publicEnd: 1443262539000,

  • activityStart: 1443262540000,

  • activityEnd: 1443348940000,

  • activityStartView: "2015-09-25 19:15:40",

  • activityEndView: "2015-09-27 18:15:40",

  • picName: "1",

  • picDepartment: "1",

  • picPhone: "11111111111",

  • picEmail: "1@sina.com",

  • creater: 6120

  • {

    }

}

转载于:https://my.oschina.net/u/2405705/blog/511992