Bootstrap表格添加搜索栏
在学习了表格的分页后,本文尝试在表格顶部加入搜索栏,用来筛选表格的数据,先看一下效果:
未进行搜索时,有394条记录:
在输入乘车码“1”和订单号“20150120”后,只有28条记录:
此处使用了两个筛选条件:乘车码和订单号进行了模糊查询,从而大大减少了表格的记录数,以达到搜索的目的。
HTML页面代码如下:
<div id="toolbar">
<div class="my-container">
<label class="myLabel-content">乘车码:</label>
<div class="myText-content">
<input id="busNo" type="text" class="form-control" placeholder="输入乘车码">
</div>
</div>
<div class="my-container">
<label class="myLabel-content">订单号:</label>
<div class="myText-content">
<input id="orderId" type="text" class="form-control" placeholder="输入订单号">
</div>
</div>
<div class="myBtn-content">
<button id="search" type="button" class="btn btn-primary">搜索</button>
<button id="reset" type="button" class="btn btn-default">重置</button>
</div>
</div>
<table id="testTable" data-toggle="table" data-height="530"
data-striped="true" data-classes="table table-hover" data-toolbar="#toolbar"
data-side-pagination="server" data-pagination="true" data-page-list="[10,20,50,100]">
<thead>
<tr>
<th class="col-md-3" data-field="BusNo" data-align="center">乘车码</th>
<th class="col-md-5" data-field="OrderId" data-align="center">订单号</th>
<th class="col-md-4" data-field="OrderDate" data-align="center" data-formatter="FormatDateTime">订单日期</th>
</tr>
</thead>
</table>
可以注意到:在table中并没有URL,因为在查询的过程中参数可以是变化的,会在JavaScript中对URL做动态的绑定。JavaScript代码如下:
$(function () {
$('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2' });
$('#search').click(function () {
var busNo = $('#busNo').val();
var orderId = $('#orderId').val();
$('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2?orderId=' + orderId + '&busNo=' +busNo });
});
$('#reset').click(function() {
$('#busNo').val('');
$('#orderId').val('');
$('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2' });
});
});
其中三个函数对表格的URL进行了设定:
1. 初始化页面时;
2. 点击“搜索”按钮,对URL添加了两个参数:“orderId”和“busNo”,稍后在后台代码中会对这两个参数进行处理;
3. 点击“重置”按钮,将清空查询条件,重新查询表格数据。
后台代码如下:
public JsonResult GetPaginationData2(string orderId, string busNo)
{
var offset = Request.Params["offset"] == null ? : int.Parse(Request.Params["offset"]);
var limit = Request.Params["limit"] == null ? : int.Parse(Request.Params["limit"]); using (var context = new TestEntities())
{
int count;
var q = (from a in context.Tickets
join b in context.Order on a.OrderId equals b.Id
select new
{
BusNo = a.BusNumber,
OrderId = b.Id,
OrderDate = b.OrderDateTime,
}).Where(
t => (string.IsNullOrEmpty(orderId) || t.OrderId.Contains(orderId)) &&
(string.IsNullOrEmpty(busNo) || t.BusNo.Contains(busNo)))
.Distinct()
.Pagination(offset, limit, out count);
var data = q.ToList();
return Json(new {rows = data, total = count}, JsonRequestBehavior.AllowGet);
}
}
下面是程序中会引用的CSS样式,供参考:
.my-container {
float: left;
display: inline-block;
margin-right:30px;
} .myLabel-content ,.myText-content,.myBtn-content{
float: left;
display: inline-block;
margin-left: 10px;
}
.myLabel-content,.myText-content input[type='text'],.myBtn-content .btn {
height: 30px;
font-size: 12px;
}
.myBtn-content .btn {
margin-bottom: 10px;
}
Bootstrap表格添加搜索栏的更多相关文章
- bootstrap表格添加按钮、模态框实现
bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为任意 <table> 添加基本样式 (只有横向分隔线)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 表格 笔记
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...
- Bootstrap 表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...
- 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- 在<s:iterator>标签里给动态表格添加序号
在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...
- 用JSON数据向已定义列的表格添加数据行
其实添加方式和在MVC中动态读取JSON数据创建表格一样,只不过一个是完整表格添加,一个是从表格中间添加.不详细说明了. <div> <table class="table ...
- 利用jquery表格添加一行并在每行第一列大写字母显示实现方法
表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
随机推荐
- android IPC通信(上)-sharedUserId&&Messenger
看了一本书,上面有一章解说了IPC(Inter-Process Communication,进程间通信)通信.决定结合曾经的一篇博客android 两个应用之间的通信与调用和自己的理解来好好整理总结一 ...
- Quartz 2D编程指南(2)图形上下文(Graphics Contexts)
Graphics Contexts 一个Graphics Context表示一个绘制目标(也能够理解为图形上下文).它包括绘制系统用于完毕绘制指令的绘制參数和设备相关信息.Graphics ...
- linux新建文件和文件夹命令
1.touch命令 touch命令用来修改文件的访问时间.修改时间.如果没有指定时间,则将文件时间属性改为当前时间. 当指定文件不存在,touch命令变为创建该文件. 语法: touch [-acm] ...
- WPF中的数据绑定Data Binding使用小结
完整的数据绑定的语法说明可以在这里查看: http://www.nbdtech.com/Free/WpfBinding.pdf MSDN资料: Data Binding: Part 1 http:// ...
- ecmall时间的问题
$time1 = date("Y-m-d H:i:s", gmtime()); $time = date("Y-m-d H:i:s", time()); / ...
- Netty聊天器(实战一):从0开始实战100w级流量应用
Java 聊天程序(百万级流量实战一):系统介绍 疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之14 [博客园 总入口 ] 源码IDEA工程获取链接:Java 聊天室 实战 源码 写在前面 ...
- Qt JSON解析生成笔记
对于这样一段json { "name": "布衣食", "gender": "Male", "age" ...
- jQuery——能够编辑的表格
版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635 今天学习了利用jQuery实现能够编辑的表格这个 ...
- 手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- appium(11)-java-client
Welcome to the Appium Java client wiki! This framework is an extension of the Selenium Java client. ...