在学习了表格的分页后,本文尝试在表格顶部加入搜索栏,用来筛选表格的数据,先看一下效果:

未进行搜索时,有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表格添加搜索栏的更多相关文章

  1. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为任意 <table> 添加基本样式 (只有横向分隔线)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Bootstrap 表格 笔记

    Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  4. Bootstrap 表格

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...

  5. 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

    Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...

  6. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  7. 在<s:iterator>标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

  8. 用JSON数据向已定义列的表格添加数据行

    其实添加方式和在MVC中动态读取JSON数据创建表格一样,只不过一个是完整表格添加,一个是从表格中间添加.不详细说明了. <div> <table class="table ...

  9. 利用jquery表格添加一行并在每行第一列大写字母显示实现方法

    表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

随机推荐

  1. git操作演示

    阶段一: git init git config --global user.email "you@example.com" git config --global user.na ...

  2. python--函数程序分析

    写函数,用户传入修改的文件名,与要修改的内容,执行函数,完成整个文件的批量修改操作 import os #加载模块 def xiu(a,b,c): #三个接受值的形参 f = open(a,encod ...

  3. NYOJ 905 卡片游戏

    卡片游戏 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描写叙述 小明近期宅在家里无聊.于是他发明了一种有趣的游戏.游戏道具是N张叠在一起的卡片,每张卡片上都有一个数字,数字 ...

  4. ACM-BFS之Open the Lock——hdu1195(双向BFS)

    这道题的0基础版本号,暴力BFS及题目详情请戳:http://blog.csdn.net/lttree/article/details/24658031 上回书说道,要用双向BFS来尝试一下. 最终A ...

  5. LeetCode(88)题解-- Merge Sorted Array

    https://leetcode.com/problems/merge-sorted-array/ 题目: Given two sorted integer arrays nums1 and nums ...

  6. 开源流媒体云视频平台EasyDarwin中EasyCMS服务是如何进行命令转发和消息路由的

    EasyCMS介绍 EasyCMS做为EasyDarwin开源流媒体云平台解决方案的一部分,主要进行的是设备的接入和Session(DeviceSession & ClientSession) ...

  7. 九度OJ 1138:进制转换 (进制转换)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2388 解决:935 题目描述: 将一个长度最多为30位数字的十进制非负整数转换为二进制数输出. 输入: 多组数据,每行为一个长度不超过30 ...

  8. ABAP 将Range 条目数转化

    RANGES:r_vbeln FOR lips-vbeln. r_vbeln-sign = 'I'. r_vbeln-option = 'EQ'. LOOP AT gt_item INTO gw_it ...

  9. machine learning for hacker记录(1) R与机器学习

    开篇:首先这本书的名字很霸气,全书内容讲的是R语言在机器学习上面的应用,一些基本的分类算法(tree,SVM,NB),回归算法,智能优化算法,维度约减等,机器学习领域已经有很多成熟的R工具箱,毕竟这个 ...

  10. Algorithm: Euler function

    欧拉函数. phi(n)表示比n小的与n互质的数的个数,比如 phi(1) = 1; phi(2) = 1; phi(3) = 2; phi(4) = 2; phi(5) = 4; 性质: 1. 如果 ...