文档章节

boostrap 分页表格插件带搜索

赵作文
 赵作文
发布于 2015/09/28 16:38
字数 555
阅读 140
收藏 0

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数据为:

           {

  • total35,

  • rows: [

    ]

    • id97,

    • delflag0,

    • activityName"test",

    • activityGoal"test",

    • saleNum1,

    • activityBudget1,

    • publicChannel1,

    • placeType3,

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

    • activityStatus2,

    • activityStatusName"待审批",

    • publicStart1443179740000,

    • publicEnd1443262539000,

    • activityStart1443262540000,

    • activityEnd1443348940000,

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

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

    • picName"1",

    • picDepartment"1",

    • picPhone"11111111111",

    • picEmail"1@sina.com",

    • creater6120

    • {

      }

}


© 著作权归作者所有

赵作文
粉丝 1
博文 23
码字总数 5827
作品 0
上海
后端工程师
私信 提问
基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询、分页、排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非...

walb呀
2017/12/04
0
0
基于 Beego 开发的后台管理系统 - gardens

gardens是基于Beego开发的易用、易扩展、界面友好的轻量级功能权限管理系统。 前端框架基于AdminLTE2进行资源整合,包含了多款优秀的插件,是笔者对多年后台管理系统开发经验精华的萃取。 本...

yunnet
2018/10/31
4K
0
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.8K
1
jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

晨曦之光
2012/03/09
402
0
JS(二十二)DataTables使用

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。免费开源 ( MIT license )! 支持商业用途。中文地址:http://www.datatables.club/ 分...

u014744118
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

15、SpringMVC进行json交互

SpringMVC进行json交互 json数据格式在接口调用中、html页面中较常用,json格式比较简单,解析还比较方便。 请求json、输出json。要求请求的是json串,前端页面中需要将请求的内容转成json,...

快乐的瓶子
26分钟前
6
0
delphi版插apc杀进程驱动源码

从c代码转的,备份一下,里面有硬编码unit MyDriver;{$HINTS OFF}{$WARNINGS OFF}interfaceusesnt_status, ntoskrnl, native, winioctl, fcall, macros;typeTKILL = ...

simpower
30分钟前
3
0
带你上手一款下载超 10 万次的 IDEA 插件

作者 | 倪超(银时) 阿里云开发者工具产品专家 本文整理自 11 月 7 日社群分享,每月 2 场高质量分享,点击加入社群。 导读:Cloud Toolkit 是本地 IDE 插件,帮助开发者更高效地开发、测试...

阿里云官方博客
30分钟前
3
0
GMAT语法7个常考重要考点分析

GMAT语法考点多,并非所有考点都值得重点关注。实际上GMAT语法存在一些高频考点,考生需要优先掌握它们才能更好地保证得分。同时GMAT备考中大家还需要培养连续做题的耐力。下面小编就来做具体...

bole6
35分钟前
3
0
最佳实践 | RDS & POLARDB归档到X-Pack Spark计算

X-Pack Spark服务通过外部计算资源的方式,为Redis、Cassandra、MongoDB、HBase、RDS存储服务提供复杂分析、流式处理及入库、机器学习的能力,从而更好的解决用户数据处理相关场景问题。 RD...

一肥仔
36分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部